Explication détaillée des exemples d'utilisation de la fonction jQuery.on()

La fonction

on() est utilisée pour lier la fonction traitement d'événements à un ou plusieurs événements de l'élément spécifié.

De plus, vous pouvez également transmettre certaines données supplémentaires requises à la fonction de gestionnaire d'événements.

À partir de jQuery 1.7, la fonction on() fournit toutes les fonctions nécessaires pour lier les gestionnaires d'événements et est utilisée pour remplacer uniformément les fonctions d'événements précédentes telles que bind(), délégué(), live(), etc.

on() prend en charge les événements de liaison directement sur l'élément cible, et prend également en charge la liaison déléguée sur les éléments ancêtres de l'élément cible. En mode de liaison de délégation d'événements, même s'il s'agit d'un élément nouvellement ajouté après l'exécution de la fonction on(), tant qu'il remplit les conditions, la fonction de gestion des événements liés sera efficace pour lui.

De plus, cette fonction peut lier plusieurs gestionnaires d'événements au même élément et au même type d'événement. Lorsqu'un événement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via on(), utilisez la fonction off(). Si vous souhaitez attacher un événement, l'exécuter une seule fois, puis le supprimer, utilisez la fonction one().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.7. Il a principalement les deux formes d'utilisation suivantes :

Première utilisation :

jQueryObject.on( events [, selector ] [, data ], handler )

Utilisation deux :

jQueryObject.on( eventsMap [, selector ] [, data ] )

Paramètre

Description du paramètre

events Chaîne de type un ou plusieurs avec des espaces séparés types d'événements et espaces de noms facultatifs, tels que "click", "focus click", "keydown.myPlugin".

Le type d'objet eventsMap est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement lié (paramètre gestionnaire) .

selector Facultatif/Type de chaîne Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est nul ou omis, cela signifie que l'élément courant lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément courant).

data Facultatif/Tout type de données qui doivent être transmis à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.

Fonction de traitement d'événement spécifiée par le type de fonction du gestionnaire.

Pour l'espace de noms facultatif dans les événements de paramètre, veuillez vous référer à l'exemple de code ci-dessous.

Concernant le sélecteur de paramètre, vous pouvez simplement le comprendre comme : si le paramètre est égal à null ou omis, l'événement est lié à l'élément correspondant actuel ; sinon, c'est l'élément descendant de l'élément correspondant actuel ; qui correspond à l'événement de liaison du sélecteur.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM qui déclenche l'événement parmi les éléments descendants de l'élément correspondant actuel. Si le paramètre selector est nul ou omis, cela pointe vers l'élément correspondant actuel (c'est-à-dire l'élément).

on() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

La valeur de retour du gestionnaire de paramètres a le même effet que la valeur de retour de la fonction de traitement d'événements native du DOM. Par exemple, le gestionnaire d'événements de l'événement « submit » (soumission du formulaire) renvoie false pour empêcher la soumission du formulaire.

Si le gestionnaire de la fonction de traitement d'événements renvoie uniquement une valeur fausse, vous pouvez directement définir le gestionnaire sur false.

Valeur de retour

on()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Remarque importante :

Si le paramètre selector est passé, la fonction on() ne lie pas les gestionnaires d'événements aux éléments correspondant à l'objet jQuery actuel, mais à leurs éléments descendants qui correspondent à la liaison d'élément gestionnaire d'événements du paramètre selector du sélecteur. La fonction on() ne lie pas directement les événements à ces éléments descendants un par un, mais délègue le traitement aux éléments correspondants de l'objet jQuery actuel. En raison du mécanisme de flux d'événements DOM niveau 2, lorsque le sélecteur d'élément descendant déclenche un événement, l'événement sera transmis à tous ses éléments ancêtres dans le bouillonnement d'événements. Lorsque le flux d'événements est transmis à l'élément correspondant actuel, jQuery déterminera lequel. Il s'agit d'un élément descendant Lorsqu'un événement est déclenché, si l'élément correspond au sélecteur, jQuery capturera l'événement et exécutera le gestionnaire d'événements lié.

Pour faire simple, si nous voulons lier les gestionnaires d'événements de clic à toutes les balises

