Explication détaillée de l'utilisation de la liaison d'événements jQuery (avec la différence entre bind et live)_jquery

Cet article analyse l'utilisation de la liaison d'événements jQuery avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

html :

<a href="#" onclick="addBtn()">addBtn</a>
<div id="mDiv">
  <button class="cBtn" onclick="alert(11111)">button1</button>
  <button class="cBtn">button2</button>
  <button class="cBtn">button3</button>
</div>

javascript :

<script type="text/javascript">
 function addBtn(){
   $('#mDiv').append(' <button class="cBtn">button5</button>')
 }
jQuery(function($){
//使用on代替live和delegate（live由于性能原因已经被废弃，被delegate代替）,新添加到mDiv的button依然会有绑定的事件
$('#mDiv').on('click','.cBtn',function(index, eleDom){
alert($(this).html())
 });
//使用on代替bind
$('.cBtn').on('click',function(){
alert($(this).html())
 })
//注意：
/*
1、无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）
2、要绑定自定义事件，如'open'，以上函数都可以使用，但激活需要使用trigger
总结：
建议使用on函数，绑定形式为$('.myClass').on({
click:function(eleDom){
...do someting...
},
dbclick:function(eleDom){
...do someting...
}
....
})
*/
}
</script>

Quelques notes :

bind(type,[data],fn) lie un gestionnaire d'événements à un événement spécifique pour chaque élément correspondant

Copier le code Le code est le suivant :

$("a").bind("click" ,function( )(alert("ok");});

live(type,[data],fn) attache un gestionnaire d'événements à tous les éléments correspondants, même si l'élément est ajouté ultérieurement

Copier le code Le code est le suivant :

$("a").live("cliquez" ,function( )(alert("ok");});

delegate(selector,[type],[data],fn) ajoute un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné) et spécifie la fonction à exécuter lorsque ces événements se produisent

Copier le code Le code est le suivant :

$("#container").delegate("a "," cliquez",function(){alert("ok");})

on(events,[selector],[data],fn) Fonction de gestionnaire d'événements qui lie un ou plusieurs événements à l'élément sélectionné

Différence :

.bind() est directement lié à l'élément

.live() est lié à l'élément par bouillonnement. Plus adapté aux types de liste, liés au nœud DOM du document. L'avantage de .bind() est qu'il prend en charge les données dynamiques.

.delegate() est un proxy d'événement plus précis pour une utilisation à petite échelle, et ses performances sont meilleures que .live()

.on() est la dernière version 1.9 qui intègre les trois méthodes précédentes du nouveau mécanisme de liaison d'événements

Supplément : La différence entre bind et live

Il existe trois façons de lier des événements dans jQuery : prenez l'événement click comme exemple

(1)target.click(function(){});

(2)target.bind("click",function(){});

(3)target.live("click",function(){});

La première méthode est facile à comprendre. En fait, elle est similaire à l'utilisation du JS ordinaire, sauf qu'il en manque une

Les deuxième et troisième méthodes sont toutes des événements de liaison, mais elles sont très différentes. Concentrons-nous sur leur explication ci-dessous, car elles sont beaucoup utilisées si vous utilisez le framework jQuery. Portez une attention particulière à la différence entre les deux.

【La différence entre bind et live】

La méthode live est en fait une variante de la méthode bind. Sa fonction de base est la même que la méthode bind. Elles lient toutes deux un événement à un élément, mais la méthode bind ne peut lier des événements qu'à l'élément actuellement existant. n'est pas valide pour les éléments nouvellement générés par JS et d'autres méthodes par la suite. La méthode live compense simplement ce défaut de la méthode bind. Elle peut également lier les événements correspondants aux éléments générés ultérieurement. Alors, comment cette fonctionnalité de la méthode live est-elle implémentée ? Discutons ci-dessous de son principe de mise en œuvre.

La raison pour laquelle la méthode live peut également lier les événements correspondants aux éléments générés ultérieurement est attribuée à la « délégation d'événements ». La soi-disant « délégation d'événements » signifie que les événements liés aux éléments ancêtres peuvent être liés aux éléments descendants pour être utilisés. . Le mécanisme de traitement de la méthode live consiste à lier l'événement au nœud racine de l'arborescence DOM au lieu de le lier directement à un élément. Donnez un exemple pour illustrer :

$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");

Lorsque nous cliquons sur ce nouvel élément, les étapes suivantes se produiront :

(1) Générez un événement de clic et transmettez-le au div pour traitement

(2) Puisqu'aucun événement n'est directement lié au div, l'événement remonte directement à l'arborescence DOM

(3) Les événements continuent de remonter jusqu'au nœud racine de l'arborescence DOM. Par défaut, l'événement click est lié au nœud racine

.

(4) Exécuter l'événement de clic lié par live

(5) Détectez si l'objet lié à l'événement existe et déterminez s'il est nécessaire de continuer à exécuter l'événement lié. La détection des objets événementiels se fait en détectant

Copier le code Le code est le suivant :

$(event.target).closest('.clickMe')

Cela peut-il être réalisé en trouvant des éléments correspondants.

(6) Grâce au test de (5), si l'objet lié à l'événement existe, l'événement lié sera exécuté.

Étant donné que la méthode live détectera si l'objet lié à l'événement existe uniquement lorsqu'un événement se produit, la méthode live peut implémenter des éléments ajoutés ultérieurement et une liaison d'événement. En revanche, bind déterminera si l'élément auquel l'événement est lié existe pendant la phase de liaison de l'événement et se liera uniquement à l'élément actuel, pas au nœud parent.

D'après l'analyse ci-dessus, les avantages du live sont vraiment grands, alors pourquoi devrions-nous utiliser la méthode bind ? La raison pour laquelle jQuery conserve la méthode bind au lieu d'utiliser la méthode live pour remplacer bind est que live ne peut pas remplacer complètement bind dans certains cas. Les principales différences sont les suivantes :

(1) La méthode bind peut lier n'importe quel événement JavaScript, tandis que la méthode live ne prend en charge que click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover et mouseup dans jQuery 1.3. 1, les événements focus et blue sont même pris en charge (mappés sur focusin et focusout, qui sont plus adaptés et peuvent bouillonner). De plus, dans jQuery 1.4.1, le survol (mappé sur "mouseenter mouseleave") est également pris en charge.

(2) live() ne prend pas entièrement en charge les éléments trouvés via la traversée du DOM. Au lieu de cela, vous devez toujours utiliser la méthode .live() directement après un sélecteur.

(3) Lorsqu'un élément utilise la méthode live pour lier des événements, si vous souhaitez empêcher la livraison ou la diffusion d'événements, vous devez renvoyer false dans la fonction. Le simple fait d'appeler stopPropagation() ne peut pas empêcher la livraison des événements. bouillonnant

Les lecteurs intéressés par plus de contenu lié aux événements et aux méthodes jQuery peuvent consulter le sujet spécial de ce site : "Résumé de l'utilisation et des techniques courantes des événements jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.