Practical application cases of event bubbling and event capturing in front-end development

Application cases of event bubbling and event capturing in front-end development

Event bubbling and event capturing are two event delivery mechanisms often used in front-end development . By understanding and applying these two mechanisms, we can handle interactive behaviors in the page more flexibly and improve user experience. This article will introduce the concepts of event bubbling and event capturing, and combine them with specific code examples to demonstrate their application cases in front-end development.

1. The concept of event bubbling and event capture

1. Event bubbling (Event Bubbling)

Event bubbling refers to triggering an element After an event, the event will bubble up to the parent element layer by layer until it is passed to the root element of the document (document). In other words, if an element triggers an event, the event will be processed in the parent element of the element, the parent element of the parent element, and all the way to the document root element.

2. Event Capturing

Event capturing is just the opposite of event bubbling. It means starting from the document root element and capturing events downward until the event is triggered. Elements. In other words, when an element triggers an event, the event will be captured starting from the document root element and then passed to the level where the element is located.

2. Application cases of event bubbling and event capture

1. Event Delegation

Event delegation is a method of monitoring events by The handler is bound to the parent element to proxy events for its descendant elements. By binding event listeners to parent elements, we do not need to add separate listeners for each descendant element, thereby improving performance and code maintainability. Under the event bubbling mechanism, we can intercept all triggered events and perform specific processing based on different trigger sources.

The HTML structure is as follows:

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

The JavaScript code is as follows:

var parent = document.getElementById('parent');

parent.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    console.log('你点击了按钮', e.target.innerHTML);
  }
});

In the above code, we bind the parent element #parent The click event listener is set. When the button is clicked, the event will bubble up to the parent element and trigger the callback function of the click event. Using the target attribute of the event object (e), we can obtain the trigger source element and process it accordingly.

2. Event Proxy

Event proxy is a method that intercepts events during the bubbling or capturing phase and prevents or modifies the delivery of events based on conditions. or process. Under the event capture mechanism, we can intercept events at a specific level and process them accordingly.

The HTML structure is as follows:

<div id="container">
  <div id="box1"></div>
  <div id="box2">
    <button>按钮</button>
  </div>
</div>

The JavaScript code is as follows:

var container = document.getElementById('container');

container.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    console.log('你点击了按钮');
    e.stopPropagation();
  }
});

In the above code, we bind the container element #container The click event listener is set. When the button is clicked, the event goes through the capture phase and the delegated event handler intercepts and handles the event. By calling the stopPropagation() method of the event object (e), we can prevent the event from continuing to bubble up.

3. Summary

Event bubbling and event capturing are very important concepts in front-end development. They can help us better handle interactive behaviors on the page. Through the introduction of the two application cases and specific code examples of event delegation and event proxy, we can understand and apply these two mechanisms more deeply and improve the performance and maintainability of the code. In actual projects, we can choose an appropriate event delivery mechanism based on specific needs and scenarios to achieve a better user experience.

The above is the detailed content of Practical application cases of event bubbling and event capturing in front-end development. For more information, please follow other related articles on the PHP Chinese website!