Das Sprudeln von JavaScript-Ereignissen ist für mich·Bild- und Textbeispiele

1. Ereignisse

In der Browser-Client-Anwendungsplattform ist grundsätzlich alles ereignisgesteuert, das heißt, ein Ereignis tritt ein und dann werden entsprechende Aktionen ausgeführt.

Browserereignisse stellen Signale dar, dass etwas passiert ist. Die Ausarbeitung von Ereignissen steht nicht im Mittelpunkt dieses Artikels. Freunde, die es noch nicht verstanden haben, können das W3school-Tutorial besuchen, um mehr zu erfahren.

2. Blasenmechanismus

Was ist Blasen?

Sie sollten das Bild unten verstehen. Die Blasen beginnen am Grund des Wassers und steigen von tief nach flach nach oben. Auf dem Weg nach oben durchqueren die Blasen unterschiedliche Wassertiefen.

Entsprechend: Diese Blase entspricht unserem Ereignis hier, und das Wasser entspricht unserem gesamten Dom-Baum. Ereignisse steigen von der untersten Schicht des Dom-Baums auf Es wird an den Wurzelknoten des Doms übergeben.

Einfache Fallanalyse

Das Folgende ist ein einfaches Beispiel, um das Prinzip des Bubblings zu veranschaulichen:

Definieren Sie ein HTML mit drei einfachen Doms darin : div1, div2, span, div2 enthält span, div1 enthält div2; und sie befinden sich alle unter body:

? 1 1 2 3 4 5 6 7 "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. 23 4 5 6 7 "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >Dies ist ein span. Der Schnittstellenprototyp lautet wie folgt:

aufgetreten ist, und die Knoteninformationen, die das Ereignis ausgelöst haben:

?

1 2 3 4 5 6 1 2 3 4 5 6 7 8 "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } 7 8 "text/javascript" > code> window.onload = code> function () { document.getElementById( "body" ).addEventListener( "click" , eventHandler); } Funktion eventHandler(event) { console.log( "Time:" + new Date(event.timeStamp)+ " Der Knoten, der das Ereignis generiert: " + event.id + " Aktueller Knoten: " +event.currentTarget.id); } Wenn wir nacheinander auf „Das ist span“, div2, div1 und body klicken, werden die folgenden Informationen ausgegeben:

Analyse des oben Gesagten Das Ergebnis:

Egal, ob es sich um Body, Body-Unterelement div1, Div-Unterelement div2 oder Span handelt, wenn auf diese Elemente geklickt wird, wird ein Klickereignis generiert und das Der Körper erfasst es und ruft dann die entsprechende Ereignishandlerfunktion auf. So wie Blasen im Wasser von unten nach oben steigen, so steigen auch Ereignisse auf.

Das schematische Diagramm der Ereigniszustellung sieht wie folgt aus:

Der Zeitpunkt des Auftretens + der Ort des Ereignisses + die Art des Ereignisses + der aktuelle Handler des Ereignisses + andere Informationen,

🎜>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 "UTF-8" > "text/css" > .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. b. Event-Bubbling beenden

Wenn div1 angeklickt wird, erscheint ein „Hallo, ich bin das äußerste Div.“ Wenn Sie auf div2 klicken, wird „Hallo, ich bin das Div der zweiten Ebene“ angezeigt. Wenn Sie auf span klicken, wird „Hallo, ich bin span“ angezeigt.

Daraus erhalten wir das folgende Javascript-Fragment:

? 1 1 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); }); } 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > window.onload = function () { document .getElementById( "box1" ).addEventListener( " click" , function (event){ alert( "Hallo, ich bin die äußerste Div. " ); }); document .getElementById( "box2" ).addEventListener( " click" , function (event){ alert( "Hallo, ich bin die zweite Schicht div " ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ warning( "Hallo, ich bin span. " ); }); } Es wird erwartet, dass beim Klicken auf den obigen Code ein Popup-Fenster „Hallo, ich bin span“ angezeigt wird. Ja, ein solches Dialogfeld wird tatsächlich angezeigt:

🎜> Das ist offensichtlich nicht das, was wir wollen! Wir wollen, dass jeder, der klickt, wessen Informationen anzeigt. Warum tritt die obige Situation auf? Der Grund liegt im Sprudeln von Ereignissen. Wenn Sie auf span klicken, wird span das generierte Ereignis ebenfalls empfangen, d . Funktion. Jetzt ist das Problem entdeckt, aber wie kann man es lösen?

Methode 1: Betrachten wir eine anschaulichere Situation: Eine Blase im Wasser steigt vom Boden auf, und Sie sind jetzt im Wasser und möchten nicht, dass die Blase aufsteigt. Was sollten Sie tun? ? --Stich es! Ohne die Blasen werden sie natürlich nicht sprudeln. Ebenso können wir für einen bestimmten Knoten, wenn wir nicht möchten, dass das Ereignis, das er gerade verarbeitet, weiter sprudelt, das Sprudeln beenden:

Fügen Sie in der entsprechenden Verarbeitungsfunktion event.stopPropagation() , Terminate hinzu die Broadcast-Verteilung von Ereignissen, sodass das Ereignis an diesem Knoten verbleibt und nicht verteilt wird. Ändern Sie das obige Skriptfragment:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); event.stopPropagation(); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); event.stopPropagation(); }); } Nach einem solchen Codeabschnitt werden durch Klicken auf verschiedene Elemente unterschiedliche Eingabeaufforderungen angezeigt, und es werden nicht mehrere Felder angezeigt.

