Fondamentaux des événements jQuery

Introduction

Bienvenue dans la documentation jQuery! Ce laboratoire vous présentera les événements jQuery.

jQuery fournit des méthodes simples pour attacher des gestionnaires d'événements à des sélections. Lorsqu'un événement se produit, la fonction fournie est exécutée. À l'intérieur de la fonction, this fait référence à l'élément DOM qui a initié l'événement.

La fonction de gestion d'événement peut recevoir un objet d'événement. Cet objet peut être utilisé pour déterminer la nature de l'événement et pour empêcher le comportement par défaut de l'événement.

Skills Graph

Configuration des réponses aux événements sur les éléments DOM

index.html a déjà été fourni dans la machine virtuelle.

jQuery facilite la configuration de réponses basées sur des événements pour les éléments de la page. Ces événements sont souvent déclenchés par l'interaction de l'utilisateur final avec la page, par exemple lorsqu'un texte est entré dans un élément de formulaire ou que le pointeur de la souris est déplacé. Dans certains cas, tels que les événements de chargement et de déchargement de la page, le navigateur lui-même déclenchera l'événement.

jQuery propose des méthodes pratiques pour la plupart des événements natifs du navigateur. Ces méthodes - y compris .click(), .focus(), .blur(), .change(), etc. - sont des raccourcis pour la méthode .on() de jQuery. La méthode on est utile pour lier la même fonction de gestionnaire à plusieurs événements, lorsque vous voulez fournir des données au gestionnaire d'événements, lorsque vous travaillez avec des événements personnalisés ou lorsque vous voulez passer un objet de plusieurs événements et gestionnaires.

// Configuration de l'événement en utilisant une méthode pratique
$("p").click(function () {
  console.log("Vous avez cliqué sur un paragraphe!");
});

// Configuration de l'événement équivalente en utilisant la méthode `.on()`
$("p").on("click", function () {
  console.log("click");
});

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Étendre les événements à de nouveaux éléments de page

Il est important de noter que .on() ne peut créer des écouteurs d'événements que sur les éléments qui existent au moment où vous configurez les écouteurs. Par exemple :

$(document).ready(function () {
  // Maintenant, créez un nouveau bouton avec la classe alert.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Configure le comportement de clic sur tous les éléments de bouton avec la classe alert
  // qui existent dans le DOM lorsque l'instruction est exécutée
  $("button.alert").on("click", function () {
    console.log("Un bouton avec la classe alert a été cliqué!");
  });
});

Si des éléments similaires sont créés après la configuration des écouteurs d'événements, ils ne prendront pas automatiquement les comportements d'événement que vous avez configurés précédemment.

Vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Configuration de plusieurs réponses aux événements

Très souvent, les éléments de votre application seront liés à plusieurs événements. Si plusieurs événements doivent partager la même fonction de gestion, vous pouvez fournir les types d'événements sous forme d'une liste séparée par des espaces à .on() :

// Plusieurs événements, même gestionnaire
$("div").on(
  "click change", // Liez des gestionnaires pour plusieurs événements
  function () {
    console.log("Un élément de formulaire a été cliqué ou modifié!");
  }
);

Lorsque chaque événement a son propre gestionnaire, vous pouvez passer un objet à .on() avec une ou plusieurs paires clé/valeur, la clé étant le nom de l'événement et la valeur étant la fonction pour gérer l'événement.

// Liaison de plusieurs événements avec différents gestionnaires
$("div").on({
  click: function () {
    console.log("cliqué!");
  },
  mouseover: function () {
    console.log("survolé!");
  }
});

Vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Récapitulatif

Félicitations! Vous avez terminé le laboratoire sur les bases des événements jQuery. Pour en savoir plus sur l'API jQuery, consultez la documentation officielle jQuery.