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
Du musst angemeldet sein, um einen Kommentar abzugeben.
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:
Verhinderung der Standard.
Stoppen Ausbreitung auf übergeordnete Elemente.
Beenden anderer Handler auf die gleichen element aus aufgerufen.
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 istpreventDefault
: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
:Aber
stopPropagation
nicht aufhören, andere-Handler auf das gleiche element immer genannt. Von die Skillung:(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
: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:
Aber dies ist abgelöst von DOM3 Abschnitt 3.1:
(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