Bubbling and Capturing
JavaScript Event Bubbling and Capturing （JavaScript事件冒泡和捕获）
Introduction:
Introduction:
One of the key features of JavaScript is its event handling capability. Events are actions or occurrences that happen in the browser, such as a user clicking on a button or typing in a form field. Event handling involves writing code that responds to these events. （JavaScript的主要功能之一是其事件处理功能。事件是在浏览器中发生的操作或事件，例如用户单击按钮或键入表单字段。事件处理涉及编写响应这些事件的代码。）
JavaScript Event Bubbling and Capturing:
JavaScript Event Bubbling and Capturing:
Event bubbling and capturing are two different ways in which events can propagate through the DOM (Document Object Model) tree. In other words, they describe how the event travels from the target element to its parent and ancestor elements. （事件冒泡和捕获是事件可以通过DOM （文档对象模型）树传播的两种不同方式。换句话说，它们描述了事件如何从目标元素传播到其父元素和祖先元素。）
Event Bubbling: Event bubbling is the most common way events propagate through the DOM. When an event occurs on an element, it first triggers the event on the target element and then bubbles up to its parent and ancestor elements. This means that the event handlers on the parent and ancestor elements will also be triggered.
For example, consider the following HTML code:
<div class="parent">
<div class="child">
<button>Click me!</button>
</div>
</div>
Suppose we have attached click event listeners to both the parent and child elements:
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
parent.addEventListener('click', function() {
alert('Clicked on parent!');
});
child.addEventListener('click', function() {
alert('Clicked on child!');
});
Here’s the complete code that you can try and see the result:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
.parent {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.child {
background-color: #d9d9d9;
padding: 20px;
text-align: center;
}
button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button>Click me!</button>
</div>
</div>
<script>
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
parent.addEventListener("click", function () {
alert("Clicked on parent!");
});
child.addEventListener("click", function () {
alert("Clicked on child!");
});
</script>
</body>
</html>
If we click on the button element, the events will bubble up in the following order:
child -> parent
This means that both event handlers will be triggered, and we will see two alert messages, one for each element. （这意味着两个事件处理程序都将被触发，我们将看到两个警报消息，每个元素一个。）
Event Capturing: Event capturing is the opposite of event bubbling. When an event occurs on an element, it triggers the event on the target element’s ancestors first before reaching the target element. This means that the event handlers on the ancestor elements will be triggered first, followed by the target element’s event handler.
To use event capturing, we need to set the capture option to true when adding the event listener:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
.parent {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.child {
background-color: #d9d9d9;
padding: 20px;
text-align: center;
}
button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button>Click me!</button>
</div>
</div>
<script>
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
/** add true here **/
（/* *在此处添加为真* */）
parent.addEventListener(
（parent.addEventListener (）
"click",
（点击）
function () {
alert("Clicked on parent!");
},
true
);
child.addEventListener("click", function () {
alert("Clicked on child!");
});
</script>
</body>
</html>
If we click on the button element, the events will capture down in the following order:
parent -> child
This means that the capturing event handler will be triggered first, followed by the target element’s event handler. （这意味着捕获事件处理程序将首先被触发，然后是目标元素的事件处理程序。）
Summary:
Summary:
In summary, event bubbling and capturing are two different ways in which events can propagate through the DOM. Bubbling is the default behavior, where events first trigger on the target element and then bubble up to its parent and ancestor elements. Capturing, on the other hand, triggers events on the ancestor elements first before reaching the target element. By understanding the difference between event bubbling and capturing, we can write more effective event handling code that responds to user interactions in a more precise and efficient way.