JavaScript-Ereignisdelegierung und jQuery-Ereignisbindung ein, aus und eins

1. Event-Delegation
Was ist Event-Delegation? Ein realistisches Verständnis ist: 100 Schüler erhalten an einem bestimmten Tag zur gleichen Zeit mittags eine Expresszustellung, aber es ist für diese 100 Schüler unmöglich, gleichzeitig am Schultor zu stehen und zu warten, also werden sie den Portier mit der Abholung beauftragen , und übergeben Sie es dann einzeln an die Schüler.
In jQuery verwenden wir die Ereignis-Bubbling-Funktion, um an untergeordnete Elemente gebundene Ereignisse zum übergeordneten Element (oder Vorfahrenelement) zu übertragen
und führen dann die entsprechende Verarbeitung durch.
Wenn eine Unternehmensanwendung die Berichtsverarbeitung durchführt, verfügt die Tabelle über 2000 Zeilen und jede Zeile verfügt über eine Schaltfläche zur Verarbeitung. Wenn Sie .bind() vor
verwenden, müssen Sie 2000 Ereignisse binden, genau wie 2000 Schüler, die am Schultor stehen und auf die Expresszustellung
warten, was ständig die Kreuzung blockiert und verschiedene Unfälle verursacht. Die gleiche Situation gilt für die Seite, was dazu führen kann, dass die Seite
extrem langsam oder direkt abnormal ist. Wenn außerdem 2000 Schaltflächen mit Ajax paginiert werden, kann die Methode .bind() keine Elemente dynamisch binden, die noch nicht
vorhanden sind. Wenn der Kurier beispielsweise die Identität eines neu versetzten Studenten nicht überprüfen kann, erhält er den Kurier möglicherweise nicht.
//HTML-Teil

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

//Die Verwendung von .bind() verfügt nicht über eine dynamische Bindungsfunktion, nur durch Klicken auf die ursprüngliche Schaltfläche kann

//Verwenden Sie .live() mit dynamischer Bindungsfunktion, wird von jQuery1.3 verwendet, nach jQuery1.7 aufgegeben und von jQuery1.9 gelöscht

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

.live() Prinzip ist Konvertieren Sie das Click-Event Bind in das Vorgängerelement $(document), und Sie müssen $(document) nur einmal binden, statt 2000 Mal. Anschließend können Sie das Klickereignis der nachfolgenden dynamisch geladenen Schaltfläche verarbeiten. Beim Akzeptieren eines beliebigen

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

-Ereignisses überprüft das $(document)-Objekt den Ereignistyp (event.type) und das Ereignisziel (event.target). Wenn das click

-Ereignis .button ist, wird die Verarbeitung an es delegiert Programm durchgeführt wird. Die Methode .live() wurde gelöscht und kann nicht verwendet werden.
Wenn Sie es testen und verwenden möchten, müssen Sie ein abwärtskompatibles Plug-In einführen.



Im obigen Beispiel haben wir .clone() zum Klonen verwendet. Wenn wir das Ereignisverhalten kopieren möchten, müssen wir tatsächlich nur true übergeben: .clone(true). Damit können auch ähnliche Funktionen wie bei der Event-Delegation erreicht werden, die Prinzipien sind jedoch völlig unterschiedlich.

Eine davon ist das Kopieren des Ereignisverhaltens und die andere die Ereignisdelegation. Bei nicht klonenden Vorgängen können solche Funktionen nur die Ereignisdelegierung verwenden.

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

Wenn wir die Ereignisdelegierung stoppen müssen, können wir sie mit .die() abbrechen.

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

Hinweis: .delegate() muss das übergeordnete Element angeben, dann ist der erste Parameter das aktuelle Element, der zweite Parameter ist die Ereignismethode
und der dritte Parameter ist die Ausführungsfunktion. Wie bei der .bind()-Methode können zusätzliche Parameter übergeben werden. Die Methoden .undelegate() und .unbind()

können alle Ereignisse direkt löschen, wie zum Beispiel: .undelegate('click'). Sie können auch Namespace-Ereignisse löschen,

$('.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');
});

zum Beispiel: .undelegate('click.abc').

Hinweis: Die Methoden .live(), .delegate() und .bind() sind beide Ereignisbindungen, daher ist der Unterschied offensichtlich. In Bezug auf die Verwendung folgt
zwei Regeln: 1. Es gibt viele Elemente in das DOM Beim Binden desselben Ereignisses; 2. Wenn im DOM noch kein
-Elementbindungsereignis generiert werden muss, empfehlen wir die Verwendung der Ereignisdelegat-Bindungsmethode, andernfalls wird empfohlen, die normale Bindung von .bind( ).



2. an, aus und eins
Derzeit gibt es drei Gruppen mit jeweils sechs Methoden zum Binden und Entbinden von Ereignissen. Da die Koexistenz dieser drei Gruppen zu Verwirrung führen kann,

Aus diesem Grund wurden in jQuery 1.7 und später die Methoden .on() und .off() eingeführt, um die ersten drei Gruppen vollständig aufzugeben.

/


oder

/替代.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;
});

3. Beispiel für eine Ereignisdelegation:

$('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 仅触发一次！');
});

HTML-Code:

jQuery-Code:

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

Klicken Sie auf [Schaltfläche 1] und es wird Folgendes angezeigt: Ereignistyp: Klicken, Wert: Schaltfläche 1.

Hinweis: e.type gibt den Ereignistyp des Objekts zurück, z. B. click, mousedown; e.target gibt das jQuery-Objekt zurück, das das Ereignis ausgelöst hat.

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

4. Empfehlen Sie ein Javascript-Online-Testtool, das die Auswahl der JQuery-Bibliothek unterstützt und HTML-, CSS- und JS-Codes testen kann

http://jsfiddle.net

Das Obige ist der Inhalt der Javascript-Ereignisdelegierung und der jQuery-Ereignisbindung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).