Detaillierte Erläuterung der Javascript-Ereigniserfassungs- und Bubbling-Methoden

1. Ereignisverarbeitungsmodell

Event Bubbling und Event Capturing : Event Bubbling und Event Capturing wurden von Microsoft bzw. Netscape vorgeschlagen. Beide Konzepte sollen das Problem des Ereignisflusses (die Reihenfolge, in der Ereignisse auftreten) auf der Seite lösen.

<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

Wenn bei drei verschachtelten Divs das gleiche Ereignis für alle drei Elemente registriert wird, in welcher Reihenfolge wird es ausgelöst?

1. Das Auf und Ab der Ereignisse

Microsoft hat einen Ereignisstrom namens Event Bubbling vorgeschlagen. Elemente, die strukturell (nicht visuell) verschachtelt sind, verfügen über eine „Bubbling“-Funktion, d. h., dasselbe Ereignis wird vom untergeordneten Element zum übergeordneten Element weitergeleitet. (Von unten nach oben)

Wenn im obigen Beispiel die Bubbling-Methode verwendet wird, sollte die Auslösereihenfolge wie folgt lauten: d3——>d2——>d1. Überprüfen wir das also:

(1) Binden Sie Ereignisse an drei Div-Elemente

//1. Holen Sie sich das Element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Bindungsereignis d1.onclick = function(){
     Konsole.log(diese.id)
  }
d2.onclick = Funktion(){
      Konsole.log(diese.id)
  }
d3.onclick = Funktion(){
      Konsole.log(diese.id)
   }

(2) Ergebnisse der Operation:

Klicken Sie auf den roten Bereich:

Klicken Sie auf den violetten Bereich:

Klicken Sie auf die grüne Fläche:

Das Obenstehende ist das brodelnde Ereignis!

2. Ereigniserfassung

Elemente, die strukturell (nicht visuell) verschachtelt sind, verfügen über die Funktion der Ereigniserfassung, d. h., dasselbe Ereignis wird vom übergeordneten Element zum untergeordneten Element (Ereignisquellelement) erfasst. (Top-down) (d. h. es werden keine Ereignisse erfasst)

Wenn im obigen Beispiel die Bubbling-Methode verwendet wird, sollte die Auslösereihenfolge wie folgt lauten: d1——>d2——>d3. Überprüfen wir das also:

(1) Binden Sie Ereignisse an drei Div-Elemente

//1. Holen Sie sich das Element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Bindungsereignis d1.onclick = function(){
     Konsole.log(diese.id)
  }
d2.onclick = Funktion(){
      Konsole.log(diese.id)
  }
d3.onclick = Funktion(){
      Konsole.log(diese.id)
   }

(2) Ergebnisse der Operation:

Klicken Sie auf den roten Bereich:

Klicken Sie auf den violetten Bereich:

Klicken Sie auf die grüne Fläche:

Event erfassen!!!

Beachten:

• Auslösereihenfolge: Erst erfassen, dann sprudeln
• Ereignisse focus , blur , change , submit , reset , select usw. werden nicht angezeigt.

2. Event-Bubbling verhindern

(1) W3C-Standard event.stopPropagation(); wird aber von IE9 und niedriger nicht unterstützt

//1. Holen Sie sich das Element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Bindungsereignis d1.onclick = function(){
     Konsole.log(diese.id)
  }
d2.onclick = Funktion(){
      Konsole.log(diese.id)
  }
d3.onclick = Funktion(e){
      e.stopPropagation();
      Konsole.log(diese.id)
   }

Sie werden feststellen, dass beim Klicken auf den grünen Bereich keine externen Ereignisse nacheinander ausgelöst werden und das Aufsteigen von Ereignissen blockiert ist:

(2) Einzigartig im Internet Explorer: event.cancelBubble = true;

//1. Holen Sie sich das Element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Bindungsereignis d1.onclick = function(){
     Konsole.log(diese.id)
  }
d2.onclick = Funktion(){
      Konsole.log(diese.id)
  }
d3.onclick = Funktion(e){
      e.cancelBubble = wahr;
      Konsole.log(diese.id)
   }

Das Ergebnis ist das gleiche wie (1).

(3) Zusammenführungsabbruch: return false

In JavaScript verhindert return false nur das Standardverhalten, mit jQuery verhindert es jedoch sowohl das Standardverhalten als auch das Objekt-Bubbling.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!