JavaScript入门之事件流及事件捕获

最新推荐文章于 2024-02-14 08:15:00 发布

YXGR

最新推荐文章于 2024-02-14 08:15:00 发布

阅读量153

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/weixin_42777688/article/details/90753890

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

JavaScript入门之事件流及事件捕获

什么是JS的事件流
事件捕获
- 事件捕获的例子
- 捕获和冒泡的优先级

什么是JS的事件流

当某个事件执行时(子元素和父元素都绑定了相同的事件)从子元素向父元素触发或者从父元素向子元素触发整个过程称为事件流
子元素向父元素触发称为事件的冒泡
父元素向子元素触发称为事件的捕获
当冒泡和捕获同时存在时会先触发事件捕获

事件捕获

当子元素和父元素都绑定了相同的事件时并且都设置了事件捕获时
事件捕获的执行顺序是先执行最外层父级的事件函数再往下执行
如果中间有元素未设置捕获则会跳过该元素继续往下执行知道执行到触发事件的元素
如果想设置事件捕获必须使用addEventListener这个方法去绑定事件

事件捕获的例子

CSS代码

#warp {
        width: 400px;
        height: 400px;
        background: skyblue;
        margin: 50px auto;
}

#box  {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: hotpink;
}

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="author" content="YXGR">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="warp"> <div id="box"> </div> </div>
</body>
</html>

JavaScript代码

var box = document.getElementById("box");
var warp = document.getElementById("warp");

warp.onclick = function (eve) {
    var e = eve || event;
    e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    alert(2);
}
box.addEventListener("click", function (eve) {
    var e = eve || event;
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    alert(1);
}, true);
document.addEventListener("click", function () {
    alert(3);
}, true);
//addEventListener第一个参数是事件名称第二个参数是事件处理函数第三个参数是设置捕获默认不传为false即不捕获
//当点击box的时候会先弹出3再弹出1不会弹出2因为warp并未设置捕获

捕获和冒泡的优先级

当冒泡和捕获同时存在时会先触发事件捕获
下面是JavaScript代码CSS和HTML和上面保持一致

var box = document.getElementById("box");
var warp = document.getElementById("warp");

warp.addEventListener("click", function () {
    alert(2)
}, true)
box.addEventListener("click", function () {
    alert(1)
}, true)
document.addEventListener("click", function () {
    alert(3)
}, true)
//上面是捕获下面是冒泡
warp.addEventListener("click", function () {
    alert(2)
})
box.addEventListener("click", function () {
    alert(1)
})
document.addEventListener("click", function () {
    alert(3)
})

//弹出的顺序为3 2 1 1 2 3