Sollen alle jquery-Ereignisse an $ (Dokument) gebunden sein?

Wo das kommt von

Als ich zuerst gelernt, jQuery, ich normalerweise an Veranstaltungen wie dieser:

$('.my-widget a').click(function() {
    $(this).toggleClass('active');
});

Nachdem das lernen mehr über Wahlschalter Geschwindigkeit und event-delegation, ich Las an mehreren stellen, dass "jQuery event delegation wird Ihren code schneller." So fing ich an, schreiben Sie code wie diesen:

$('.my-widget').on('click','a',function() {
    $(this).toggleClass('active');
});

War dies auch die empfohlene Art und Weise zu replizieren, die das Verhalten der veraltet .live () - Ereignis. Was ist wichtig für mich, da viele meiner Seiten dynamisch hinzufügen/entfernen-widgets die ganze Zeit. Die oben nicht Verhalten sich genau wie .live (), aber, da nur Elemente Hinzugefügt, um die bereits vorhandenen container '.my-widget " bekommen Sie das Verhalten. Wenn ich dynamisch hinzufügen, ein weiterer block von html nach, der code lief, diese Elemente werden nicht die Ereignisse an Sie gebunden. Wie diese:

setTimeout(function() {
    $('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);

Was ich erreichen will:

das alte Verhalten .live() //Bedeutung der Befestigung Ereignisse, um noch nicht vorhandene Elemente
die Vorteile der .auf()
Schnellste Leistung, die es zu binden, Veranstaltungen
Einfache Weise zu verwalten, Veranstaltungen

Ich nun fügen Sie alle Ereignisse wie dieses:

$(document).on('click.my-widget-namespace', '.my-widget a', function() {
    $(this).toggleClass('active');
});

Scheint, erfüllt alle meine Ziele. (Ja, es ist langsamer als IE aus irgendeinem Grund, keine Ahnung warum?)
Es ist schnell, weil nur ein einzelnes Ereignis gebunden wird zu einem einzigartigen element und dem Sekundär-Selektor wird nur ausgewertet, wenn das Ereignis Eintritt (bitte korrigieren Sie mich, wenn dies hier falsch). Der namespace ist genial, denn es macht es leichter zu wechseln wird der Ereignis-listener.

Meine Lösung/Frage

So, ich bin angefangen zu denken, dass jQuery events sollte immer gebunden sein an $(document).

Gibt es einen Grund, warum Sie würde nicht wollen, dies zu tun?

Konnte dies sein, als ein best practice? Wenn nicht, warum?

Wenn Sie gelesen haben, diese ganze Sache, danke. Ich freue mich über jede/feedback/Erkenntnisse.

Annahmen:

Mit Hilfe von jQuery unterstützt .on() //mindestens version 1.7
Sie möchten der das Ereignis Hinzugefügt werden, um dynamisch neue Inhalte Hinzugefügt

Lesungen/Beispiele:

InformationsquelleAutor der Frage Buck | 2012-10-10

197

Nein - dann sollten Sie binden sich NICHT alle Delegierten event-Handler, um die document Objekt. Das ist wohl die schlechtesten Szenario, das Sie erzeugen können.

First off, event-delegation nicht immer machen Ihren code schneller. In einigen Fällen ist es vorteilhaft und in manchen Fällen nicht. Sie sollten mithilfe von Ereignis-delegation, wenn Sie Sie wirklich benötigen event-delegation und wenn Sie davon profitieren. Andernfalls sollten Sie die bind-event-Handler direkt an die Objekte, wo das Ereignis passiert ist, da dieses in der Regel effizienter.

Sekunde aus, sollten Sie NICHT binden alle Delegierten Ereignisse auf der Dokumentebene. Dies ist genau der Grund, warum .live() war veraltet, weil das ist sehr ineffizient, wenn viele Ereignisse gebunden diese Weise. Für Delegierte event-handling ist es sehr VIEL effizienter binden Sie an die nächsten Eltern, die nicht dynamisch ist.

Dritten ab, nicht alle Ereignisse, Arbeit oder alle Probleme können gelöst werden, mit delegation. Zum Beispiel, wenn Sie abfangen möchten wichtige Ereignisse, die auf eine input-Steuerung und blockieren von ungültigen Schlüssel eingegeben werden in die input-Steuerung, die Sie nicht tun können, dass mit Delegierten event-handling, weil durch die Zeit, die das Ereignis Blasen bis zum Delegierten-handler, die Sie bereits bearbeitet wurde, die von der input-Steuerung und es ist zu spät, um Einfluss auf das Verhalten.

Hier sind mal beim event-delegation ist notwendig oder vorteilhaft:
- Wenn die Objekte, die Sie erfassen Ereignisse werden dynamisch erzeugt/entfernt und Sie immer noch wollen, um Ereignisse aufzuzeichnen, die auf Ihnen, ohne dass explizit rebind event-Handler jedes mal, wenn Sie eine neue erstellen.
- Wenn Sie viele Objekte, die alle wollen, die genau dem gleichen event-handler (wo viel ist mindestens Hunderte). In diesem Fall kann es effizienter sein, bei der Installation Zeit zu binden, eine Delegierte event-handler, anstatt Hunderte oder direkter event-Handler. Beachten Sie, Delegierte event-handling ist immer weniger effizient zur Laufzeit als die direkten event-Handler.
- Wenn Sie versuchen, zu erfassen (auf einer höheren Ebene in Ihrem Dokument) Ereignisse, die auftreten, auf ein beliebiges element im Dokument.
- Wenn Ihr design ist explizit mit Ereignis-bubbling und stopPropagation() das problem zu lösen oder eine Funktion in Ihre Seite ein.
Um das zu verstehen, ein wenig mehr, muss man verstehen, wie jQuery Delegierten event-Handler arbeiten. Wenn Sie anrufen, so etwas wie dieses:
```
$("#myParent").on('click', 'button.actionButton', myFn);
```
Er installiert einen generischen jQuery event-handler auf die #myParent Objekt. Wenn ein click-Ereignis Blasen bis zu diesem Delegierten event handler, jQuery, gehen Sie durch die Liste der Delegierten event-Handler angebracht, um das Objekt und sehen Sie, wenn das ursprüngliche element für die Veranstaltung entspricht jedem der Selektoren in der Delegierten-event-Handler.

Weil Selektoren kann ziemlich involviert, das bedeutet, dass jQuery Parsen jeder Selektor und dann vergleichen Sie es, um die Merkmale der ursprünglichen Veranstaltung Ziel zu sehen, ob Sie mit jeder Auswahl. Dies ist keine billige Bedienung. Es ist keine große Sache wenn es nur einer von Ihnen, aber wenn Sie alle Ihre Selektoren, die auf das document-Objekt und es gab Hunderte von Selektoren zu vergleichen, in der jede einzelne sprudelte Ereignis, dies kann ernsthaft beginnen zu humpeln event-handling.

Aus diesem Grund, Sie wollen, um Ihre Delegierten event-Handler, so dass eine Delegierte event-handler ist so nah an das Zielobjekt, wie praktisch. Das bedeutet, dass weniger Veranstaltungen wird die Blase durch die einzelnen Delegierten-event-handler, also die Verbesserung der Leistung. Dass alle Delegierten die Ereignisse des document-Objekts ist die schlechteste Leistung, da alle Perlen Ereignisse haben zu gehen durch alle Delegierten event-Handler bekommen und ausgewertet vor allen möglichen Delegierten Ereignis-Selektoren. Dies ist genau der Grund, warum .live() ist veraltet, weil das ist, was .live() Tat, und es erwies sich als sehr ineffizient.

So, zu erreichen, optimierte Leistung:
1. Verwenden Sie nur delegiert, event-handling, wenn es tatsächlich eine Funktion, die Sie brauchen, oder erhöht die Leistung. Nicht nur verwenden Sie Sie immer, denn es ist einfach, weil, wenn Sie gar nicht brauche. Tatsächlich führt schlimmer auf event-dispatch-Zeit als direkte Veranstaltung verbindlich.
2. Befestigen Delegierten event-Handler, um das nächste Eltern-auf die Quelle des Ereignisses als möglich. Wenn Sie mit Delegierten event-handling, weil Sie dynamische Elemente, die Sie möchten, um Ereignisse aufzuzeichnen, wählen Sie dann die nächsten Eltern, die selbst nicht dynamisch.
3. Verwenden, einfach-zu-bewerten-Selektoren für die Delegierten event-Handler. Wenn man verfolgt, wie die Delegierte event-handling funktioniert, werden Sie verstehen, dass ein Delegierten-event-handler hat im Vergleich zu der Menge von Objekten viele Male, so Kommissionierung eine möglichst effiziente Auswahl als möglich oder das hinzufügen von einfachen Klassen, um Ihre Objekte so einfacher Selektoren verwendet werden kann, erhöhen Sie die Leistung delegiert event-handling.
InformationsquelleAutor der Antwort jfriend00
8

Event-delegation ist eine Technik, zu schreiben, Ihre Handler, bevor das element tatsächlich vorhanden im DOM. Diese Methode hat jedoch Ihre eigenen Nachteile und sollte nur verwendet werden, wenn Sie solche Anforderungen.

Wann sollten Sie mithilfe von Ereignis-delegation?
1. Beim binden eines gemeinsamen handler für mehr Elementen, muss dieselbe Funktionalität. (Ex: Tabellenzeile hover)
  - In dem Beispiel, wenn Sie hatte, zu binden alle Zeilen mit direkten binden, Sie würden am Ende erstellen von n-handler für n Zeilen in dieser Tabelle. Durch die Verwendung von delegation Methode könnten Sie am Ende Umgang mit allen in-1 einfach-handler.
2. Wenn Sie fügen Sie dynamische Inhalte häufiger in den DOM (Ex: Hinzufügen/entfernen von Zeilen aus einer Tabelle)
Warum sollten Sie nicht verwenden die Ereignis-delegation?
1. Event delegation ist langsamer, wenn im Vergleich zur Bindung der Veranstaltung direkt an element.
  - Es vergleicht das target-Selektor auf jede Blase trifft, wird der Vergleich so teuer, wie es kompliziert ist.
2. Keine Kontrolle über die Ereignis-bubbling, bis es auf das element, dass es gebunden ist.
PS: Auch für dynamische Inhalte, die Sie nicht zu verwenden, event-delegation-Methode, wenn Sie binden die handler nachdem der Inhalt eingefügt bekommen in DOM. (Wenn die dynamischen Inhalte Hinzugefügt werden, die nicht regelmäßig entfernt/neu Hinzugefügt)

InformationsquelleAutor der Antwort Selvakumar Arumugam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.