Méthode universelle on dans jQuery

Pour lier des événements, on peut également utiliser la méthode universelle on. Son premier paramètre est le nom de l'événement (par exemple, 'click'), et le second est la fonction à lier.

Examinons un exemple avec le code HTML suivant :

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

Le CSS ressemble à ceci :

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

Maintenant, réécrivons le code pour les li que nous avions écrit précédemment en utilisant la méthode on. Pour tester son fonctionnement, cliquez sur les éléments de la liste :

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

Il est possible de lier une même fonction à plusieurs types d'événements simultanément - pour cela, il faut les énumérer séparés par un espace : 'click mousemove etc.'. Par exemple, comme ceci :

$('li').on('click mousemove', function func() {
	$(this).append('!');
});

Liezz à tous les liens un événement - lors du survol d'un lien, son href est ajouté entre parenthèses à la fin de son texte.

Liezz à toutes les inputs un événement - lors de la perte du focus, chaque input affiche sa value dans un paragraphe avec l'id=#test.