DOM 事件模型或 DOM 事件机制

weixin_41715020

于 2021-06-30 02:05:48 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/weixin_41715020/article/details/118349087

版权

本文详细介绍了DOM事件模型，包括事件流的捕获阶段和冒泡阶段，以及DOM2级事件处理。讨论了事件绑定的不同方式，如attachEvent、addEventListener，并解释了如何取消事件冒泡。同时，文章提到了DOM事件的不同级别，如DOM0级、DOM2级和DOM3级事件的特点和应用场景。

摘要由CSDN通过智能技术生成

一、DOM事件模型和事件流

    <div class="爷爷">
        <div class="爸爸">
            <div class="儿子">文字</div>
        </div>
    </div>

该示例中，爷爷>.爸爸>.儿子, 给3个div分别添加事件监听fnYe/fnBa/fnEr

1.点击文字时,那一个被点击

相当于都点击了儿子、爸爸、爷爷

2.调用顺序

IE5调用顺序为fnEr->fnBa->fnYe, 网景调用顺序为fnYe->fnBa->fnEr

3.W3C发布标准

文件名：DOM Level 2 Events Specification,

规定浏览器同时支持两种调用顺序.

首先按爷爷->爸爸->儿子顺序看有没有函数监听, 然后按儿子->爸爸->爷爷顺序看有没有函数监听.

4.事件捕获和事件冒泡

        一个事件发生后，会在子元素和父元素之间传播（propagation）。
        由外向内找监听函数, 叫事件监听.
        由内向外找监听函数, 叫事件冒泡.

其中文字(示例代码中)就是事件监听和事件冒泡的目标.因此DOM事件模型分为3个阶段:
（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段(示例代码中简化为: 爷爷->爸爸->儿子)；
（2）目标阶段：真正的目标节点正在处理事件的阶段࿱

关注