JavaScript中的事件冒泡与捕获

最新推荐文章于 2023-05-04 20:58:57 发布

木易一

最新推荐文章于 2023-05-04 20:58:57 发布

阅读量600

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43684713/article/details/86775635

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

DOM事件流

DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。
DOM标准同时支持捕获事件模型和冒泡事件模型，捕获事件模型先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束。

默认情况下，事件使用冒泡事件流。当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

什么是事件冒泡

当事件发生后，这个事件就要开始传播，从里到外，同时间进行传播

为什么要设置事件冒泡

当事件源本身没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

事件冒泡案例：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 400px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="block">
    <button class="btn">按钮</button>
</div>
<script>
    var count=0;
    var  b=document.getElementsByClassName("block")[0];
    var btn=document.getElementsByClassName("btn")[0];
    b.onmouseup=function(){
        count++;
        console.log(count);
    };
    btn.onmouseup=function(){
        count++;
        console.log(count);
        event.stopPropagation();//点击按钮时阻止事件的冒泡，否则点一次按钮count加2
    }
</script>
</body>
</html>

运行时，点击btn的父容器count会递增。

addEventListener()方法可以指定是使用事件捕获还是事件冒泡。上一篇博客中，addEventListener()参数表中最后一个useCapture就是用来指定事件传播方向。

true=捕获
false=冒泡

阻止事件冒泡的方法

事件的默认行为：浏览器存在自己的默认行为,默认行为是浏览器的默认初始值!有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的,需要人为去屏蔽浏览器的默认行为.例如全选页面内容,浏览器跳转到另外一个页面等都属于浏览器的默认行为.

event.stopPropagation();可以阻止事件的冒泡，但是不能阻止事件的默认行为；

event.preventDefault() 阻止事件的默认行为

在原生js里面 return false 不能阻止事件的冒泡，可以处理掉事件的默认行为。

木易一

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的事件冒泡与捕获

DOM事件流DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。 DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。 DOM标准同时支持捕获事件模型和冒泡事件模型，捕获事件模型先发生。两种事件流都会触发DOM中的所...
复制链接

扫一扫