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事件实际上并不源于你与之交互的元素。因为事件会从你的文档开始:

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

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

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

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