de la page, nous pouvons directement lier les gestionnaires d'événements de clic à chaque balise P séparément. Par exemple :

// Lier le gestionnaire de fonctions du gestionnaire d'événements de clic à tous les éléments P séparément

$("p").on("click", handler);

Nous pouvons également lier le mécanisme de délégation d'événements à n'importe quel élément ancêtre commun de ces balises P et utiliser le mécanisme de diffusion d'événements du DOM pour unifier le traitement de la délégation. Lorsque nous déclenchons l'événement click d'un élément, JS notifiera l'élément et son élément "parent", élément "grand-père"... jusqu'à ce que l'objet du document supérieur, si ces éléments ont des gestionnaires d'événements click qui leur sont liés, sera exécuté dans. séquence.

// Liez le gestionnaire de fonction du gestionnaire d'événements click à l'élément body Si l'événement click est déclenché par son élément P descendant, handler

sera exécuté.

$(document.body).on("click", "p", handler);

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

示例&说明

以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：

// 这里的选择器selector用于指定可以触发事件的元素

// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)

$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+

$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+

$("ancestor").on( "click", "selector" [, data ], handler );

请参考下面这段初始HTML代码：

   

CodePlayer

   

专注于编程开发技术分享

    http://www.365mini.com

Google

Nous lions les événements de clic à tous les éléments

dans

 :

// Lier les gestionnaires d'événements de clic à tous les éléments p du div

// Seuls n2 et n3 peuvent déclencher cet événement

$("div").on(" click", " p", function(){

// Ceci pointe ici vers l'élément p (Element) qui a déclenché l'événement de clic

alert( $(this).text() );

});

Exécutez le code (veuillez copier les autres codes sur la page de démonstration pour l'exécuter)

Si vous souhaitez lier tous les éléments

suit le code jQuery :

//Lier les gestionnaires d'événements de clic pour tous les éléments p (remarque : le paramètre de sélection est omis ici)

//n2, n3 et n5 peuvent déclencher cet événement

$("p").on("click", function(event){

// Ceci pointe ici vers l'élément p (Element) qui a déclenché l'événement de clic

alert ( $(this).text() );

});

De plus, nous pouvons également lier plusieurs événements en même temps et transmettre des données supplémentaires à la gestion des événements fonction. Nous Il peut être traité via le paramètre event (objet événement événement) transmis par jQuery pour la fonction de traitement d'événement :

var data = { id : 5, name : "Zhang San" };

/ / Lier mouseenter mouselaisser deux événements à n5 et transmettre des données supplémentaires

// Les données supplémentaires peuvent être de n'importe quel type

$("body").on( "mouseenter mouseleave", "#n5", data, function(event){

var $me = $(this);

var options = event.data; // C'est quoi est transmis dans Données supplémentaires

if( event.type == "mouseenter"){

$me.html( "Bonjour," + options.name + "!"); >

}else if(event.type == "mouseleave" ){

        $me.html( "Au revoir!");                                                                                                                                          🎜>

De plus, même si l'élément de qualification est nouveau ajouté après l'exécution de la fonction on(), l'événement de liaison est toujours valide pour celle-ci. En prenant le code HTML initial comme exemple, nous pouvons écrire le code jQuery suivant :

// Lier les gestionnaires d'événements de clic à tous les éléments p du div

// Seuls n2 et n3 peuvent être déclenché L'événement

$("div").on("click", "p", function(event){

alert( $(this).text() );

});

// Le n6 ajouté plus tard peut également déclencher l'événement de clic ci-dessus, car c'est aussi l'élément p dans le div

$("#n1" ).append( '

L'événement de clic lié ci-dessus prend également effet sur cet élément !

');

Le paramètre events prend également en charge des espaces de noms supplémentaires pour l'événement genres. Lors de la liaison de plusieurs gestionnaires d'événements du même type au même élément. À l'aide des espaces de noms, vous pouvez limiter la portée du déclenchement ou de la suppression lors du déclenchement d'événements et de la

suppression d'événements

.

on()

Paramètres de la fonction eventsMap est un objet qui peut spécifier plusieurs "fonctions de traitement des types d'événements" sous la forme de "valeur de propriété". L'exemple de code correspondant est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn