Heim >Web-Frontend >js-Tutorial >Was ist der Unterschied zwischen jquery on und bind?
Was ist der Unterschied zwischen jquery on und bind?
- coldplay.xixiOriginal
- 2020-11-25 16:29:092932Durchsuche
Der Unterschied zwischen jquery on und bind: 1. Die bind-Methode fügt jedem untergeordneten Element ein Ereignis hinzu, was sich auf die Leistung auswirkt, die on-Methode jedoch nicht. 2. Wenn bind Elemente dynamisch hinzufügt, kann sie Ereignisse nicht dynamisch binden die on-Methode Can.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 1.10.2. Diese Methode ist für alle Computermarken geeignet.
Der Unterschied zwischen jquery on und bind:
on()-Methode Sehen Sie sich den Quellcode an und Sie können feststellen, dass bind()与delegate()Die unterste Ebene mit der on()-Methode implementiert ist
Funktionssignatur: bind(type, [ data], fn), on( type,[selector],[data],fn) .
Zum Beispiel:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<button id="add">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$("#add").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
</script>Verwendung:
$('div p').bind('click',function(){
alert($(this).text());
})
$("div").on("click","p",function(){
alert($(this).text());
})Vergleich von Vor- und Nachteilen:
bind()-Methode:
Nachteile:
1. Wenn zu viele Unterelemente vorhanden sind, beeinträchtigt das Hinzufügen eines Ereignisses zu jedem Unterelement die Leistung.
2. Beim dynamischen Hinzufügen von Elementen können Ereignisse nicht dynamisch gebunden werden.
Vorteile: Das ist der Fall Bequem zu schreiben, wenn Ereignisse an ein einzelnes Element gebunden werden p-Element, kann aber ein Ereignis an das übergeordnete Element (oder auch das Vorgängerelement) binden. Wenn Sie auf ein beliebiges Element innerhalb des div klicken, wird das Ereignis Schicht für Schicht vom Ereignisziel nach oben sprudeln, bis es das Element für erreicht
3. Von Zeit zu Zeit kann es zu Problemen kommen. Wenn das Ereignisziel sehr tief im DOM-Baum liegt, wirkt sich die Suche nach Elementen, die mit dem Selektor übereinstimmen, auf die Leistung aus.
Zusammenfassung:1 Verwenden Sie bind() nicht, um iterativ zu binden
2. Wenn Sie den ID-Selektor verwenden, können Sie bind()
3 verwenden. Wenn Sie dynamisch hinzugefügte Elemente binden müssen, verwenden Sie „delegate()“ oder „on()“4 Bei den Methoden „delegate()“ und „on()“ sollte der DOM-Baum nicht zu tief sein. 5 Versuchen Sie, on() zu verwenden
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen jquery on und bind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!