DOM系列:DOM事件的传播

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

通过前面的DOM事件模型事件绑定的姿势两节的学习,我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。

事件传播

让我们从事件传播开始。事件传播是事件冒泡事件捕获的总称。先来看一张图,这张图在前面的文章中有也出现过,但没有深入的介绍。先上图吧!

W3C规范中定义了三个事件阶段,依次是捕获阶段目标阶段冒泡阶段。事件对象按照上图的传播路径依次完成这些阶段。如果某个阶段不支持或事件对象的传播被终止,那么该阶段就会被跳过。详细的阐述,我们后面会通过示例来向大家描述,这样会更易于理解。这里先来了解这三个事件阶段的概念:

  • 捕获阶段:在事件对象到达事件目标之前,事件对象必须从window经过目标的祖先节点传播到事件目标。这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件
  • 目标阶段:事件对象到达其事件目标。这个阶段被我们称为目标阶段。一旦事件对象到达事件目标,该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播
  • 冒泡阶段:事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理

理解概念总是很累的。为了更好的了解事件及其工作细节,我们来创建一个简单的示例,通过示例来帮助我们理解事件的工作细节,比如前面提到的事件传播。

先来创建示例所需要的HTML结构:

<body id="theBody" class="item">
    <div id="one_a" class="item">
        <div id="two" class="item">
            <div id="three_a" class="item">
                <button id="buttonOne" class="item">one</button>
            </div>
            <div id="three_b" class="item">
                <button id="buttonTwo" class="item">two</button>
                <button id="buttonThree" class="item">three</button>
            </div>
        </div>
    </div>
    <div id="one_b" class="item">

    </div>
</body>

正如你所看到的,这里没有什么特别之处。HTML结构很简单,我们用前面学到的知识,把上面的HTML结构用DOM树描绘出来,将会像下面这样:

假设我们点击了buttonOne元素。从前面学到的知识中我们知道,这将会触发一个click事件。click事件实际上并不源于你与之交互的元素。因为事件会从你的文档开始:

从根开始,事件从上一级一级往下,并在触发事件的元素buttonOne(事件目标)处停止:

如图所示,click事件所采用的路径是直接的,他会通知该路径中的每个元素。这也意味着,你要监听bodyone_atwothree_a上的click事件,也就会触发相关的事件处理程序。这是一个很重要的细节。稍后我们再详细来介绍。

现在,一旦你的事件达到目标,它就不会停止。它会重新追溯它的步骤,回到根源:

就像以前一样,在事件向上移动时,事件路径上的每个元素都会被通知它的存在。

其实这两个过程,前者通常被称为事件捕获,而后者被称为事件冒泡。接下来我们来聊聊事件捕获和事件冒泡的一些细节。

事件捕获

有一个细节我们需要注意,在DOM中启动事件的位置并不重要。因为事件始终从根开始,沿着路径直到达到目标,然后再重新追溯根源,然后回到根。而其中启动事件的部分和事件从根向下阻止DOM称为事件捕获阶段:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/event-capturing-bubbling-javascript.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部