使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]

最新推荐文章于 2022-04-29 16:52:01 发布

ECMAScripter

最新推荐文章于 2022-04-29 16:52:01 发布

阅读量770

点赞数 2

分类专栏：前端解决方案 JavaScript

本文链接：https://blog.csdn.net/Fabulous1111/article/details/79006675

版权

JavaScript 同时被 2 个专栏收录

79 篇文章 1 订阅

订阅专栏

前端解决方案

62 篇文章 3 订阅

订阅专栏

使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]

原理：

W3C将DOM2.0模型中事件处理流程分为三个阶段：

一、事件捕获阶段：

当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发

生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

二、事件目标阶段：

当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

三、事件起泡阶段：

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

IE及Opera（老版本的Opera）下，是不支持事件捕获的（）。而这个特点最明显体现在事件绑定函数上。

demo：使用事件委托实现点击li标签打印对应li的innerText，兼容IE

dom结构：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

JavaScript：

  // 兼容IE写法
    var ulElement = document.getElementsByTagName('ul')[0];
    if (ulElement.addEventListener) {
        ulElement.addEventListener('click', function (e) {
            if (e.target.nodeName.toLowerCase() == 'li') {
                console.log(e.target.innerText);
            }
        }, false)// false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。
    } else {
        // 兼容IE浏览器,需要注意的点有attachEvent, onclick, srcElement
        ulElement.attachEvent('onclick', function (e) {
            //IE没有e.target，有e.srcElement
            var target = e.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                console.log('IE下---' +target.nodeName.innerText);
            }
        })
    }

扩展：

阻止事件冒泡：e.stopPropagation() ||e.cancelBubble = true（后者适用IE，true为阻止冒泡）

阻止默认事件：e.preventDefault() || e.returnValue = false (后者适用IE，false为阻止默认事件)