Explication détaillée de l'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 Object. Chaque attribut 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ée (gestionnaire de paramètres).

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 actuel 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 actuel).

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, la fonction de gestionnaire d'événements de l'événement « submit » (soumission de formulaire) renvoie false, ce qui peut 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 :

// 为所有P元素分别绑定click事件处理函数handler
$("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 bouillonnement 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.

// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(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代码：

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

我们为

中的所有

元素绑定点击事件：

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

如果要绑定所有的

元素，你可以编写如下jQuery代码：

//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
//n2、n3、n5均可触发该事件
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：

var data = { id: 5, name: "张三" };
// 为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
// 附加数据可以是任意类型
$("body").on("mouseenter mouseleave", "#n5", data, function(event){
    var $me = $(this);
    var options = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好，" + options.name + "!");      
    }else if(event.type == "mouseleave" ){
        $me.html( "再见!");       
    }           
});

此外，即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(event){
    alert( $(this).text() );
});
// 后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append(&#39;<p id="n6">上述绑定的click事件对此元素也生效!</p>&#39;);

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.on( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", clickHandler );
var $n2 = $("#n2");
// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")
// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")
// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" ); // 移除A

on()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：

var data = { id: 5, name: "张三" };
var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },
    
    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);

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 de ce site Web

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