事件委托

最新推荐文章于 2023-03-01 09:15:34 发布

郭郭郭牧鑫

最新推荐文章于 2023-03-01 09:15:34 发布

阅读量118

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_57750091/article/details/117434189

版权

什么是事件委托？

对于每一个元素我们都要绑定一个事件，这样对于资源开销很大，对于每一个类元素都要for循环遍历一次，开发成本高，所以可以用事件委托来解决上面的问题

事件委托是一种提高程序性能，降低内存空间的技术手段，它利用了事件冒泡的特性，只需要在某个祖先元素上注册一个事件，就能管理其所有后代元素上同一类型的事件。用一个例子来描述委托，先创建一个HTML文档，包含一个容器元素，通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件

事件委托的原理：

原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。

<body>
    <div>
        <p>1-1-1</p>
        <p>2-2-2</p>
        <p>3-3-3</p>
        <p>4-4-4</p>
        <p>5-5-5</p>
        <h1>1-1-1</h1>
        <h1>1-1-1</h1>
        <h1>1-1-1</h1>
        <p>6-6-6</p>
        <p>7-7-7</p>
        <p>8-8-8</p>
        <p>9-9-9</p>
        <p>10-10-10</p>
    </div>
    <script>

        // 利用事件委托，减少事件数量 
        var div = document.getElementsByTagName('div')[0];
        div.onclick = function(e) {
            var dom = e.target;
            if (dom.tagName.toUpperCase() === 'P') {
                dom.style.backgroundColor = 'red';
            } else if (dom.tagName.toUpperCase() === 'H1') {
                dom.style.backgroundColor = 'green';
            }
        }

        // 利用事件委托，可以预言未来元素，为新元素绑定事件
        // 创建一个新成员 新创建的元素也可以使用事件委托
        var newH1 = document.createElement('h1');
        newH1.innerHTML = '新的h1';
        div.appendChild(newH1);
    </script>

事件委托的好处：
1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出

郭郭郭牧鑫

关注

2
点赞
踩
1

收藏

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

事件委托是一种提高程序性能，降低内存空间的技术手段，它利用了事件冒泡的特性，只需要在某个祖先元素上注册一个事件，就能管理其所有后代元素上同一类型的事件。用一个例子来描述委托，先创建一个HTML文档，包含一个容器元素...
复制链接

扫一扫