JavaScript事件代理(Event Delegation)

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        随着Web应用交互日趋复杂,页面中的元素和事件也越来越多。为每个元素绑定事件监听器,这无疑会消耗大量内存资源。事件代理(Event Delegation)就是解决这个问题的重要技巧。它可以大幅优化事件处理性能,实现简化,是每一位Web开发者都应该掌握的高级技能。

        本文将详细介绍事件代理的原理、使用场景和实现方法。希望通过这个博客,可以帮助大家深入理解事件代理,并能够灵活地在实际项目中应用它。现在,就让我们开始学习事件代理技巧吧!

​

✨ 正文

        事件代理是一种高效处理元素事件的技术,其原理是将事件处理器添加到元素的父层上,而不是每个子元素本身。

什么是事件代理

        举个例子,如果要处理表格中的所有行的点击事件,你可以为每一行添加事件处理器,也可以只为表格添加一个处理器,然后判断事件目标是哪一行。后者的做法就是事件代理。

在处理程序中，我们获取 event.target 以查看事件实际发生的位置并进行处理。

让我们看一个示例 —— 反映中国古代哲学的 八卦图。

如下所示：

事件代理的优点

• 减少内存占用,不必为每个子元素添加事件处理函数。
• 可以处理动态添加的元素,无需再为新元素特别绑定事件。

事件代理的工作原理

事件代理的关键是借助事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

当事件在一个DOM元素上触发时,它会沿着祖先链一级一级地冒泡上去,直到 document 对象。

利用这一点,我们可以在祖先元素上设置事件监听函数,在函数内部判断事件来源,这样就实现了事件代理。

应用场景

• 菜单、选项卡等频繁添加、删除子元素的场景
• 列表、表格等需要区分操作不同子元素的场景
• 可滚动的容器中子元素过多的场景

实现示例

1. 列表项点击:

   // HTML
   
     
   Item 1
     
   Item 2
     
   Item 3
   
   
   // JS
   const list = document.getElementById('list');
   
   list.addEventListener('click',event => {
     if(event.target.tagName === 'LI') {
       // 处理 LI 的点击
     }
   });

2. 表格行点击:

   // HTML
   
     
   Row 1
     
   Row 2
     
   
   // JS
   const table = document.querySelector('table');
   
   table.addEventListener('click', event => {
     if(event.target.tagName === 'TR') {
       // 处理行点击
     }
   });

如何实现事件代理

核心是利用事件冒泡,给父元素添加事件监听器,然后通过event.target判断实际触发元素。

// HTML

 
Hello
 
World


// JS
table.addEventListener('click', e => {
 if(e.target.tagName == 'TD') {
  handler(e.target); 
 } 
})

这样通过给table绑定单个事件,就可以处理所有td的点击。

事件代理的示例

• 给ul添加点击处理器,处理所有li的点击
• 给整个页面添加键盘事件,判断按键并响应
• 为父容器添加滚动或鼠标移动监听,影响所有子元素

事件代理可以大幅优化事件处理性能,是非常值得掌握的技巧。

 

✨ 结语

     事件代理利用事件冒泡的特性,将事件处理器定义在父元素上,从而管理子元素的事件,这是非常高效的事件处理模式。在复杂的Web项目中,合理运用事件代理可以简化代码,提升性能,处理动态内容,是每一位 Web 开发者必须掌握的技能。

        本文详细介绍了事件代理的工作原理、优势以及应用场景,并给出了语法实现的示例。希望这篇博客可以帮助大家深入理解并应用事件代理,使Web应用的事件处理达到专业级的高度。如果有任何疑问,欢迎在评论区讨论。

  

​