Délégation d'événements JavaScript et liaison d'événements jQuery activée, désactivée et une

1. La délégation événementielle
Qu'est-ce que la délégation événementielle ? Une compréhension réaliste est la suivante : 100 étudiants reçoivent une livraison express à midi un certain jour à la même heure, mais il est impossible pour ces 100 étudiants de rester à la porte de l'école en attendant en même temps, ils confieront donc au portier le soin de le récupérer. , puis remettez-le aux étudiants un par un .
Dans jQuery, nous utilisons la fonctionnalité de bouillonnement d'événements pour permettre aux événements liés aux éléments enfants de remonter jusqu'à l'élément parent (ou l'élément ancêtre)
, puis d'effectuer le traitement associé.
Si une application de niveau entreprise signale le traitement, le tableau comporte 2 000 lignes et chaque ligne comporte un bouton pour le traitement. Si vous utilisez .bind() avant
, alors vous devez lier 2000 événements, tout comme 2000 élèves debout à la porte de l'école attendant
livraison express, ce qui bloquera constamment l'intersection et provoquera divers accidents. La même situation s'applique à la page, ce qui peut rendre la page
extrêmement lente ou directement anormale. De plus, si 2000 boutons sont paginés en ajax, la méthode .bind() ne peut pas lier dynamiquement des éléments qui n'existent pas encore
. Par exemple, si le coursier ne peut pas vérifier l'identité d'un étudiant nouvellement transféré, il se peut qu'il ne reçoive pas le coursier.
//Partie HTML

<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>

//L'utilisation de .bind() n'a pas de fonction de liaison dynamique, il suffit de cliquer sur le bouton d'origine pour générer

$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});

//Utiliser .live() avec la fonction de liaison dynamique, utilisée par jQuery1.3, abandonnée après jQuery1.7, supprimée par jQuery1.9

$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});

.live() le principe est de convertissez l'événement de clic Bind en élément ancêtre $(document), et vous n'avez besoin de lier $(document) qu'une seule fois, au lieu de 2 000 fois. Ensuite, vous pouvez gérer l'événement de clic du bouton chargé dynamiquement suivant. Lors de l'acceptation d'un événement

, l'objet $(document) vérifiera le type d'événement (event.type) et la cible de l'événement (event.target). Si l'événement click
est .button, alors le traitement qui lui est délégué. sera exécuté le programme. La méthode .live() a été supprimée et ne peut pas être utilisée.
Si vous souhaitez le tester et l'utiliser, vous devez introduire un plug-in rétrocompatible.

Dans l'exemple ci-dessus, nous avons utilisé .clone() pour cloner. En fait, si nous voulons copier le comportement de l'événement, il suffit de passer true : .clone(true). Cela peut également réaliser des fonctions similaires à la délégation d'événements, mais les principes sont complètement différents.

//.live()无法使用链接连缀调用，因为参数的特性导致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});

L'un consiste à copier le comportement de l'événement et l'autre est la délégation d'événement. Dans le cadre d'opérations sans clonage, ces fonctions ne peuvent utiliser que la délégation d'événements.

Lorsque nous devons arrêter la délégation d'événements, nous pouvons utiliser .die() pour l'annuler.

$('.button').live('click', function () {
$(&#39;<input type="button" value="复制的" class="button" />&#39;).appendTo(&#39;#box&#39;);
});

Remarque : .delegate() doit spécifier l'élément parent, puis le premier paramètre est l'élément actuel, le deuxième paramètre est la méthode événementielle

et le troisième paramètre est la fonction d’exécution. Comme la méthode .bind(), des paramètres supplémentaires peuvent être transmis. Les méthodes .undelegate() et .unbind()

$('.button').die('click');
由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、
又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持连缀调用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});

peuvent supprimer directement tous les événements, tels que : .undelegate('click'). Vous pouvez également supprimer des événements d'espace de noms,

par exemple : .undelegate('click.abc').
Remarque : les méthodes .live(), .delegate() et .bind() sont toutes deux des liaisons d'événements, la différence est donc évidente. En termes d'utilisation,
suit deux règles : 1. Il y a de nombreux éléments dans. le DOM Lors de la liaison du même événement ; 2. Lorsqu'il n'y a pas encore d'événement de liaison d'élément
à générer dans le DOM ; nous vous recommandons d'utiliser la méthode de liaison de délégué d'événement, sinon il est recommandé d'utiliser la liaison ordinaire de .bind( ).



2. on, off et one

Actuellement, il existe trois groupes de six méthodes pour lier et dissocier des événements. Puisque la coexistence de ces trois groupes peut créer une certaine confusion,

Pour cette raison, jQuery 1.7 et versions ultérieures ont introduit les méthodes .on() et .off() pour abandonner complètement les trois premiers groupes.
/


ou

/替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});

$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、
命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()
来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触
发一次的事件。
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
//类似于.delegate()只触发一次
$('#box).one('click', 'click', function () {
alert('one 仅触发一次！');
});

3. Exemple de délégation d'événement :

code html :

Code jQuery :

<div>
<input id="a" type="button" value="按钮1">
<input id="a" type="button" value="按钮2">
</div>

Cliquez sur [Bouton 1], et il apparaîtra : Type d'événement : clic, Valeur : Bouton 1.

$('div').click(function(e){
alert('事件类型：'+ e.type + '，Value：' + $(e.target).val());
})

Remarque : e.type renvoie le type d'événement de l'objet, tel que clic, mousedown ; e.target renvoie l'objet jQuery qui a déclenché l'événement.

4. Recommander un outil de test en ligne javascript qui prend en charge la sélection de la bibliothèque JQuery et peut tester les codes html, css et js

http://jsfiddle.net

Ce qui précède est le contenu de la délégation d'événements javascript et de la liaison d'événements jQuery on, off et one. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !