Was bedeutet ein JQuery-Bindungsereignis?

In jquery bedeutet das Binden von Ereignissen das Binden gewöhnlicher Zeitereignisse an DOM-Knoten. Wenn der DOM-Knoten ausgewählt ist, wird das Ereignis daran gebunden, um Benutzern die Bereitstellung entsprechender Vorgänge zu erleichtern. Es gibt vier Methoden: Live, Delegate und on zum Binden von Ereignissen wurde entfernt. Es wird empfohlen, on zum Binden von Ereignissen zu verwenden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JQuery-Version 3.6.0, Dell G3-Computer.

Was bedeutet JQuery-Bindungsereignis?

Ereignisbindung: Binden Sie gewöhnliche Ereignisse an DOM-Knoten, binden Sie das Ereignis daran, um Benutzern die Bereitstellung entsprechender Vorgänge zu erleichtern.

Zum Beispiel: Binden Sie das Click-Maus-Ereignis an die Schaltfläche, binden Sie das Focusin-Focus-Ereignis an die Eingabe usw. Spezifische Beispiele: Schreiben Sie häufig $('.bn1').click(function(){. ..}) ist eine gewöhnliche Ereignisbindung.

Erweiterung:

Ereignisdelegation: bezieht sich auf die Ergänzung und Erweiterung der Ereignisbindung auf der Grundlage der Ereignisbindung. Konkret bedeutet dies: Übergabe der Ereignisbindung an den DOM-Knoten des übergeordneten Elements (Vorfahrenknoten). Einheitliche Verwaltung aller untergeordneten Elemente.

Wenn Sie auf Unterelemente stoßen, die an viele Ereignisse gebunden werden müssen, können Sie auf diese Weise viel Ärger vermeiden, die Arbeit des Bindens von Ereignissen wiederholen und eine Zugriffseffizienz gewährleisten. Spezifischer Code $('.div').on('click','.bn2',function(){...})

jquery bietet vier Möglichkeiten, Ereignisse zu binden. binden, leben, delegieren, weiter. Unter anderem wurde Live entfernt und die unteren Ebenen von Bind und Delegate wurden implementiert.

jquery empfiehlt die Verwendung von on zum Binden von Ereignissen. Zusätzlich zu nativen Ereignissen unterstützt JQuery das Binden benutzerdefinierter Ereignisse.

Die am häufigsten verwendete Methode:
Bind-Funktion

🏜 /code>: Der Bindungsfunktionsparameter hier ist ein in geschweifte Klammern eingeschlossenes Wörterbuch, der Schlüsselwert ist der Ereignisname in doppelten Anführungszeichen, der Wertwert ist der Funktionsinhalt, muss sicher sein Code> Achten Sie auf das Format. <blockquote><p></p></blockquote>on-Funktion<p></p> <p></p>Zwei formale Parameter<p></p> <p><strong>$("selector").on("event name", anonyme Funktion)</strong></p> <blockquote>Beispiel: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//这里的button为元素选择器，click为鼠标点击事件$(&quot;button&quot;).click(function(){ //函数内容 })</pre><div class="contentsignin">Nach dem Login kopieren</div></div> </blockquote> <code>Hinweis: Die On-Funktion mit zwei formalen Parametern ähnelt der Bind-Funktion, das Format ist jedoch unterschiedlich und kann zusammen gespeichert werden. <p></p> <p></p>Drei formale Parameter<p></p> <blockquote>Enthält drei Parameter, die sich sehr gut für übergeordnete Knoten mit mehreren untergeordneten Knoten eignen. Es kann Ereignisse untergeordneter Knoten einheitlich steuern<p><code>注：这里的bind函数参数为一个大括号包裹的字典，key值为双引号下的事件名称，value值为函数内容，一定一定一定要注意格式。

on函数

两个形参

$(“选择器”).on(“事件名称”,匿名函数)

举例：

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

注：含有两个形参的on函数，和bind函数使用方法类似，只是格式不同，可以一起记忆。

三个形参

含有三个参数，非常适合含有多个孩子的父节点使用，可以统一控制孩子节点事件

$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)

举例:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

注:一定要注意含有三个参数的使用场景，并且注意this关键字的使用

delegate函数

delegate函数有三个形参，和on函数有着相似之处，区别是参数位置不同。

$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

注：一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。

总结

• 纵观上面的绑定事件，可以发现，不同的绑定事件只是换了一个关键字以及相对应的参数列表；
• 它们共有的都是$("选择器").函数名(参数列表)
$("Parent node selector").on("Event Name" , „untergeordneter Knoten, also das zu bindende Element“, anonyme Funktion)

Beispiel:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

Hinweis: Achten Sie unbedingt auf das Verwendungsszenario mit drei Parametern und Beachten Sie die Verwendung von SchlüsselwörternDelegate-Funktion verfügt über drei formale Parameter, die der On-Funktion ähneln. Der Unterschied besteht darin, dass die Parameterpositionen unterschiedlich sind. Hinweis: Es ist zu beachten, dass sich die Reihenfolge der Parameter hier von der der On-Funktion unterscheidet. ZusammenfassungWenn wir uns die oben genannten Bindungsereignisse ansehen, können wir feststellen, dass verschiedene Bindungsereignisse lediglich ein Schlüsselwort und die entsprechende Parameterliste ändern. Alles, was sie gemeinsam haben, ist $( „Selektor“); . Funktionsname (Parameterliste); Der Inhalt der Parameterliste ist nichts anderes als der Ereignisname, die anonyme Funktion oder der untergeordnete Knotenselektor. Die anonyme Funktion ist hier tatsächlich die Adresse des Codekörpers entspricht einer Adresse als Parameter. Um die Codemenge zu reduzieren, wird die Funktionsadresse direkt durch eine anonyme Funktion ersetzt. ... "). binden ({"Ereignisname": anonyme Funktion})on-Funktion$("Selektor").on("Ereignisname", anonyme Funktion)$("Elternknoten-Selektor" ).on("Ereignisname", "Untergeordneter Knoten, d. h. das zu bindende Element", anonyme Funktion)

	Delegate-Funktion
$("Parent Node Selector").delegate("Child Node, also das zu bindende Element", "Event Name", anonyme Funktion)	//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){ //函数内容 }})

delegate-Funktion
$("Übergeordneter Knotenselektor").delegate("Untergeordneter Knoten, das ist das zu bindende Element, der „Ereignisname“, die anonyme Funktion

Das obige ist der detaillierte Inhalt vonWas bedeutet ein JQuery-Bindungsereignis?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!