Which events support event bubbling

Events that support event bubbling include mouse events, keyboard events, form events, window events, touch events, etc. Detailed introduction: 1. Mouse events, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, etc.; 2. Keyboard events, keydown, keyup, keypress, etc.; 3. Form events, submit, change, focus, blur, etc.; 4 , window events, etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

Event bubbling is a common event propagation method in JavaScript. When an event fires on an element, the event not only fires on that element, but also bubbles up, triggering the event handler of its parent element. This bubbling mechanism allows us to use less code to handle the same event, especially when dealing with complex DOM structures.

Most browser events support event bubbling, including:

1. Mouse events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, etc.;

2. Keyboard events: keydown, keyup, keypress, etc.;

3. Form events: submit, change, focus, blur, etc.;

4. Window events: load, unload , resize, scroll, etc.;

5. Touch events: touchstart, touchend, touchmove, etc. (note that not all browsers support all touch events).

The following are some specific examples:

// 鼠标事件冒泡  
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");  
});

In the above example, when a click or key press occurs on the "inner" element, the event handlers of the "inner" element and the "outer" element will be triggered. This is the effect of event bubbling.

The above is the detailed content of Which events support event bubbling. For more information, please follow other related articles on the PHP Chinese website!