JavaScript事件委托（事件代理）

最新推荐文章于 2024-08-23 20:55:13 发布

softly顾先生

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量219

点赞数

文章标签： javascript js 面试

本文链接：https://blog.csdn.net/weixin_49639325/article/details/117451016

版权

事件委托，别称事件代理。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

首先我们不用事件委托给一个列表的列表项绑定点击事件

<body>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
    </ul>
</body>

<script>
    // 不利用事件委托完成给一个列表绑定事件
    window.onload = function() {
        var ul = document.getElementById('ul');
        var liArr = ul.getElementByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            lisArr[i].onclick = function () {
                alert('绑定了！');
            }
        }
    }
</script>

这种方法会给每个li都注册事件，如果有更多li，甚至成百上千个li，这就会导致内存消耗大，性能下降

结合事件冒泡来做事件委托，在父元素上绑定一次事件，子元素所有点击均可触发

// 结合事件委托完成列表绑定事件
    window.onload = function(){
        var ul = document.getElementById('ul');
        ul.onclick = function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if (target.nodeName.toLowerCase === 'li') {
                alert(绑定了);
            }
        }
    }

如果需要对子元素的点击做不同回调，只需添加属性然后在代码中判断就可以了

softly顾先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件委托（事件代理）

事件委托，别称事件代理。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。<body>  <ul class="ul"> <li>1</li> <li>2</li> </ul></body><script> // 不利用事件委托完成
复制链接

扫一扫