DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托

最新推荐文章于 2022-07-22 20:05:04 发布

Stephy_Yy

最新推荐文章于 2022-07-22 20:05:04 发布

阅读量156

点赞数

分类专栏：系统学习 # DOM

本文链接：https://blog.csdn.net/weixin_43503511/article/details/117726930

版权

系统学习同时被 2 个专栏收录

112 篇文章 1 订阅

订阅专栏

DOM

15 篇文章 1 订阅

订阅专栏

本文介绍了事件流的含义、分类及其三个阶段，包括事件捕获、目标和冒泡阶段。详细讨论了DOM2级事件中`addEventListener`和`removeEventListener`的使用，以及在不同浏览器环境下事件对象的获取方式。事件源对象在不同浏览器中的差异，如`srcElement`和`target`。重点讲述了事件委托的概念，通过给父元素绑定事件来简化子元素事件处理，利用事件冒泡机制实现功能。并提醒在实际应用中注意事件源判断的细节问题。

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

事件流

1. 含义

描述从页面中接收事件的顺序

2. 分类

IE提出的事件冒泡流 Event Bubbling
Netscape提出的事件捕获流 Event Capturing

3. 阶段

事件捕获阶段
处于目标阶段
事件冒泡阶段
事件捕获先于事件冒泡执行

dom

dom0：定义句柄方式，兼容性最好
dom1：没有事件相关定义
dom2：addEventListener / removeEventListener W3C规范

事件对象e / window.event

1. W3C标准

e：事件触发后的详细信息，传到事件处理函数的参数里
是由MouseEvent构造函数构造的

在这里插入图片描述

2. IE

作为window的属性：window.event，不再传到事件处理函数的参数里

事件源（对象）

在事件对象里可获取到srcElement和target：事件源对象
火狐只有target
IE只有srcElement
chrome都有
【兼容】

在这里插入图片描述

oDiv.onclick = function (e) {
    var e = e || window.event,
        tar = e.target || e.srcElement
}

事件委托/事件代理

并不直接给子元素绑定事件，而给父元素绑定（免去了给子元素循环绑定事件的不便）
因为子元素被点击后会冒泡给父级
判断下事件源tar.tagName.toLowerCase() === 'xxx' 则执行相应…

在这里插入图片描述

获取下标

循环比较获得下标

oList.onclick = function (e) {
    var e = e || window.event,
        tar = e.target || e.srcElement;
    for (var i = 0; i < len; i++) {
        item = oLi[i];
        if (tar === item) {
            console.log(i);
        }
    }
}

数组方法查找下标【企业级写法】
注意：todoList案例，不能这样判断添加项和现有项是否重复，因为li是引用值

oList.onclick = function (e) {
    var e = e || window.event,
        tar = e.target || e.srcElement
    var index = Array.prototype.indexOf.call(oLi, tar);
    console.log(index);
}

自定义属性

<body>
    <ul class="test">
        <li data-index="0">1</li>
        <li data-index="1">2</li>
        <li data-index="2">3</li>
        <li data-index="3">4</li>
        <li data-index="4">5</li>
        <li data-index="5">6</li>
    </ul>
    <script>
        var oUl = document.getElementsByClassName('test')[0]
        oUl.onclick = function (e) {
            var e = e || window.e
            var tar = e.target || e.srcElement
            console.log(e)
            console.log(tar)
            console.log(Number(tar.getAttribute('data-index')))
        }
    </script>
</body>

Stephy_Yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托

事件流1. 含义描述从页面中接收事件的顺序2. 分类IE提出的事件冒泡流 Event BubblingNetscape提出的事件捕获流 Event Capturing3. 阶段事件捕获阶段处于目标阶段事件冒泡阶段事件捕获先于事件冒泡执行domdom0：定义句柄方式，兼容性最好dom1：没有事件相关定义dom2：addEventListener / removeEventListener W3C规范事件对象e / window.event1
复制链接

扫一扫

专栏目录