English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die Ereignisverteilung ist eine Methode zur Beschreibung des "Stapels" von Ereignissen, die im Webbrowser ausgelöst werden.
EreignisseBlasenundErfassungsind zwei Mechanismen der Ereignisverteilung, die beschreiben, was passiert, wenn zwei Handler desselben Ereignistyps auf einem Element aktiviert werden.
Angenommen, Sie sind in<div ">Elementen eine<p>Element, und der Benutzer hat darauf geklickt<p>Element, sollten Sie zunächst den "click"-Event des welchen Elements behandeln?
<div id="div1">Erfassen
<p id="p1">Klicken Sie mich</p>"
</div>"
<script>
document.querySelector("#div1).addEventListener("click", myFunc, true);
document.querySelector("#p"1).addEventListener("click", myFunc, true);
</script>Testen Sie heraus‹/›Durchcapture(Erfassung), wird das Ereignis zuerst vom äußersten Element erfasst und an die inneren Elemente weitergeleitet.
DurchBlasen, wird das Ereignis zuerst vom innersten Element erfasst und bearbeitet und dann an die äußeren Elemente weitergeleitet.
Mit diesemaddEventListener()Methode, Sie können " useCapture Der "Parameter" bestimmt den Typ der Verbreitung, die Syntax unten gibt eine detaillierte Erklärung zu "useCapture".
element.addEventListener(event, listener, useCapture)
"useCapture" hat standardmäßig den Wert false, was bedeutet, dass die Blasenverbreitung standardmäßig verwendet wird; wenn der Wert auf true gesetzt wird, wird die Ereignisverbreitung über Erfassung verwendet.
Der Begriff Ereignisweiterleitung wurde eingeführt, um die Situation zu behandeln, dass mehrere Elemente in der DOM-Hierarchie, die eine Eltern-Kind-Beziehung haben, Ereignisbehandler für dasselbe Ereignis (z.B. Mausklick) haben. Das Problem ist jetzt, welchen Elements klick-Ereignis wird zuerst behandelt, wenn der Benutzer auf den internen Element klickt, das externe Element oder das interne Element?
Wenn ein Ereignis auf einem Element mit übergeordneten Elementen ausgelöst wird (z.B. im Beispiel<p>), und der Browser führt zwei verschiedene Stufen aus-Erfassungs- und Blasenstufe.
InErfassungStufe:
Der Browser überprüft den äußersten übergeordneten Elternteil des Elements (<html>ob er im Erfassungsstadium den onclick-Ereignisbehandler registriert hat, und führt diesen aus, falls ja.
Dann bewegt es sich zu<html>imdem nächsten Element und führt dasselbe aus, dann das nächste, und so weiter, bis es
InBlasenGanz anders ist der
Der Browser überprüft, ob der tatsächlich geklickte Element im Blasenstadium den onclick-Ereignisbehandler registriert hat, und führt diesen aus, falls ja.
Dann bewegt es sich zum nächsten unmittelbaren übergeordneten Element und führt das nächste aus, und so weiter, bis es<html>bis zum Element.
In den gängigsten Browsern sind alle Ereignisbehandler standardmäßig im Blasenstadium registriert.
In der Erfassungsphase wird das Ereignis vom Window aus durch das DOM-Baumstruktur nach dem Zielknoten weitergeleitet.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);Testen Sie heraus‹/›Nur wennaddEventListener()Wenn der dritte Parameter auf true gesetzt wird, wird die Ereigniserkennung zusammen mit den bei der Anmeldung registrierten Ereignisbehandlern verwendet.
Im Bubbling-Stadium ist das Gegenteil der Fall. In diesem Stadium wird das Ereignis oder das Bubbling von dem Zielobjekt bis zum Window, das DOM-Baum nach oben weitergeleitet.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);Testen Sie heraus‹/›Alle Browser unterstützen das Ereignisbubbling und das Ereignisbubbling gilt für alle Handler, unabhängig davon, wie sie registriert wurden (z.B. mit onclick oder addEventListener()).
Um zu verhindern, dass mit dem Methodenobjekt event.stopPropagation() den Event-Handlern der Vorfahrenbenachrichtigungen über das Ereignis gesendet werden, kann die Ereignisweiterleitung auch in der Mitte gestoppt werden.
Im folgenden Beispiel wird der Click-Event-Listener des Elternelements nicht ausgeführt, wenn auf ein Kindelement geklickt wird:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("You clicked: ");+ this.tagName);
event.stopPropagation();
}Testen Sie heraus‹/›Das Zielobjekt ist der DOM-Knoten, der das Ereignis generiert hat.
Zum Beispiel, wenn der Benutzer auf einen Hyperlink klickt, ist das Zielobjekt der Hyperlink.
Der Zugriff auf das Zielobjekt erfolgt über event.target, und es ändert sich während der Ereignisweiterleitung nicht.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = "); + event.target.tagName);
}Testen Sie heraus‹/›Bestimmte Ereignisse haben eine damit verbundene Standardaktion. Zum Beispiel, wenn Sie auf einen Link klicken, wird der Browser Sie zum Ziel des Links bringen, wenn Sie auf den Absenden-Button eines Formulars klicken, wird das Browser das Formular absenden, etc. Sie können das Methodenobjekt event.preventDefault() verwenden, um solche Standardaktionen zu verhindern.
function myFunc() {
event.preventDefault();
}Testen Sie heraus‹/›Das Verhindern der Standardaktion verhindert jedoch nicht die Weiterleitung des Ereignisses; das Ereignis wird wie gewohnt weitergeleitet bis zum DOM-Baum.
Bubbling ermöglicht uns auch die Nutzung von Event-Delegation.
Event-Delegation ermöglicht es Ihnen, den Event-Listener nicht auf eine bestimmte Knoten hinzuzufügen; sondern den Event-Listener auf ein übergeordnetes Objekt hinzuzufügen.
Der Event-Delegation ermöglicht es Ihnen, den Event-Listener nicht auf eine bestimmte Knoten hinzuzufügen; sondern den Event-Listener auf ein übergeordnetes Objekt hinzuzufügen.
In diesem Beispiel können Sie, wenn Sie eine Meldung bei Klick ausblenden möchten, einen Click-Event-Listener auf das übergeordnete Element setzen, und der aufkommende Event wird an das übergeordnete Element weitergeleitet, ohne dass für jeden Kindknoten ein eigener Event-Listener gesetzt werden muss.<ul>Ein Click-Event-Listener wird auf das übergeordnete Element gesetzt, der aufklappende Listeintrag wird angezeigt
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("Listeneintrag " + event.target.id.replace("post-", "") + " wurde geklickt!");
}
});
</script>Testen Sie heraus‹/›