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:
2. Application of event bubbling
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.
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.
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!