事件委托

最新推荐文章于 2023-11-24 20:30:00 发布

ruantianqing

最新推荐文章于 2023-11-24 20:30:00 发布

阅读量1k

点赞数 3

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/ruantianqing/article/details/112809054

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件委托

对于每一个元素我们都要绑定一个事件，这样对于资源开销很大，对于每一个类元素都要for循环遍历一次，开发成本高，所以可以用事件委托来解决上面的问题
事件委托：将所有元素的事件绑定委托给同一个父元素，根据事件冒泡捕获机制，可以在父元素绑定事件中获取的触发事件的这个元素，根据这个元素具有的某类特征（例如元素名称，元素id，元素类，元素属性等待）做不同的处理，实现事件从父元素到被委托的元素传递，其特点：
减少事件数量
预言未来元素：新增的元素也可以绑定事件
避免内存外泄：通常创建一个对象需要占用一些内存，这类占用是有意义的；有时候一些垃圾（已经被删除的数据）还占用着内存，这部分内存对我们来说是没用的，就是外泄内存

<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 p = document.querySelectorAll('p');
        // for ( var i = 0; i < p.length; i++) {
        //     p[i].onclick = function() {
        //         this.style.backgroundColor = 'pink';
        //     }
        // }


        // 利用事件委托，减少事件数量 
        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>

ruantianqing

关注

3
点赞
踩
8

收藏

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

事件委托对于每一个元素我们都要绑定一个事件，这样对于资源开销很大，对于每一个类元素都要for循环遍历一次，开发成本高，所以可以用事件委托来解决上面的问题事件委托：将所有元素的事件绑定委托给同一个父元素，根据事件冒泡捕获机制，可以在父元素绑定事件中获取的触发事件的这个元素，根据这个元素具有的某类特征（例如元素名称，元素id，元素类，元素属性等待）做不同的处理，实现事件从父元素到被委托的元素传递，其特点：减少事件数量预言未来元素：新增的元素也可以绑定事件避免内存外泄：通常创建一个对象需要占用一些内存
复制链接

扫一扫