事件流
当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播, 这个过程称之为事件流。【当页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程称为事件流。】
事件捕获 和 事件冒泡
target.addEventListener(事件类型, 回调函数, 是否捕获)
参数3:
(1)false(默认)
,在冒泡阶段完成事件处理。
(2)true
,在捕获阶段完成事件处理。
示例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>
示例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===");
});
示例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===");
});
示例4 阻止事件冒泡
son.addEventListener("click", function (e) {
console.log("===click son===");
e.stopPropagation();
});