JavaScript中事件委托的简单理解

jenkin • • Javascript, 前端

事件委托可以让我们添加监听器到父元素上，来避免刷新数个子元素造成性能大量消耗

例：

 1 <body>
 2   <div id="container">
 3    <ul id="list">
 4      <li><a href="#">Item 1</a></li>
 5      <li><a href="#">Item 2</a></li>
 6      <li><a href="#">Item 3</a></li> 
 7      <li><a href="#">Item 4</a></li>
 8      ..................................
 9      <li><a href="#">Item 1000</a></li>
10    </ul>
11   </div>
12 </body>

 

如例，如果我们遍历每个 <a> 元素然后一个一个监听事件的话页面就会变得很卡。

event.target

事件委托：当事件冒泡到 body 元素，我们可以使用 event.target 来检查是哪个元素被点击了。

1 document.addEventListener("click", function(e) {
2   if(e.target && e.target.nodeName == "A") {
3   console.log("List item ", e.target.textContent, " was clicked!");
4   }
5 });
6 
7 // When we click the 2nd item, the page prints out:
8 
9 "List item Item 2 was clicked!"
如果在div标签上绑定一个click事件，那么div这个元素就是event.target，event就是click。

 

图源于书本《JavaScript高级程序设计》。

版权声明：
作者：jenkin
链接：https://blog.ijenkin.top/index.php/2022/02/13/sjwt/
来源：Jenkin
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录