Methode 2: Das Ereignis enthält einen Verweis auf den Knoten, der das Ereignis ursprünglich ausgelöst hat, und einen Verweis auf den Knoten, der das Ereignis aktuell verarbeitet. Wenn der Knoten nur von ihm selbst ausgelöste Ereignisse verarbeitet, also Ereignisse, die nicht von ihm selbst generiert werden werden nicht verarbeitet. event.target bezieht sich auf den DOM-Knoten, der dieses Ereignisobjekt generiert hat, und event.currrentTarget bezieht sich auf den aktuellen Verarbeitungsknoten. Wir können überprüfen, ob die beiden Ziele gleich sind.

Ein Span-Click-Ereignis generiert beispielsweise ein Ereignisobjekt. Wenn span dieses Ereignis behandelt, zeigt event.currentTarget auch auf das span-Element , wird die entsprechende Ausführungsverarbeitungsfunktion ausgeführt. Wenn das Ereignis an div2 übergeben wird, wird event.currentTarget zu div2. Zu diesem Zeitpunkt wird festgestellt, dass die beiden nicht gleich sind, dh das Ereignis wird nicht von div2 selbst generiert und es wird keine Antwortverarbeitungslogik ausgeführt.

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是最外层div。" ); } }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是第二层div。" ); } }); document.getElementById( "span" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是span。" ); } }); } Vergleich:

Aus Sicht der Ereignisbereitstellung: Methode eins besteht darin, das Sprudeln von Ereignissen abzubrechen. Das heißt, wenn einige Knoten das Sprudeln abbrechen, wird das Ereignis nicht mehr stattfinden geliefert; Die zweite Methode besteht darin, das Sprudeln nicht zu verhindern, die zu verarbeitenden Ereignisse zu filtern und das Ereignis nach der Verarbeitung weiterzuleiten; Um Informationen zu erhalten, müssen die Unterelemente jedes Elements auch die sprudelnde Lieferung von Ereignissen beenden, d. h. sie sind funktionell stark mit anderen Elementen verbunden. Diese Methode ist sehr fragil. Wenn beispielsweise die Verarbeitungsfunktion des Span-Elements keine Blasenbeendigung durchführt, wird das Ereignis an div2 übergeben, was zu einer Eingabeaufforderungsmeldung für div2 führt.

Nachteile von Methode zwei: Methode zwei fügt Ereignisse für hinzu Jedes Element Die Abhörverarbeitungsfunktionen und die Ereignisverarbeitungslogik sind sehr ähnlich, das heißt, sie haben alle die Beurteilung if (event.target == event.currentTarget). Dies führt zu einer großen Coderedundanz. Jetzt ist es in Ordnung, drei Elemente zu haben , aber wenn es mehr als 10 sind, was tun mit Hunderten von ihnen?

Außerdem gibt es für jedes Element eine Verarbeitungsfunktion, was die Komplexität von Logik und Code bis zu einem gewissen Grad erhöht.

Lassen Sie uns Methode zwei noch einmal analysieren: Das Prinzip von Methode zwei besteht darin, dass das Element, nachdem es das Ereignis empfangen hat, bestimmt, ob das Ereignis die Anforderungen erfüllt, es dann entsprechend behandelt und das Ereignis dann weiter sprudelt und nach oben übergeben werden; Da das Ereignis durch Blasen übergeben wird, kann ein bestimmter übergeordneter Knoten das Ereignis einheitlich verarbeiten, den Ort bestimmen, an dem das Ereignis aufgetreten ist (dh den Knoten, an dem das Ereignis aufgetreten ist) und es dann verarbeiten entsprechend? Die Antwort lautet „Ja“, indem Sie dem Body-Element einen Ereignis-Listener hinzufügen und dann event.target beurteilen, um unterschiedliche Verhaltensweisen für unterschiedliche Ziele zu erzeugen.

Refaktorieren Sie den Code von Methode zwei:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } function eventPerformed(event) { var target = event.target; switch (target.id) { case "span" : alert( "您好，我是span。" ); case "div1" : alert( "您好，我是第二层div。" ); break ; case "div2" : alert( "您好，我是最外层div。" ); break ; } } Das Ergebnis ist, dass auf verschiedene Elemente geklickt wird und nur passende Eingabeaufforderungen angezeigt werden, ohne redundante Eingabeaufforderungen.

Mit der oben genannten Methode haben wir die Verarbeitungsfunktionen, die jedes Element haben sollte, an sein übergeordnetes Knotenkörperelement übergeben. Mit anderen Worten: span, div2 und div1 verfügen über ihre eigene Antwortlogik Übertragen Sie es auf den Körper und lassen Sie ihn die entsprechende Logik vervollständigen, ohne die entsprechende Logik selbst zu implementieren. Dieser Modus ist die sogenannte Ereignisdelegation.

Das Folgende ist ein schematisches Diagramm:

Das Sprudeln von JavaScript-Ereignissen ist für mich·Bild- und Textbeispiele

In Verbindung stehende Artikel