JavaScript 事件委托(event delegation)

事件委托 是将事件监听添加到父元素,而不是每个子元素单独设置监听器,当触发子元素时,事件会冒泡到父元素,监听器就会触发。

这种技术的好处是:

  • 内存占用少,因为只需要一个父元素的事件处理程序,而无需为每个后代元素都设置事件处理程序。
  • 无需从已删除的元素中解绑处理程序,也无需为新元素绑定处理程序。

例子1:

<ul id="parent-list">
                <li id="post-1">Item 1</li>
                <li id="post-2">Item 2</li>
                <li id="post-3">Item 3</li>
                <li id="post-4">Item 4</li>
                <li id="post-5">Item 5</li>
</ul>
<script>
            document.getElementById("parent-list").addEventListener("click",function(e){
                //e.target 是点击的元素
                if(e.target && e.target.nodeName == "LI"){
                //找到元素,输出Id
                    console.log("List item ",e.target.id.replace("post-","")," was clicked!");
                }
            });
</script>

运行结果:

例子2:

    <div id="myDiv">
        <p>first child</p>
        <a class="classA">second child</a>
        <div>third child</div>
        </div>
<script>
            document.getElementById("myDiv").addEventListener("click",function(e){
                if(e.target && e.target.matches("a.classA")){
                    console.log("Anchor element clicked!");
                }
            })
<script>

运行结果:
这里写图片描述

参考:(https://davidwalsh.name/event-delegate)

阅读更多
版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79957465
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