js 事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

wyw223

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量85

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wyw223/article/details/86619416

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理, 下面举例说明：

传统的事件会为每个dom添加事件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>传统的事件绑定</title>
</head>

<body>
    <ul id="color-list">
        <li>red</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
        <li>blue</li>
        <li>indigo</li>
        <li>purple</li>
    </ul>
</body>
<script>
(function() {
    var colorList = document.getElementById("color-list");
    var colors = colorList.getElementsByTagName("li");
    for (var i = 0; i < colors.length; i++) {
        colors[i].addEventListener('click', showColor, false);
    };

    function showColor(e) {
        e = e || window.event;
        var targetElement = e.target || e.srcElement;
        console.log(targetElement.innerHTML);
    }
})();
</script>
</script>

</html>

事件代理的处理方式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>传统的事件绑定</title>
</head>

<body>
    <ul id="color-list">
        <li>red</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
        <li>blue</li>
        <li>indigo</li>
        <li>purple</li>
    </ul>
    <script>
    (function() {
        var colorList = document.getElementById("color-list");
        colorList.addEventListener('click', showColor, false);

        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target || e.srcElement;
            if (targetElement.nodeName.toLowerCase() === "li") {
                alert(targetElement.innerHTML);
            }
        }
    })();
    </script>
</body>

</html>

使用事件代理的好处：
1.将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。

2.DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

wyw223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件委托

传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理, 下面举例说明：传统的事件会为每个dom添...
复制链接

扫一扫

专栏目录