Die Funktion des JQuery-Bindungsereignisses: Binden Sie gewöhnliche Ereignisse an DOM-Knoten. Wenn der DOM-Knoten ausgewählt ist, binden Sie das Ereignis daran, um Benutzern die Bereitstellung entsprechender Vorgänge zu erleichtern. jQuery bietet vier Ereignisbindungsmethoden, nämlich bind, live, Delegate und on, und die entsprechenden nicht abhörenden Funktionen sind unbind, die, undelegate und off.
Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.
Was ist eine Veranstaltung?
Die Reaktion der Seite auf verschiedene Besucher wird als Ereignis bezeichnet.
Event-Handler beziehen sich auf Methoden, die aufgerufen werden, wenn bestimmte Ereignisse in HTML auftreten.
Beispiel:
Bewegen Sie die Maus über das Element.
Optionsfeld auswählen
Element anklicken
Der Begriff „Trigger“ (oder „Auslösen“) wird häufig in Ereignissen verwendet wie: „Das Tastendruckereignis wird ausgelöst, wenn Sie eine Taste drücken“.
JQuery-Ereignisbindung
Normalerweise müssen wir Ereignisse verarbeiten, die sich auf bestimmte Knoten beziehen, z. B. das Klicken auf eine Schaltfläche. Aber hier gibt es ein Problem, wenn wir die spezifischen Knoten bekommen können, gibt es natürlich nichts zu sagen. Aber manchmal existiert der Knoten, den wir verarbeiten möchten, noch nicht, aber wir müssen seine Ereignisverarbeitung vordefinieren. Wir sagen zum Beispiel, dass in einem UL beim Klicken auf jeden LI eine Funktion ausgeführt werden muss. Der Inhalt selbst in UL kann sich jedoch ändern. Zuerst gab es nur zwei LIs, dann wurden daraus drei LIs. Die zusätzlichen LIs müssen auch in der Lage sein, auf Ereignisse zu reagieren.
Die oben genannte Situation ist eine häufige Anforderung. Wir können den Event-Bubbling-Mechanismus nutzen, um unser Ziel zu erreichen. Wir binden die Ereignisverarbeitung an UL, sodass sie beim Klicken auf LI zum übergeordneten UL hochspringt. Auf diese Weise können wir bei der Verarbeitung des Ereignisses bestimmen, um welchen Knoten es sich beim nächsten Schritt handelt.
Die Ereignisbindung ist ein Ereignis für das dom-Element. Es ist an das dom-Element gebunden und kann dasselbe Ereignis mehrmals auf einem Element überwachen. Funktion: Binden Sie gewöhnliche Ereignisse an DOM-Knoten. Wenn der DOM-Knoten ausgewählt ist, binden Sie das Ereignis daran, um Benutzern die Bereitstellung entsprechender Vorgänge zu erleichtern.
jQuery bietet vier Ereignisbindungsmethoden, nämlich binden, leben, delegieren, ein, und die entsprechenden nicht abhörenden Funktionen sind unbind, die, undelegate und off.
Der Unterschied zwischen diesen Methoden:
1. Die Funktion „bind()“ kann nur Ereignisse für vorhandene Elemente festlegen, aber „live()“, „on()“ und „delegate()“ unterstützen alle neue Ereigniseinstellungen für Elemente;
2. Die Funktion bind() war vor der Veröffentlichung von Version 1.7 relativ beliebt, und die alternative Funktion ist on(), die ebenfalls neu hinzugefügt wurde Version 1.7. kann auch als Ersatz für die Funktion live() verwendet werden. Die Funktion live() wurde in Version 1.9 gelöscht Die Funktion () ist hinsichtlich der Flexibilität und der CSS-Selektorunterstützung schneller. live() unterstützt jquery1.9; 4.2+; on() unterstützt jquery1. + Das ausgewählte Element ist an eine Abhörfunktion eines bestimmten Ereignistyps gebunden. Die Bedeutung der Parameter ist wie folgt:
Typ: Ereignistyp, z. B. Klicken, Ändern, Mouseover .;
Daten: Die an die Listening-Funktion übergebenen und über event.data erhaltenen Parameter kommen an. Optional;
Funktion: Sie können das Ereignisobjekt übergeben, das von jQuery gekapselt wird. Bei der Verwendung müssen Sie darauf achten Bindungscode: bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);
jQuery hat auch eine Abkürzung für Ereignisbindung, wie z. B. a.click(function(){});, a.change(function(){}); usw. Ihre Funktionen sind die gleichen wie bind, sie sind einfach Abkürzungen.
2. live(type, [data], fn)Die Parameter von live sind die gleichen wie bind. Schauen wir uns zuerst den Quellcode an:
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}Das können Sie sehen Die Live-Methode ist nicht an sich selbst (this) gebunden, sondern an this.context. Was ist dieser Kontext? Tatsächlich ist es der begrenzte Bereich des Elements. Es wird klar, nachdem Sie den folgenden Code gelesen haben:
$('#myol li').context; //document $('#myol li','#myol').context; //document $('#myol li',$('#myol')[0]); //ol
通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：
$('#myol li').live('click',getHtml);
3、delegate和on
live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。
参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：
$('#myol').delegate('li','click',getHtml);
看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：
on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。
我们先不传selector来看一个例子：
$('#myol li').on('click',getHtml);
可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。
终于看到on的真实作用了，那么，这么多的事件绑定方式，我们该如何进行选择呢?
其实这个问题是完全不必纠结的，因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。不过官方有一个推荐就是尽量使用on，因为其他 方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了，真正理 解它们的区别之后自然而然也就不是难事了。
【推荐学习：jQuery视频教程、web前端视频】
Das obige ist der detaillierte Inhalt vonWelche Funktion hat das JQuery-Bindungsereignis?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
