Detaillierte Erläuterung der Verwendung der jQuery-Ereignisbindung (mit dem Unterschied zwischen bind und live)_jquery

In diesem Artikel wird die Verwendung der jQuery-Ereignisbindung anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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>

Einige Anmerkungen:

bind(type,[data],fn) bindet einen Event-Handler an ein bestimmtes Ereignis für jedes übereinstimmende Element

Code kopieren Der Code lautet wie folgt:

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

live(type,[data],fn) fügt allen übereinstimmenden Elementen einen Event-Handler hinzu, auch wenn das Element später hinzugefügt wird

Code kopieren Der Code lautet wie folgt:

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

delegate(selector,[type],[data],fn) fügt einen oder mehrere Event-Handler zum angegebenen Element (einem untergeordneten Element des ausgewählten Elements) hinzu und gibt die Funktion an, die ausgeführt werden soll, wenn diese Ereignisse auftreten

Code kopieren Der Code lautet wie folgt:

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

on(events,[selector],[data],fn) Event-Handler-Funktion, die ein oder mehrere Ereignisse an das ausgewählte Element bindet

Unterschied:

.bind() ist direkt an das Element

gebunden

.live() wird durch Sprudeln an das Element gebunden. Eher geeignet für Listentypen, die an den DOM-Knoten des Dokuments gebunden sind. Der Vorteil von .bind() besteht darin, dass es dynamische Daten unterstützt.

.delegate() ist ein genauerer Ereignis-Proxy für den Einsatz in kleinem Maßstab und seine Leistung ist besser als .live()

.on() ist die neueste Version 1.9, die die vorherigen drei Methoden des neuen Ereignisbindungsmechanismus

integriert

Zusätzlich: Der Unterschied zwischen binden und leben

Es gibt drei Möglichkeiten, Ereignisse in jQuery zu binden: Nehmen Sie das Klickereignis als Beispiel

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

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

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

Die erste Methode ist leicht zu verstehen. Tatsächlich ähnelt sie der Verwendung von gewöhnlichem JS, außer dass eine Methode fehlt

Bei der zweiten und dritten Methode handelt es sich allesamt um Bindungsereignisse, aber sie sind im Folgenden sehr unterschiedlich, da sie häufig verwendet werden, wenn Sie das jQuery-Framework verwenden. Achten Sie besonders auf den Unterschied zwischen ihnen.

【Der Unterschied zwischen binden und leben】

Die Live-Methode ist eigentlich eine Variante der Bind-Methode. Sie binden beide ein Ereignis an ein Element, aber die Bind-Methode kann Ereignisse nur an das aktuell vorhandene Element binden ist für von JS und anderen Methoden neu generierte Elemente ungültig. Die Live-Methode gleicht diesen Fehler der Bindemethode aus. Sie kann auch entsprechende Ereignisse an die später generierten Elemente binden. Wie wird diese Funktion der Live-Methode implementiert? Lassen Sie uns unten das Implementierungsprinzip besprechen.

Der Grund, warum die Live-Methode auch entsprechende Ereignisse an später generierte Elemente binden kann, ist die sogenannte „Ereignisdelegation“, die bedeutet, dass an Vorgängerelemente gebundene Ereignisse zur Verwendung gebunden werden können . Der Verarbeitungsmechanismus der Live-Methode besteht darin, das Ereignis an den Wurzelknoten des DOM-Baums zu binden, anstatt es direkt an ein Element zu binden. Geben Sie ein Beispiel zur Veranschaulichung:

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

Wenn wir auf dieses neue Element klicken, werden die folgenden Schritte ausgeführt:

(1) Generieren Sie ein Klickereignis und übergeben Sie es zur Verarbeitung an das Div

(2) Da kein Ereignis direkt an das Div gebunden ist, wird das Ereignis direkt an den DOM-Baum weitergeleitet

(3) Ereignisse sprudeln weiterhin zum Wurzelknoten des DOM-Baums. Standardmäßig ist das Klickereignis an den Wurzelknoten

gebunden

(4) Führen Sie das an Live gebundene Klickereignis aus

(5) Ermitteln Sie, ob das an das Ereignis gebundene Objekt vorhanden ist, und bestimmen Sie, ob die Ausführung des gebundenen Ereignisses fortgesetzt werden muss. Das Erkennen von Ereignisobjekten erfolgt durch Erkennen von

Code kopieren Der Code lautet wie folgt:

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

Kann dies erreicht werden, indem passende Elemente gefunden werden?

(6) Wenn durch den Test von (5) das an das Ereignis gebundene Objekt vorhanden ist, wird das gebundene Ereignis ausgeführt.

Da die Live-Methode nur dann erkennt, ob das an das Ereignis gebundene Objekt vorhanden ist, wenn ein Ereignis auftritt, kann die Live-Methode später hinzugefügte Elemente und Ereignisbindungen implementieren. Im Gegensatz dazu bestimmt bind, ob das Element, an das das Ereignis gebunden ist, während der Bindungsphase des Ereignisses vorhanden ist, und bindet nur an das aktuelle Element, nicht an den übergeordneten Knoten.

Laut der obigen Analyse sind die Vorteile von Live wirklich groß. Warum sollten wir also die Bindungsmethode verwenden? Der Grund, warum jQuery die Bindungsmethode beibehält, anstatt die Live-Methode zum Ersetzen von Bindung zu verwenden, liegt darin, dass Live in einigen Fällen die Bindung nicht vollständig ersetzen kann. Die Hauptunterschiede sind wie folgt:

(1) Die Bind-Methode kann jedes JavaScript-Ereignis binden, während die Live-Methode in jQuery 1.3 nur Click, Dblclick, Keydown, Keypress, Keyup, Mousemove, Mouseout, Mouseover und Mouseup unterstützt. 1, Focus- und Blue-Events werden sogar unterstützt (zugeordnet zu Focusin und Focusout, die besser geeignet sind und zu Blasenbildung führen können). Darüber hinaus wird in jQuery 1.4.1 auch Hover (zugeordnet zu „mouseenter mouseleave“) unterstützt.

(2) live() unterstützt Elemente, die durch DOM-Traversal gefunden werden, nicht vollständig. Stattdessen sollten Sie die Methode .live() immer direkt nach einem Selektor verwenden.

(3) Wenn ein Element die Live-Methode zum Binden von Ereignissen verwendet und Sie die Zustellung oder das Sprudeln von Ereignissen verhindern möchten, müssen Sie in der Funktion false zurückgeben, um die Zustellung von Ereignissen nicht zu verhindern sprudelnd

Leser, die an weiteren Inhalten zu jQuery-Ereignissen und -Methoden interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung der allgemeinen Verwendung und Techniken von jQuery-Ereignissen“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.