Dom事件流

最新推荐文章于 2024-09-05 23:28:05 发布

原创最新推荐文章于 2024-09-05 23:28:05 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了DOM事件流的概念，包括冒泡事件流与捕获事件流的工作原理，并通过实例展示了这两种事件流的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM同时支持两种事件模型:捕获型事件和冒泡型事件

如何理解捕获型事件和冒泡型事件这两种事件模型呢？我们可以先从概念入手：

冒泡事件流：当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

捕获事件流：事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

下面我们再通过一个示例来理解这两种事件模型：

HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title
</head>
<body>
    <div id="div1">
      <div id="div2">
        <div id="div3">

        </div>
      </div>
    </div>
</body>
</html>

CSS代码如下：

div{
display:inline-block;
}

#div1{
width:300px;
height:300px;
background-color:#aa2299;
}
#div2{
width:200px;
height:200px;
background-color:#22aa99;
}
#div3{
width:100px;
height:100px;
background-color:#2211aa;
}

JS代码（冒泡事件流）

当我们点击区域div3的时候，会一次弹出 “div3” “div2” “div1” 这里我们可以看到事件是从dom元素传播到它的根部。

JS代码（捕获事件流 ）

当我们点击div3的时候，会依次弹出 “div1” “div2” “div3” 这里我们可以看到事件是它的根部从传播到dom元素。