Home > Article > Web Front-end > Why does the same event trigger bubbling twice?
Why does the same event trigger bubbling twice?
- WBOYOriginal
- 2024-02-19 22:34:07721browse
Why does the same bubbling event happen twice?
Event bubbling is a common event delivery mechanism in browsers. When an element triggers an event, the event will be passed from the triggered element to the upper elements in sequence until it is passed to the root element of the document. This process is like bubbles bubbling in water, so it is called event bubbling.
However, sometimes we find that the same bubbling event occurs twice. Why is this? There are two main reasons: event registration and event processing.
First of all, we need to make it clear that event registration refers to binding an event to an element. In common web development, we usually use the addEventListener() method to add event listeners to elements. When we use this method to add event listeners to elements, duplication sometimes occurs. For example:
var element = document.getElementById('myElement');
element.addEventListener('click', function() {
console.log('事件冒泡');
});In the above code, we add a click event listener to an element named "myElement". However, if we call the addEventListener() method multiple times in the code and add the same type of event listener to the same element, then each call will add a new listener, causing the same event to occur multiple times. Bubble.
Secondly, event handling refers to the code that is executed after the event is triggered. During event delivery, when an event is passed from a child element to a parent element, the corresponding event handler on the parent element is triggered. However, sometimes we accidentally trigger the same type of event for a child element again in the parent element's event handler, causing the same event to bubble up twice.
The following code example will illustrate the above two situations:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="parentElement">
<div id="childElement">点击我</div>
</div>
<script>
var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');
parentElement.addEventListener('click', function() {
console.log('父元素的事件处理程序');
childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
});
childElement.addEventListener('click', function() {
console.log('子元素的事件处理程序');
});
</script>
</body>
</html>In the above code, we added click event listeners to the parent element and child element respectively. When the parent element clicks When the event is triggered, the "event handler of the parent element" will be printed out and the click event of the child element will be triggered, causing the click event of the child element to be triggered again and the "event handler of the child element" will be printed out. In this way, the same event bubbles up twice.
In order to avoid event bubbling from happening twice, we can add a judgment condition in the event handler of the parent element, and only trigger the corresponding event of the child element if the condition is met, thereby avoiding repeated bubbling. .
To sum up, the reason why the same event bubbles up twice is mainly due to repeated operations in event registration and event processing. We can avoid repeated bubbling by optimizing event registration and adding conditional judgments.
The above is the detailed content of Why does the same event trigger bubbling twice?. For more information, please follow other related articles on the PHP Chinese website!