事件冒泡和事件捕获理解

最新推荐文章于 2025-06-08 15:44:34 发布

A_NuoDaDa

最新推荐文章于 2025-06-08 15:44:34 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： DOM事件流事件冒泡事件捕获事件委托事件代理机制

本文链接：https://blog.youkuaiyun.com/A_NuoDaDa/article/details/82928748

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

问题：

什么是DOM事件流？事件流的三个阶段？什么是事件冒泡和事件捕获？事件冒泡和事件捕获怎么实现？事件冒泡和事件捕获的应用？

一、什么是DOM事件流？

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。（百度百科的解释，我觉得很清楚也很好理解）

二、dom事件流的三个阶段

从上面的解释我们可以知道，dom事件流分为：

1，事件捕获阶段；

2，事件目标阶段；

3，事件冒泡阶段；

dom事件流总是从事件捕获开始。

三、事件冒泡和事件捕获

1，事件冒泡

简单来说，就是事件从目标节点开始向外触发事件知道最终的父节点，自下而上；

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parent" style="width: 100px;height: 100px;background-color: blue">
    　　<div id="child" style="height: 50px;width: 50px; background-color: red" ></div>
</div>
</body>
<script>
    document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    })
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
    })
</script>

</html>

结果：

child事件被触发，child（先）
parent事件被触发，parent（后）

可以应用事件冒泡来处理事件委托（事件代理机制）：鼠标放到li上对应的li背景变灰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
</body>
<script>
    $("ul").on("mouseover",function(e){
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
    })
</script>
</html>

如果使用事件冒泡这样就不用遍历给每一个li标签添加事件，为ul添加事件之后可以提高性能，如果li是动态元素用原来的方式添加事件的话就需要重新添加事件。（注意上面的代码需要在head里面添加jQuery库）

阻止事件冒泡

事件冒泡过程，是可以被阻止的；防止事件冒泡而带来不必要的错误和困扰。
这个方法就是:stopPropagation()

<script>
      document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    })
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
        e.stopPropagation();
    })
</script>

2，事件捕获

事件捕获和事件冒泡刚好相反是事件流向外至内传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parent" style="width: 100px;height: 100px;background-color: blue">
    　　<div id="child" style="height: 50px;width: 50px; background-color: red" ></div>
</div>
</body>
<script>
      document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    },true)
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
    },true)
</script>
</html>

结果：

parent事件被触发，parent
child事件被触发，child

以上就是最近遇到的事件流的问题，参考了一些文章，做了一下自己的调整和总结；以后还会对文章进行更新的总结。

以下是参考文章：

彻底弄懂JS的事件冒泡和事件捕获

理解DOM事件流的三个阶段