Article directory
event flow
When an event occurs, it will be propagated in a specific order between the element node where the event occurred and the root node of the DOM tree. This process is called event flow. [When a page triggers an event, it will respond to the event in a certain order, and the event response process is called the event flow. 】
Event capture and event bubbling
target.addEventListener(event type, callback function, capture or not)
Parameter 3:
(1) false（默认）, the event processing is completed in the bubbling phase.
(2) true, the event processing is completed in the capture phase.
Example 1
<div id="grandpa">
<div id="parent">
<div id="son"></div>
</div>
</div>
<script>
var grandpa = document.getElementById("grandpa");
var parent = document.getElementById("parent");
var son = document.getElementById("son");
document.addEventListener("click", function (e) {
console.log("===click document===");
});
grandpa.addEventListener("click", function (e) {
console.log("===click grandpa===");
});
parent.addEventListener("click", function (e) {
console.log("===click parent===");
});
son.addEventListener("click", function (e) {
console.log("===click son===");
});
</script>
Example 2
document.addEventListener(
"click",
function (e) {
console.log("===click document===");
},
true // 在捕获阶段完成事件处理
);
grandpa.addEventListener(
"click",
function (e) {
console.log("===click grandpa===");
},
true // 在捕获阶段完成事件处理
);
parent.addEventListener("click", function (e) {
console.log("===click parent===");
});
son.addEventListener("click", function (e) {
console.log("===click son===");
});
Example 3
document.addEventListener("click", function (e) {
console.log("===click document===");
});
grandpa.addEventListener("click", function (e) {
console.log("===click grandpa===");
});
parent.addEventListener(
"click",
function (e) {
console.log("===click parent===");
},
true // 在捕获阶段完成事件处理
);
son.addEventListener("click", function (e) {
console.log("===click son===");
});
Example 4 prevent event bubbling
son.addEventListener("click", function (e) {
console.log("===click son===");
e.stopPropagation();
});
