Analyze the mechanism and use of event bubbling

Event bubbling is an event delivery mechanism often used in front-end development. In this article, we will explain in detail the principles and applications of event bubbling, and provide code examples to help readers better understand.

1. The principle of event bubbling
Event bubbling means that when an event on an element is triggered, it will be passed to the upper elements step by step until the root element. In other words, events are passed starting with the most specific element and progressing to more general elements.

The principle of event bubbling can be boiled down to the following points:

1. The event is passed from the child element to the parent element, all the way to the root element.
2. The events of the child element will be passed to its parent element, and then to the parent element one level above, until the root element.
3. During the event delivery process, if the parent elements of each layer are bound to the same event handlers, then these event handlers will be called.

2. Application of event bubbling

1. Simplified event binding: By using the event bubbling mechanism, we can bind the event handler to the parent element, This reduces the need to bind events to multiple sub-elements respectively. This approach can improve the maintainability and execution efficiency of the code.

For example, we have a parent element div that contains multiple child element buttons, and each button has the same click event handler. If we use event bubbling, we only need to bind an event to the parent element div, as shown below:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log(e.target.innerHTML + '被点击了');
});
</script>

In the above code, we bind a click event handler to the parent element div . When a child element button is clicked, the event bubbles up to the parent element div and triggers the parent element's event handler. By printing the target attribute of the event object, we can get the specific clicked button.

2. Event delegation: Event delegation is a common technology that uses the event bubbling mechanism to handle dynamically added elements. By binding event handlers to parent elements, corresponding events can be triggered on dynamically added child elements.

For example, we dynamically added a new button button in the previous example as follows:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'button') {
    console.log(e.target.innerHTML + '被点击了');
  }
});

var newButton = document.createElement('button');
newButton.innerHTML = '新按钮';
parentElement.appendChild(newButton);
</script>

In the above code, we bind on the parent element div A click event handler is created to filter out elements that do not need to be processed by determining whether the target element triggered by the event is a button. This way we can handle click events for dynamically added elements without having to bind separate events for each newly added element.

3. Stop propagation of events: By calling the stopPropagation() method of the event object in the event handler, you can stop the continued propagation of the event.

For example, we bind a click event to the child element button and call the stopPropagation() method in the event handler, as shown below:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    console.log(e.target.innerHTML + '被点击了');
    e.stopPropagation();
  });
}

var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log('父元素被点击了');
});
</script>

In the above code, When the child element button is clicked, the event will trigger the click event handler of the child element itself and call the stopPropagation() method to stop the event from continuing to be delivered. Therefore, the parent element's click event handler will not be fired.

Summary:
Event bubbling is a commonly used event delivery mechanism in front-end development, which can simplify event binding, implement event delegation, and control event delivery. By properly utilizing event bubbling, we can improve the maintainability and execution efficiency of our code.

The above is the detailed content of Analyze the mechanism and use of event bubbling. For more information, please follow other related articles on the PHP Chinese website!