js中什么是事件流

原创

admin 5天前阅读数 41 #Javascript

文章标签 Javascript

Javascript中的事件流

在Web开发中，事件流是描述从页面中接收事件的顺序的术语。具体来说，当在HTML文档中出现一个事件时，例如点击一个按钮，这个事件会在元素之间按照一定的顺序传递，这个传递过程就是事件流。

事件流的两种模型

在Javascript中，首要有两种事件流模型：冒泡事件流和捕获事件流。

1. 冒泡事件流

冒泡事件流是指事件从触发它的最深层节点开端，然后逐级向上传播到文档的根节点。大部分的事件会在DOM树中冒泡。例如，如果你在一个按钮上点击，这个点击事件首先在最内层的按钮元素上触发，然后会冒泡到它的父元素，接着是更上一层的元素，直到到达文档的根元素。


<div>
    <button>点击我</button>
</div>

在上面的HTML结构中，如果在

button元素

div元素

...（更多父级元素）

document对象

2. 捕获事件流

与冒泡相反，捕获事件流是从根节点开端，事件向下传播直到到达目标元素。不过，在默认情况下，大多数事件不会使用捕获事件流。然而，你可以通过将事件监听器的useCapture属性设置为true来监听捕获阶段的事件。

DOM事件流

实际上，DOM事件流包含了三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段：事件从文档根节点向下传播到目标元素的过程。

目标阶段：事件到达目标元素。

冒泡阶段：事件从目标元素上升回到文档根节点的过程。

事件处理示例

以下是一个在Javascript中处理事件冒泡的明了例子：


<div id="outer">
    <button id="inner">点击我</button>
</div>
<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click', function() {
        alert('外层div被点击');
    }, false);
    inner.addEventListener('click', function(event) {
        alert('内层button被点击');
        event.stopPropagation(); // 阻止事件冒泡
    }, false);
</script>