Méthode on

La méthode on permet d'ajouter un gestionnaire d'événements à un élément. Pour supprimer le gestionnaire, vous pouvez utiliser la méthode off. Pour que l'événement ne se déclenche qu'une seule fois, puis que le gestionnaire se supprime lui-même - utilisez la méthode one. Les éléments auxquels nous lions le gestionnaire doivent exister au moment de l'appel de on.

Syntaxe

Ainsi nous ajoutons un gestionnaire d'événements à un élément, en premier paramètre sous forme de chaîne est transmis un ou plusieurs événements séparés par des espaces, en deuxième paramètre nous transmettons un sélecteur filtrant supplémentaire des descendants à l'intérieur de l'élément, en troisième - des données supplémentaires qui sont transmises au gestionnaire dans la propriété event.data lors du déclenchement de l'événement. Les deuxième et troisième paramètres sont optionnels. En quatrième, nous transmettons la fonction gestionnaire, à laquelle sont transmis l'objet événement et des paramètres supplémentaires optionnels. Si à la place de la fonction gestionnaire on transmet false, alors la fonction retournera simplement false :

$(sélecteur).on(événements, [sélecteur], [données], fonction-gestionnaire(objet événement, [paramètres supplémentaires]));

On peut utiliser la méthode on différemment, alors en premier paramètre est transmis un objet JavaScript, où les clés - le type d'événement, et les valeurs - les fonctions gestionnaires, appelées pour les événements :

$(sélecteur).on({'type événement': handler}, [sélecteur], [données]);

Si nous ne transmettons pas de sélecteur supplémentaire, alors l'événement se déclenche sur l'élément auquel nous attachons le gestionnaire, dans le cas contraire - sur l'élément descendant qui correspond à ce sélecteur (événements délégués). Le même gestionnaire d'événement peut être lié à un élément plusieurs fois.

Exemple

Affichons dans un alert, le texte du paragraphe avec #test lors d'un clic dessus, les clics sur les autres paragraphes ne mèneront à rien :

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Exemple

Lors d'un clic sur le paragraphe, affichons les données que nous avons transmises à la méthode on. Utilisons la fonction gestionnaire testFunc, que nous avons créée :

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Voir aussi

méthode off,
qui permet de supprimer un gestionnaire d'événements d'un élément
méthode one,
qui permet à un événement de se déclencher une fois, puis de supprimer automatiquement le gestionnaire
objet event,
qui contient des informations sur l'événement
méthode trigger,
qui permet de déclencher tous les gestionnaires d'événements, liés à l'élément pour les événements du type spécifié
méthode JavaScript bind,
qui permet de lier un contexte à une fonction