Wie mehrere addEventListener Arbeit in JavaScript?

Gibt es 2 Skripte in einem Dokument

//my_script.js goes first
document.onclick = function() {
    alert("document clicked");
};

//other_script.js comes after
//this overrides the onclick of my script,
//and alert will NOT be fired
document.onclick = function() {
    return false;
};

Um sicherzustellen, dass meine click-Ereignis nicht überschrieben, die von anderen Skript, wechselte ich zu addEventListener.

//my_script.js goes first
document.addEventListener("click", function() {
    alert("document clicked");
}, false);

//other_script.js comes after
document.addEventListener("click", function() {
    return false;
}, false);

Nun habe ich aber eine andere Frage. Da return false im zweiten code ist definiert nach alert wie kommt es nicht verhindern, dass Alarm aus aufgerufen?

Was ist, wenn ich will, dass mein Skript zu bekommen die totale Kontrolle über click-Ereignis (wie return false die ganze Zeit Missachtung Ereignisse definiert, die in andere Skripte)?

InformationsquelleAutor der Frage user1643156 | 2013-04-29

  1. 46

    Was ist, wenn ich will, dass mein Skript zu bekommen die totale Kontrolle über click-Ereignis (wie return false die ganze Zeit Missachtung Ereignisse definiert, die in andere Skripte)?

    Wenn Sie können, registrieren Sie Ihren handler zuerst, bevor Sie tun, die Sie tun können, dass, sofern der browser Sie verwenden korrekt implementiert DOM3-events (die es wahrscheinlich nicht, es sei denn, es ist IE8 oder älter).

    Gibt es (mindestens) vier Dinge, die hier beteiligt sind:

    1. Verhinderung der Standard.

    2. Stoppen Ausbreitung auf übergeordnete Elemente.

    3. Beenden anderer Handler auf die gleichen element aus aufgerufen.

    4. Die Reihenfolge, in der die Handler aufgerufen werden.

    In der Reihenfolge:

    1. Die Verhinderung der Standard -

    Dies ist, was return false vom DOM0-handler. (Details: die Die Geschichte auf False Zurück.) Das entspricht in DOM2 und DOM3 ist preventDefault:

    document.addEventListener("click", function(e) {
    e.preventDefault();
}, false);

    Verhinderung der Standard kann nicht alles sein, was relevant, was Sie tun, aber da waren Sie mit return false in Ihrem DOM0-handler, und die verhindert, dass die Standard -, ich bin wie es hier der Vollständigkeit halber.

    2. Stoppen Ausbreitung auf übergeordnete Elemente

    DOM0-Handler haben keine Möglichkeit, dies zu tun. DOM2 diejenigen, die über stopPropagation:

    document.addEventListener("click", function(e) {
    e.stopPropagation();
}, false);

    Aber stopPropagation nicht aufhören, andere-Handler auf das gleiche element immer genannt. Von die Skillung:

    Den stopPropagation - Methode wird verwendet, verhindern die weitere Ausbreitung einer Veranstaltung während der Veranstaltung fließen. Wenn diese Methode aufgerufen wird, alle EventListener die Veranstaltung wird aufhören Vermehrung durch den Baum. Das Ereignis wird abgeschlossen, Versand an alle Hörer auf dem aktuellen EventTarget vor dem event flow anhält.

    (Meine Hervorhebung.)

    3. Beenden anderer Handler auf die gleichen element aus aufgerufen

    Natürlich nicht kommen für DOM0, denn es konnte nicht werden andere Handler für dasselbe Ereignis auf das gleiche element. 🙂

    Soweit ich weiß, gibt es keine Möglichkeit, dies zu tun in DOM2, aber DOM3 gibt uns stopImmediatePropagation:

    document.addEventListener("click", function(e) {
    e.stopImmediatePropagation();
}, false);

    Einige Bibliotheken bieten dieses feature (auch auf nicht-DOM3-Systeme wie IE8) für Handler angeschlossen über die Bibliothek, siehe unten.

    4. Die Reihenfolge, in der die Handler aufgerufen werden

    Wieder, nicht etwas, bezogen auf DOM0, denn es gibt wohl keine andere Handler.

    In DOM2, die Spezifikation explizit sagt, dass die Reihenfolge, in der die Handler an ein element genannt werden, ist nicht garantiert; aber DOM3 änderungen, sagen, dass Handler werden aufgerufen, in der Reihenfolge, in der Sie registriert sind.

    Erste, von DOM2 Abschnitt 1.2.1:

    Obwohl alle EventListeners auf die EventTarget garantiert werden, ausgelöst durch ein Ereignis, das eingetroffen ist, dass EventTarget keine Angabe gemacht wird, als um die Reihenfolge, in der Sie erhalten die Veranstaltung mit Bezug auf die anderen EventListeners auf die EventTarget.

    Aber dies ist abgelöst von DOM3 Abschnitt 3.1:

    Als Nächstes muss die Umsetzung ermitteln der aktuellen Ziel-Kandidaten-Ereignis-Listener. Dies muss die Liste aller Ereignis-Listener registriert wurden, auf das aktuelle Ziel in der Reihenfolge der Anmeldung.

    (Meine Hervorhebung.)

    Einige Bibliotheken garantieren die Bestellung, sofern Sie hook up der Veranstaltungen, mit der Bibliothek.

    Es ist auch erwähnenswert, dass in Microsoft ' s Vorgänger, DOM2 (z.B. attachEvent), es war das Gegenteil von DOM3 bestellen: Handler, Die aufgerufen wurden, in reverse Reihenfolge der Anmeldung.

    Also unter #3 und #4 zusammen, wenn Sie können, registrieren Sie Ihren handler zuerst, es wird zuerst aufgerufen, und Sie können stopImmediatePropagation zu verhindern, dass andere Hundeführer abgerufen. Sofern die browser implementiert DOM3 richtig.

    All dies (einschließlich der Tatsache, dass der IE8 und älter nicht selbst implementieren DOM2 events, viel weniger DOM3) ist ein Grund, Menschen zu verwenden, - Bibliotheken wie jQuery, von denen einige garantieren für die Bestellung (so lange alles Einhaken Ihre Hundeführer über die Bibliothek in Frage) und bieten Möglichkeiten, um halt auch andere Handler auf das gleiche element immer genannt. (Mit jQuery, zum Beispiel, die Reihenfolge ist die Reihenfolge, in der Sie angebracht waren, und die Sie verwenden können stopImmediatePropagation zu stoppen Aufrufe anderer Prozeduren. Aber ich versuche nicht zu verkaufen, jQuery hier, nur zu erklären, dass einige Bibliotheken bieten mehr Funktionalität als das Standard-DOM-Zeug.)

    InformationsquelleAutor der Antwort T.J. Crowder

Schreibe einen Kommentar