Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Javascript-Ereignis-Bubbling_Javascript-Fähigkeiten

Detaillierte Erläuterung der Javascript-Ereignis-Bubbling_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:20:451341Durchsuche

Ereignisse sind einer der Kerninhalte in JavaScript, nämlich das Ereignis-Bubbling. Bevor wir das Ereignis-Bubbling einführen, stellen wir ein weiteres wichtiges Konzept vor:
1. Was ist Ereignisfluss:
Das Document Object Model (DOM) ist eine Baumstruktur, die durch die folgende Abbildung anschaulich dargestellt werden kann.

Wenn ein HTML-Element ein Ereignis auslöst, wird das Ereignis in einer bestimmten Reihenfolge zwischen dem Triggerknoten und dem Wurzelknoten im DOM-Baum weitergegeben. Dieser Ausbreitungsprozess wird als „Es ist“ bezeichnet ein Strom von Ereignissen. Entsprechend der Ausbreitungsreihenfolge von Ereignissen können sie in zwei Kategorien unterteilt werden: die eine ist die Ereignissprudelung und die andere die Ereigniserfassung, die das in diesem Kapitel vorgestellte Thema betrifft:
1. Event-Sprudeln:
Das sogenannte Zeitblasen bedeutet, dass sich das Ereignis wie eine Blase vom auslösenden Element bis zum entsprechenden Wurzelknoten ausbreitet Wenn das Ereignis in der Handlerfunktion des übergeordneten Elements registriert ist, wird die im übergeordneten Element registrierte Eventhandlerfunktion ebenfalls ausgelöst, obwohl das Ereignis auf dem untergeordneten Knoten ausgelöst wird. Wenn beispielsweise in der obigen Abbildung das Onclick-Ereignis des a-Elements ausgelöst wird, empfangen seine übergeordneten Elemente p, document und window alle dieses Ereignis, und wenn eine Zeitverarbeitungsfunktion für das entsprechende übergeordnete Element registriert ist, dann Diese Ereignisverarbeitungsfunktion wird ausgeführt. Schauen Sie sich ein Codebeispiel an:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

Der Zweck des obigen Codes besteht darin, den Inhalt in der entsprechenden Zelle anzuzeigen, wenn auf die entsprechende Zelle geklickt wird. In der obigen Implementierung wird der Onclick-Ereignishandler jedoch nicht für jede Zelle registriert. Stattdessen wird der Onclick-Ereignishandler in der übergeordneten Elementtabelle der Zelle registriert. Wenn auf die Zelle geklickt wird, wird das Ereignis ausgelöst Außerdem breitet es sich vom Ereignisobjekt nach oben aus, und das Tabellenelement verfügt zufällig über einen registrierten Onclick-Ereignishandler. Dieser Handler wird zu diesem Zeitpunkt ausgeführt. Natürlich wird hier das Problem der Übergabe von Ereignisobjektparametern festgelegt. Alle Browser unterstützen das Event-Bubbling. 2. Ereigniserfassung:
Die Ereigniserfassung ist genau das Gegenteil des Ereignis-Bubblings. Wenn auf ein Element geklickt wird, erfolgt die Ausbreitung des Ereignisses vom Stammelement zum auslösenden Element. Für die browserübergreifende Unterstützung wird das Bubbling im Allgemeinen nicht verwendet. Modell zur Verarbeitung von Blasenereignissen.
2. Javascript verhindert, dass Ereigniscode sprudelt
Das Bubbling von Ereignissen ist in bestimmten Szenarien sehr nützlich, aber manchmal muss es verhindert werden. Im Folgenden finden Sie einen Beispielcode, der mit allen gängigen Browsern kompatibel ist, um das Bubbling von Ereignissen zu verhindern.
Codebeispiel:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

Der obige Code kann verhindern, dass das Ereignis sprudelt. Hier ist ein kurzer Kommentar zum Code:
2. Codekommentare:

1. Funktion stopBubble(e) {}, diese Funktion wird verwendet, um zu verhindern, dass Ereignisse sprudeln, und der Parameter ist ein Ereignisobjekt.
2. if(e&&e.stopPropagation){e.stopPropagation();}, bestimmen Sie, ob stopPropagation unterstützt wird, verwenden Sie e.stopPropagation(). Die Funktion stopPropagation() wird von IE10 und Browsern unter IE10 nicht unterstützt.
3.window.event.cancelBubble=true, der aktuelle IE-Browser verwendet dies, um das Bubbling von Ereignissen zu verhindern.

Das Obige ist eine detaillierte Einführung in das JavaScript-Event-Bubbling. Ich hoffe, es wird für das Lernen aller hilfreich sein.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung und verwandte Funktionen zum Generieren von Zufallszahlen in JS_Javascript-KenntnissenNächster Artikel：Verwendung und verwandte Funktionen zum Generieren von Zufallszahlen in JS_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen