Ausführliche Erläuterung der Schritte zum dynamischen Hinzufügen von Klickereignissen in JQuery

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum dynamischen Hinzufügen von Klickereignissen mit jquery. Was sind die Vorsichtsmaßnahmen für das dynamische Hinzufügen von Klickereignissen mit jquery? Hier sind praktische Fälle . Werfen wir einen Blick darauf.

Wenn wir versuchen, einige Ereignisse an DOM-Elemente zu binden, verwenden wir normalerweise die folgenden vier Methoden
bind(),on(),live(),delegate()Die ersten beiden sollten eher als Methode verwendet werden. Das Folgende ist mein Verständnis der vier Methoden:

• Bind(): .bind() ist die direkteste Bindungsmethode, die die angegebene -Funktion bindet Ereignisse werden in das DOM übertragen. Diese Methode löst das Browserkompatibilitätsproblem bei der Ereignisbehandlung sehr gut, aber diese Methode weist immer noch einige Probleme auf. Code:

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

Die beiden oben genannten Codezeilen erfüllen die gleiche Aufgabe, nämlich das Hinzufügen des Ereignishandlers zu allen passenden a-Elementen. Hier gibt es einige Effizienzprobleme. Einerseits fügen wir allen Tags Klickereignisse hinzu, andererseits ist es auch eine Verschwendung bei der Ausführung (Wir können sie mit ihren übergeordneten Elementen verknüpfen, sie durch Blasen unterscheiden und dann das Ereignishandle ausführen).
Vorteile

• Diese Methode bietet eine Kompatibilitätslösung für die Ereignisbehandlung zwischen verschiedenen Browsern

• Es ist sehr praktisch um Ereignisse an Elemente zu binden

• .click(), .hover()... Diese sehr praktischen Zeitbindungen sind alle bind Eine vereinfachte Verarbeitungsmethode

• eignet sich sehr gut für Elemente, die anhand der ID ausgewählt werden. Es kann nicht nur schnell eingebunden werden (die Seite kann nur eine ID haben), sondern der Handler kann auch sofort ausgeführt werden, wenn das Ereignis auftritt (entspricht dem späteren Live). Delegate) Implementierungsmethode

Nachteile

• Es werden Ereignisse an alle gefilterten Elemente gebunden

• Es werden keine Ereignisse an die Elemente gebunden, die nach Abschluss der Ausführung dynamisch hinzugefügt werden

• Wenn viele gefilterte Elemente vorhanden sind, können Effizienzprobleme auftreten

• Bind() kann nur ausgeführt werden, wenn die Seite geladen ist, daher kann es zu Effizienzproblemen kommen. Die Methode

.live()
.live() verwendet das Konzept der Ereignisdelegation, um die Ereignisbindung zu handhaben. Es ist dasselbe wie die Verwendung von .bind() zum Binden von Ereignissen. Die Methode .live() bindet das entsprechende Ereignis an das Stammelement des von Ihnen ausgewählten Elements, nämlich das Element document. Dann können alle auftretenden Ereignisse von demselben Handler verarbeitet werden. Der Verarbeitungsmechanismus sieht folgendermaßen aus: Sobald das Ereignis in das Dokument gelangt, sucht jQuery nach den Selektor-/Ereignismetadaten und entscheidet dann, welcher Handler aufgerufen werden soll. Es scheint jedoch in der neuesten JQuery-Version gelöscht worden zu sein.

$( "#members li a" ).live( "click", function( e ) {} );

Vorteile:

• Hier gibt es nur eine Ereignisbindung, die an das Dokument gebunden ist, anstelle von .bind() Alle Elemente werden einzeln gebunden

• Diese dynamisch hinzugefügten Elemente können weiterhin Ereignisse auslösen, die zuvor gebunden wurden, da die tatsächliche Bindung des Ereignisses im Dokument erfolgt

• Sie können die erforderlichen Ereignisse binden, bevor das Dokument fertig ist

Nachteile:

• Es ist veraltet als von 1,7, also sollten Sie auch damit beginnen, es auslaufen zu lassen.

• Verkettung wird nicht korrekt unterstützt

• Bei Verwendung von event.stopPropagation() ist es nutzlos, da es das Dokument erreichen muss

• Da alle Selektoren/Ereignisse an Dokumente gebunden sind,
  wenn wir also die Methode matchSelector verwenden, um auszuwählen, welches Ereignis aufgerufen wird, wird es sehr langsam sein

• Wenn das Element, in dem das Ereignis auftritt, sehr tief in Ihrem DOM-Baum liegt, treten Leistungsprobleme auf

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

$( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

• 你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了

• jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

• 可以用在动态添加的元素上

缺点：

• 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 
// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

• 提供了一种统一绑定事件的方法

• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题

• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

• 我们可以用.on()来代替上述的3种方法

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS选择器使用方法总结

webkit-font-smoothing字体抗锯齿渲染使用案例详解

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum dynamischen Hinzufügen von Klickereignissen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!