Welche Ereignisse unterstützen das Event-Bubbling?

Zu den Ereignissen, die das Ereignis-Bubbling unterstützen, gehören Mausereignisse, Tastaturereignisse, Formularereignisse, Fensterereignisse, Berührungsereignisse usw. Ausführliche Einführung: 1. Mausereignisse, Klicken, Doppelklick, Mousedown, Mouseup, Mousemove, Mouseover, Mouseout usw.; 2. Tastaturereignisse, Keydown, Keyup, Tastendruck usw.; Unschärfe usw.; 4 , Fensterereignisse usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Event-Bubbling ist eine gängige Methode zur Ereignisverbreitung in JavaScript. Wenn ein Ereignis auf einem Element ausgelöst wird, wird das Ereignis nicht nur auf diesem Element ausgelöst, sondern es entsteht auch eine Blase, die den Ereignishandler seines übergeordneten Elements auslöst. Dieser Bubbling-Mechanismus ermöglicht es uns, weniger Code zur Behandlung desselben Ereignisses zu verwenden, insbesondere wenn es um komplexe DOM-Strukturen geht.

Die meisten Browserereignisse unterstützen das Bubbling von Ereignissen, einschließlich:

1. Mausereignisse: Klicken, Doppelklick, Mausbewegung, Mausbewegung usw.;

2. Tastaturereignisse: Tastendruck, Tastendruck usw.

3. Formularereignisse: Senden, Ändern, Fokussieren usw.;

4. Fensterereignisse: Laden, Entladen, Scrollen usw.; usw. (Hinweis: Nicht alle Browser unterstützen alle Touch-Ereignisse).

Im Folgenden sind einige konkrete Beispiele aufgeführt:

// 鼠标事件冒泡  
document.getElementById("outer").addEventListener("click", function() {  
  console.log("outer clicked");  
});  
  
document.getElementById("inner").addEventListener("click", function() {  
  console.log("inner clicked");  
});  
  
// 键盘事件冒泡  
document.getElementById("outer").addEventListener("keydown", function() {  
  console.log("outer keydown");  
});  
  
document.getElementById("inner").addEventListener("keydown", function() {  
  console.log("inner keydown");  
});  
  
// 表单事件冒泡  
document.getElementById("outer").addEventListener("submit", function() {  
  console.log("outer submit");  
});  
  
document.getElementById("inner").addEventListener("submit", function() {  
  console.log("inner submit");  
});

Wenn im obigen Beispiel ein Klick oder Tastendruck auf das „innere“ Element erfolgt, werden die Ereignishandler des „inneren“ Elements und des „äußeren“ Elements ausgelöst. Dies ist der Effekt des Ereignissprudelns.

Das obige ist der detaillierte Inhalt vonWelche Ereignisse unterstützen das Event-Bubbling?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!