jQuery entfernt den Live-Listener

Bei der Entwicklung von Webanwendungen wird häufig ein benutzerdefinierter Event-Dispatcher verwendet und Listener hinzugefügt. jQuery ist eine sehr beliebte JavaScript-Bibliothek mit einem sehr leistungsstarken Ereignissystem, das es Entwicklern ermöglicht, Listener zu DOM-Elementen hinzuzufügen und von DOM-Elementen ausgelöste Ereignisse zu verarbeiten. Mithilfe dieser Ereignis-Listener können wir einige Aktionen ausführen, z. B. das Senden von AJAX-Anfragen, das Übertragen von Daten an den Server usw.

Entwickler müssen jedoch auch wissen, wie sie Listener ordnungsgemäß aus DOM-Elementen entfernen. In diesem Artikel wird erläutert, wie Sie Live-Listener mithilfe von jQuery löschen.

Vor jQuery 1.7 mussten Sie die Methode live() verwenden, um Ereignis-Listener hinzuzufügen. Der Beispielcode lautet wie folgt:

$('a').live('click', function() {
    console.log('clicked');
});

Dieser Codeblock fügt einen Listener hinzu, der eine Nachricht in der Konsole ausgibt, wenn auf ein Element geklickt wird.

Angenommen, wir möchten irgendwann den Listener aus dem a-Element entfernen. Was sollen wir tun?

Wenn Sie in jQuery einen Listener löschen möchten, können Sie die Methode unbind() verwenden und den entsprechenden Ereignistyp und die Handlerfunktion angeben. Aber hier funktioniert dieser Ansatz nicht. Der Grund dafür ist, dass sich der von der live()-Methode hinzugefügte Listener nicht tatsächlich im DOM-Element selbst befindet, sondern im gesamten Dokument implementiert ist.

Wenn Sie also versuchen, den Live-Event-Listener mit der Methode unbind() zu entfernen, funktioniert dies nicht ordnungsgemäß. Mit anderen Worten: Dieser Ereignis-Listener bleibt bestehen, bis die Seite geschlossen oder neu geladen wird.

Um dieses Problem zu lösen, hat das jQuery-Team eine neue Methode Delegate() entwickelt, die als Ersatz für Live() verwendet werden kann. Mit der Methode „delegate()“ hinzugefügte Listener können mit der Methode „off()“ entfernt werden.

Das Folgende ist ein neuer Code, der das vorherige Codebeispiel mit der Methode „delegate()“ neu schreibt:

$(document).delegate('a', 'click', function() {
    console.log('clicked');
});

Hier verwenden wir die Methode „delegate()“, um einen Ereignis-Listener hinzuzufügen. Der erste Parameter ist der Selektor, der das zu überwachende Element angibt, der zweite Parameter ist der angegebene Ereignistyp und der dritte Parameter ist die Ereignisverarbeitungsfunktion.

Wenn Sie diesen Ereignis-Listener nun irgendwann entfernen möchten, können Sie die Methode off() verwenden, wie unten gezeigt:

$(document).off('click', 'a', function() {
    console.log('clicked');
});

In diesem neuen Codeblock löschen wir den Listener über die Methode off(). Der erste Parameter ist der Ereignistyp, der zweite Parameter ist der Selektor und der dritte Parameter ist der zu entfernende Ereignishandler. Beachten Sie, dass der Ereignishandler genau übereinstimmen muss, da Sie nicht einfach einen bestimmten Listener entfernen können, an den ein Selektor angehängt ist.

Das Click-Event selbst auf dem Element wird hier nicht verändert, der Event-Listener wird jedoch auf der gesamten Seite gelöscht. Wenn Sie daher in Zukunft einen neuen Live-Ereignis-Listener hinzufügen möchten, müssen Sie nur die neue Methode „delegate()“ verwenden, um den Listener hinzuzufügen, ohne sich Gedanken über die Auswirkungen des alten Listeners auf den neuen Listener machen zu müssen.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man Live-Listener in jQuery löscht. Wenn Sie mit jQuery einen Ereignis-Listener hinzufügen, wird dieser an das gesamte Dokument und nicht an ein bestimmtes DOM-Element angehängt. Um diesen Listenertyp zu entfernen, müssen Sie daher die Methode „delegate()“ anstelle der Methode „live()“ verwenden und den entsprechenden Listener mit der Methode „off()“ entfernen. Wenn Sie verhindern möchten, dass andere Arten von Ereignis-Listenern gelöscht werden, stellen Sie sicher, dass Sie die richtige Syntax verwenden, um sicherzustellen, dass nur die angegebenen Listener gelöscht werden, die Sie löschen möchten.

Das obige ist der detaillierte Inhalt vonjQuery entfernt den Live-Listener. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!