Zusammenfassung des Lernens der jQuery-Ereignisbindungsmethode (empfohlen)
- 高洛峰Original
- 2016-12-06 11:18:481356Durchsuche
Für Ereignisbindungsmethoden in jQuery gibt es hauptsächlich on(), bind(), delegate(), live() usw. Ich habe es schon einmal verwendet und weiß, dass es mehrere Methoden gibt, aber ich kenne den Unterschied zwischen diesen Ereignisbindungsmethoden nicht. Die am häufigsten verwendete Methode ist die On-Methode, und ich habe vor, sie heute zu klären.
Bindungsmethode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bind事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
alert($(this).text());
});
</script>
</body>
</html>
Nachteile dieser Art der Ereignisbindung:
Wenn das p-Element auf der Seite ist ist etwas Besonderes Wenn zu viele vorhanden sind, führt dies zu einer großen Anzahl von Ereignishandlern auf der Seite, was zu einer schlechten Seitenleistung führt.
Für dynamisch generierte neue Elemente gibt es kein Klickereignis.
Diese beiden Mängel können wir durch die unten vorgestellte Delegatenmethode beheben.
Delegate-Methode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
alert($(this).text());
});
</script>
</body>
</html>
Im obigen Beispiel verwenden wir das Prinzip der Ereignisdelegierung und verwenden Delegate, um Ereignisse zu binden.
bindet Ereignisse nicht direkt an das p-Element, sondern bindet Ereignisse an sein übergeordnetes Element (oder Vorgängerelement). Wenn Sie auf ein beliebiges Element innerhalb des div klicken, wird das Ereignis Schicht für Schicht vom Ereignis ausgelöst target (Zielelement) sprudelt nach oben, bis es das Element erreicht, an das Sie das Ereignis gebunden haben, wie zum Beispiel das div-Element in diesem Beispiel. Wenn während des Bubbling-Prozesses das aktuelle Ziel des Ereignisses mit dem Selektor übereinstimmt, wird der Code ausgeführt.
Dies löst die beiden oben genannten Probleme bei der Verwendung der bind()-Methode. Es ist nicht erforderlich, Ereignisse einzeln an p-Elemente zu binden, wodurch die Anzahl der Ereignishandler auf der Seite effektiv reduziert wird Dynamisch hinzugefügt. Das p-Element bindet Ereignisse.
Diese Methode weist auch einen Fehler auf: Die Bindung ist auf diese Weise einfacher, es kann jedoch auch beim Aufruf zu Problemen kommen. Wenn sich das Ereignisziel sehr tief im DOM-Baum befindet, wirkt sich das Aufsteigen Schicht für Schicht auf die Suche nach Elementen, die mit dem Selektor übereinstimmen, auf die Leistung aus.
Quellcode-Implementierung binden und delegieren
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
Wie aus dem Quellcode ersichtlich ist, sind sowohl bind() als auch delegate() Tatsächlich wird durch die on()-Methode nur die Tatsache erreicht, dass die Parameter unterschiedlich sind.
on-Methode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
alert($(this).text());
});
</script>
</body>
</html>
Ereignis entfernen
für bind(), delegate() und on() Bindung Methode, die Methoden zum Entfernen von Ereignissen sind:
$( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );
Zusammenfassung
•Wenn viele Elemente mit dem Selektor übereinstimmen, tun Sie dies nicht Verwenden Sie bind() für die iterative Bindung;
•Bei Verwendung des ID-Selektors können Sie bind() verwenden.
•Wenn Sie dynamisch hinzugefügte Elemente binden müssen, verwenden Sie delegate() oder on();
•Verwenden Sie die Methoden „delegate()“ und „on()“, und der DOM-Baum sollte nicht zu tief sein.
•Verwenden Sie „on()“ so oft wie möglich.