Master the common event bubbling mechanism in JavaScript

Common bubbling events in JavaScript: To master the bubbling characteristics of common events, you need specific code examples

Introduction:
In JavaScript, event bubbling It means that the event will propagate from the element with the deepest nesting level to the outer element until it reaches the outermost parent element. Understanding and mastering common bubbling events can help us better handle user interaction and event handling. This article will introduce some common bubbling events and provide specific code examples to help readers better understand.

1. Click event (click):

Click event is the most common bubbling event. When the user clicks on an element on the page, the click event on the element will be triggered, and then propagated to the outer elements step by step until the click event of the outermost parent element is triggered.

HTML sample code:

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

JavaScript code:

document.getElementById('outer').addEventListener('click', function() {
  console.log('outer clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('inner clicked');
});

document.getElementById('btn').addEventListener('click', function() {
  console.log('button clicked');
});

When the button is clicked, the console will output the following results:

button clicked
inner clicked
outer clicked

2. Mouse Move event (mousemove):

Mouse move event is also a common bubbling event. When the user moves the mouse on the page, the mouse movement event will be propagated to the outer elements step by step.

HTML sample code:

<div id="outer">
  <div id="inner">
    <button id="btn">移动鼠标</button>
  </div>
</div>

JavaScript code:

document.getElementById('outer').addEventListener('mousemove', function() {
  console.log('outer mousemove');
});

document.getElementById('inner').addEventListener('mousemove', function() {
  console.log('inner mousemove');
});

document.getElementById('btn').addEventListener('mousemove', function() {
  console.log('button mousemove');
});

When the mouse moves over the button, the console will output the following results:

button mousemove
inner mousemove
outer mousemove

三, Keyboard press event (keydown):

Keyboard press event will also bubble up to the outer element. When the user presses any key on the keyboard on the page, the keyboard press event will be propagated to the outer elements step by step.

HTML sample code:

<div id="outer">
  <div id="inner">
    <input id="input" type="text" placeholder="按下键盘">
  </div>
</div>

JavaScript code:

document.getElementById('outer').addEventListener('keydown', function() {
  console.log('outer keydown');
});

document.getElementById('inner').addEventListener('keydown', function() {
  console.log('inner keydown');
});

document.getElementById('input').addEventListener('keydown', function() {
  console.log('input keydown');
});

When the keyboard is pressed in the input box, the console will output the following results:

input keydown
inner keydown
outer keydown

Conclusion:
Through the above examples of common bubbling events, we understand the application of event bubbling in JavaScript. Mastering event bubbling can help us better handle user interaction and event handling. It should be noted that some events will not bubble, such as focus events, form events, etc., but most common DOM events will bubble. During the development process, we should choose the appropriate event type for processing according to needs, and adjust the processing logic according to the event bubbling characteristics. We hope that through the introduction and sample code of this article, readers can better understand the concept of bubbling events and apply them to their own projects.

The above is the detailed content of Master the common event bubbling mechanism in JavaScript. For more information, please follow other related articles on the PHP Chinese website!