javascript中的事件代理

京城五

已于 2024-01-02 14:01:29 修改

阅读量349

点赞数 10

分类专栏：前端知识杂合文章标签： javascript 前端开发语言

于 2023-12-15 18:27:08 首次发布

本文链接：https://blog.csdn.net/weixin_43659550/article/details/135023266

版权

前端知识杂合专栏收录该内容

22 篇文章 0 订阅

订阅专栏

javascript中的事件代理

文章目录

javascript中的事件代理

一、事件代理是什么

简单来说就是把一个元素的响应事件（如：click，keydow等）的函数委托到另一个元素上。

二、应用场景

在一个有很多项的列表中，如果要给每一项都添加一个响应事件，对内存的消耗是很大的。事件委托可以把点击事件绑定在父级元素ul上，在执行的时候再去匹配目标元素。

<html>
    <div>
        <ul id="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            ......
            <li>item n</li>
        </ul>
    </div>
</html>

// 给父级元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
 // 兼容性处理
 var event = e || window.event;
 var target = event.target || event.srcElement;
 // 判断是否匹配目标元素
 if (target.nodeName.toLocaleLowerCase === 'li') {
 console.log('the content is: ', target.innerHTML);
 }
});

在列表项不多但是需要动态增删列表项的列表中，给每一项都绑定事件也可以用事件代理省去给新增项绑定事件和给待删项解绑事件的工作。

<input type="button" name="" id="btn" value=" " />
<ul id="ul1">
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

const oBtn = document.getElementById("btn");
const oUl = document.getElementById("ul1");
const num = 4;
//事件委托，添加的子元素也有事件
oUl.onclick = function (ev) {
    ev = ev || window.event;
    const target = ev.target || ev.srcElement;
    if (target.nodeName.toLowerCase() == 'li') {
        console.log('the content is: ', target.innerHTML);
    }
};
//添加新的节点
oBtn.onclick = function () {
    num++;
    const oLi = document.createElement('li');
    oLi.innerHTML = `item ${num}`;
    oUl.appendChild(oLi);
};

使用事件委托，在动态绑定事件的情况下可以减少很多重复工作。

三、总结

适合使用事件委托的有：click，mousedown，mouseup，keydown，keyup，keypress。

使用事件委托的优势有：

减少整个页面所需的内存，提升整体性能
动态绑定，减少重复工作

局限性：

focus，blur这些事件没有事件冒泡机制，无法进行事件绑定。
mousemove，mouseout这种事件有事件冒泡机制，但是通过不断计算位置去定位，对性能消耗很大，不适合用事件委托。

这些事件如果用事件代理，可能出现事件误判，在不该触发的元素上绑定了事件。

京城五

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
javascript中的事件代理

适合使用事件委托的有：click，mousedown，mouseup，keydown，keyup，keypress。坚守整个页面所需的内存，提升整体性能动态绑定，减少重复工作focus，blur这些事件没有事件冒泡机制，无法进行事件绑定。mousemove，mouseout这种事件有事件冒泡机制，但是通过不断计算位置去定位，对性能消耗很大，不适合用事件委托。这些事件如果用事件代理，可能出现事件误判，在不该触发的元素上绑定了事件。
复制链接

扫一扫

专栏目录