Verstehen Sie kurz das Sprudeln, Delegieren, Binden und Weitergeben von JavaScript-Ereignissen

Bubbling-Ereignisse

1. : Event-Bubbling bedeutet, dass das Ereignis zunächst vom spezifischsten Element empfangen wird und sich dann nach oben zu weniger spezifischen Knoten ausbreitet.
2. Das Ereignis-Bubbling ist standardmäßig aktiviert, das Ereignis-Bubbling kann jedoch über JS-Code gesteuert werden.

Features:

• Wenn unsere Ereignisfunktion ausgelöst wird, empfängt die Ereignisfunktion tatsächlich ein Ereignisobjekt.

• Wenn wir die Methode event.stopPropagation() in unserer Event-Funktion ausführen, endet das Sprudeln des Events hier.

• Nicht alle Arten von Ereignissen unterstützen das Ereignis-Bubbling.

• Event-Bubbling löst nur Event-Funktionen desselben Typs aus.

Zwei Möglichkeiten, Bubbling-Ereignisse zu verhindern

Es gibt zwei Möglichkeiten, Bubbling-Ereignisse zu verhindern: eine ist eine Eigenschaft und die andere ist eine Methode.

cancelBubble

legt fest oder gibt zurück, ob das Ereignis an die obere Ebene weitergegeben werden soll.

Syntax: event.cancelBubble = true;

stopPropagation()

verhindert, dass sich das Ereignis im Ereignisstrom weiter ausbreitet.

Syntax: event.stopPropagation();

Beispiel: Binden Sie Klickantwortfunktionen an drei Objekte, die gegenseitig über- und untergeordnet sind.

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alarm('span tag');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(){
          alarm('box3');
      }
      var body = document.body;
      body.onclick = function(){
          alarm('body');
      }}

Blasenbildung für Box verhindern:

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alarm('span tag');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = Funktion(Ereignis){
          alarm('box3');
           event.stopPropagation();

      }
      var body = document.body;
      body.onclick = function(){
          alarm('body');
      }}

Ereignisse delegieren

Wenn wir eine Reihe von Unter-Tags mit denselben Ereignissen haben, können wir ihnen Ereignisse hinzufügen, indem wir die Unter-Tags durchlaufen. Wenn jedoch ein neues Unter-Tag-Element hinzugefügt wird, müssen wir das neue Unter-Tag erneut binden Element, andernfalls ist es ungültig.

Das Attribut

bindet das Ereignis an das Vorfahrenelement , sodass, wenn das Ereignis auf dem untergeordneten Element ausgelöst wird, es zum Vorfahrenelement hochsteigt und das Ereignis über das Antwortereignis des Vorfahrenelements verarbeitet wird. Mithilfe von Bubbling und Delegation können Sie die Anzahl der Ereignisbindungen reduzieren und die Programmleistung verbessern.

Holen Sie sich das angeklickte Element

, egal auf welches Element wir innerhalb des Vorgängerelements klicken. Wir hoffen nur, dass das Ereignis ausgelöst wird, wenn wir auf ein Element innerhalb des Vorgängerelements klicken Zu diesem Zeitpunkt müssen wir eine Beurteilungsbedingung angeben, ob es sich um das Element handelt, das das Ereignis auslösen soll.

target

gibt das Element zurück, das das Ereignis ausgelöst hat.

Syntax: event.taget;

window.onload = function(){
     var ul = document.getElementById('ul1');
     ul.onclick = Funktion(Ereignis){
         if(event.target.className == 'abq'){
             alarm('Ereignis ausgelöst!!')
         } 
     }
     //Hyperlink hinzufügen document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Neues Tag</a>";
         ul.appendChild(li);
     }
 }

Binden Sie Ereignisse über addEventListener().

Mit dieser Methode können Sie mehrere identische Ereignisantwortfunktionen an dasselbe Element binden.

• Parameter:

1. Die Zeichenfolge des Ereignisses
2. . Diese Funktion wird aufgerufen, wenn das Ereignis
3. in der Erfassungsphase ausgelöst wird. Der Standardwert ist „false
“

. Um dasselbe Ereignis gleichzeitig an ein Element zu binden, definieren Sie mehrere Antwortfunktionen, sodass beim Auslösen des Ereignisses die Antwortfunktionen in der Reihenfolge ausgeführt werden, in der die Funktionen gebunden sind!

window.onload = function(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('click',function(){
        Alert('Der erste Klick auf die entsprechende Funktion wurde ausgelöst!')
    },FALSCH);
    bt.addEventListener('click',function(){
        Alert('Der zweite Klick der entsprechenden Funktion wurde ausgelöst!')
    },FALSCH);
    bt.addEventListener('click',function(){
        Alert('Der dritte Klick hat die entsprechende Funktion ausgelöst!')
    }, false);}

Verbreitung von Ereignissen

• Netscape und Microsoft haben unterschiedliche Auffassungen von der Verbreitung von Ereignissen:
  Microsoft ist der Ansicht, dass Ereignisse von innen nach außen weitergegeben werden sollten, d in der Sprudelphase ausgeführt werden.
  Netscape ist der Ansicht, dass Ereignisse von außen nach innen weitergegeben werden sollten. Das heißt, wenn das aktuelle Ereignis ausgelöst wird, sollte zuerst das Ereignis des äußersten Vorgängerelements des aktuellen Elements ausgelöst und dann nach innen an die untergeordneten Elemente weitergegeben werden.
• W3C kombiniert die Lösungen der beiden Unternehmen und unterteilt die Ereignisweitergabe in drei Phasen:

1. die Erfassungsphase. In der Erfassungsphase werden Ereignisse vom äußersten Vorfahrenelement bis zum Zielelement erfasst, aber standardmäßig wird das Ereignis zu diesem Zeitpunkt nicht ausgelöst .
2. Das Zielphasenereignis erfasst das Zielelement, und die Erfassung endet und beginnt mit der Auslösung von Ereignissen auf dem Zielelement.
3. Das Bubbling-Phase-Ereignis wird vom Zielelement an seine Vorfahrenelemente weitergegeben, wodurch wiederum Ereignisse auf den Vorfahrenelementen ausgelöst werden.

Die Antwortfunktion wird während der Sprudelphase ausgeführt. Der standardmäßige dritte Parameter ist false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alarm('box1');
     },FALSCH);
     box2.addEventListener('click',function(){
         alarm('box2');
     },FALSCH);
     box3.addEventListener('click',function(){
         alarm('box3');
     },FALSCH);
 }

Wenn Sie das Ereignis während der Erfassungsphase auslösen möchten, können Sie den dritten Parameter von addEventListener() auf true setzen!

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alarm('box1');
     },WAHR);
     box2.addEventListener('click',function(){
         alarm('box2');
     },WAHR);
     box3.addEventListener('click',function(){
         alarm('box3');
     },WAHR);
 }