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 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 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, exécutez le gestionnaire

$(document.body on("). clic", "p", gestionnaire);

Dans l'exemple ici, le mécanisme de délégation d'événement est que nous ne lions pas directement le gestionnaire d'événement click à chaque élément P, mais le déléguons à l'un de ses éléments ancêtres publics (document.body dans l'exemple ici), " tell "lui : Si une notification de déclenchement d'événement de clic est reçue et que l'événement de clic est déclenché par l'un de nos éléments P, exécutez le gestionnaire d'événements lié par le délégué sur l'élément ancêtre.

Remarque : certains événements tels que « focus » et « flou » ne prennent pas en charge le bouillonnement et le mécanisme de délégation d'événements sera invalide. Cependant, ils ont généralement aussi des événements correspondants qui soutiennent le bouillonnement. Par exemple, « focusin » correspond à « focus » et « focusout » correspond à « flou ». De plus, nous pouvons également utiliser la méthode event.stopPropagation() pour empêcher l'événement actuellement déclenché de bouillonner.

Exemples et explications

Prenons l'événement click ("click") comme exemple. Ce qui suit est l'utilisation générale des fonctions d'événement dans jQuery (certaines fonctions ont également d'autres formes d'utilisation, qui ne sont pas encore abordés ici :

// 这里的选择器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 );

Veuillez vous référer au code HTML initial suivant :

<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>

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

div> :

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

Si vous souhaitez lier tous les éléments

, vous pouvez écrire le code jQuery suivant :

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

De plus, nous pouvons également lier plusieurs événements en même temps, et Pour transmettre des données supplémentaires à la fonction de traitement d'événements, nous pouvons les traiter via le paramètre event (Event event object) transmis par jQuery pour la fonction de traitement d'événements :

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;);

Le Les événements de paramètre prennent également en charge l’ajout de données supplémentaires à l’espace de noms du type d’événement. 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.

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!