DOM事件委托

最新推荐文章于 2022-05-24 22:55:26 发布

路飞小朋友

最新推荐文章于 2022-05-24 22:55:26 发布

阅读量124

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wozhangyi/article/details/107309477

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素。

比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：

<ul id="one">
    <li><a href="javascript:;">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
</ul>

当我们的鼠标移到<a>标签上的时候，需要获取此<a>的相关信息并飘出悬浮窗以显示详细信息，或者当某个<a>被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个<a>都绑定类似onMouseOver或者onClick之类的事件监听：

<body>
<button id="btn">添加</button>
<ul id="one">
    <li><a href="javascript:;">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
</ul>


<script>
    var ul = document.getElementById('one');
    var as = document.getElementsByTagName('a');
    var btn = document.getElementById('btn');

    for (var i=0; i<as.length; i++){
        as[i].onclick = function () {
            alert(this.innerText)
        };
    }

    btn.onclick = function () {
        var li = document.createElement('li');
        li.innerHTML = "<li><a href='#'>新链接</a></li>";
        ul.appendChild(li);
        li.onclick = function () {
            alert(this.innerText)
        };
    }
</script>
</body>

但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

<body>
<button id="btn">添加</button>
<ul id="one">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
</ul>

<script>
    var ul = document.getElementById('one');
    var btn = document.getElementById('btn');

    //将click单击事件绑定给父元素ul
    ul.onclick = function (event) {
        event = event || window.event;
        var res = event.target;
        alert(res.innerText)
    }

    btn.onclick = function () {
        var li = document.createElement('li');
        li.innerHTML = "<li><a href='#'>新链接</a></li>";
        ul.appendChild(li);
    }
</script>
</body>

上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。

总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。

事件委托的参考链接：

路飞小朋友

关注

0
点赞
踩
0

收藏

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

事件委托事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素。比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：<ul id="one"> <li><a href="javascript:;">链接1</a></li> <li><a href="#">链接2</a></li> <li><
复制链接

扫一扫

专栏目录