Liaison d'événements en jQuery

Pratiquement chaque événement JavaScript a sa méthode jQuery correspondante. Par exemple, un clic sur des éléments peut être capturé comme ceci : $(sélecteur).click(fonction).

Examinons le code HTML suivant :

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Le CSS suivant lui est appliqué :

cssli {
  width: 100px;
  cursor: pointer;
}

Faisons en sorte qu'un clic sur n'importe quel li affiche un point d'exclamation. Cliquez sur les éléments de la liste :

javascript$('li').click(function() {
  alert('!');
});

À l'intérieur de la fonction liée, this est accessible, référant l'élément dans lequel l'événement s'est produit (dans notre cas, le li sur lequel le clic a été effectué). Ce this peut être utilisé en style JavaScript, par exemple this.innerHTML ou en style jQuery - pour cela, ce this doit être enveloppé dans $, comme ceci : $(this).

Prenons le code HTML :

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Les styles CSS suivants sont appliqués à ce code :

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

Faisons en sorte qu'un clic sur un li ajoute un '!' à sa fin. Pour tester le fonctionnement, cliquez sur les éléments de la liste :

javascript$('li').click(function() {
  $(this).append('!');
});