element.addEventListener(event, function, useCapture)
addEventListener
有三个参数,大多数人一般只用到了两个参数
- 第一个参数
event
指定事件名。 - 第二个参数
function
指定要事件触发时执行的函数。 - 第三个参数
useCapture
,true——事件句柄在捕获阶段执行;false——默认值。事件句柄在冒泡阶段执行
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/0f3c43818e6346898f6dca08000c6a7c.jpg)
文章图片
事件捕获过程和冒泡过程如上图所示,传递方式分别是由上而下和由下而上。根据图示,可以写个demo来验证这个问题,
addEventListener
第三个参数设置为true![html的事件的捕获和冒泡](https://img.it610.com/image/info9/d05f050bbb414f77baf0cdeaf29b55dc.png)
文章图片
level-1为div标签,level-2为p标签,level-3为span标签
绑定事件,测试代码如下
const levelOne = document.getElementById("levelOne");
const levelTwo = document.getElementById("levelTwo");
const levelThree = document.getElementById("levelThree");
window.addEventListener(
"click",
function (e) {
console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
},
true
);
levelOne.addEventListener(
"click",
function (e) {
console.log("levelOne 捕获", e.target.nodeName, e.currentTarget.nodeName);
},
true
);
levelTwo.addEventListener(
"click",
function (e) {
console.log("levelTwo 捕获", e.target.nodeName, e.currentTarget.nodeName);
},
true
);
levelThree.addEventListener(
"click",
function (e) {
console.log("levelThree 捕获", e.target.nodeName, e.currentTarget.nodeName);
},
true
);
其中
e.target.nodeName
指当前点击的元素,e.currentTarget.nodeName
为绑定监听事件的元素console.log("levelThree 捕获", e.target.nodeName, e.currentTarget.nodeName);
当点击最里层SPAN标签时,打印如下
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/526f132cdf0b49ceab4698ea41f00914.png)
文章图片
最先捕获的是
window
,输出 e.target.nodeName
为SPAN,window没有标签属性,e.currentTarget.nodeName
为undefined下面levelOne到levelThree依次捕获,
e.target.nodeName
输出都为点击的SPAN标签,为大小,e.currentTarget.nodeName
为绑定监听事件的元素由此可见,捕获阶段从上往下传递
【html的事件的捕获和冒泡】冒泡事件
代码修改一下,第三个参数改为false。
当点击最内层SPAN标签时,打印顺序如下
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/df2c73329cb642998c29b752a7a746ea.png)
文章图片
当点击levelTwo时,这时最内层的SPAN标签没有捕获到冒泡事件。
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/0326b13d605f419a946d5086b694d448.png)
文章图片
stopPropagation
stopPropagation() 方法防止调用相同事件的传播。
当有需求,希望事件停止传播或有额外操作时,可以在事件捕获阶段进行拦截,比如点击最内层span标签时,如果我在levelOne就对事件进行了拦截,事件将不会继续乡下传递
levelOne.addEventListener(
"click",
function (e) {
e.stopPropagation()
console.log("levelOne 捕获", e.target.nodeName, e.currentTarget.nodeName);
},
true
);
打印如下
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/c1600c985c9542a19edf8794f931ce1c.png)
文章图片
preventDefault
preventDefault() 阻止默认行为
内层span标签有个a标签,链接用于跳转百度首页。添加阻止默认行为代码后
aHref.addEventListener("click", function (e) {
e.preventDefault();
});
点击a标签,控制台只打印了捕获和冒泡事件的打印
![html的事件的捕获和冒泡](https://img.it610.com/image/info9/ee516654b1874347a637c579c7fc34ab.png)
文章图片