js事件委托

1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器

转载 2016年12月04日 23:54:55

Q:事件的委托(代理 Delegated Events)的原理以及优缺点

A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,

优点是:

(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒 

(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适

缺点是:

事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。

例子:


   Pencil  Pen  Eraser


var  toolbar = document.querySelector( ".toolbar" );
toolbar.addEventListener( "click" function (e) {
   var  button = e.target;
   if (!button.classList.contains( "active" ))
     button.classList.add( "active" );
   else
     button.classList.remove( "active" );
});


单击button元素会冒泡到UL.toolbar元素,使用了e.target来定位到当前点击的button。

Q:手写原生js实现事件代理,并要求兼容浏览器

A:其实就是考核对事件对象e的了解程度,以及在IE下对应的属性名。

查看Demo

// ============ 简单的事件委托
function  delegateEvent(interfaceEle, selector, type, fn) {

     if (interfaceEle.addEventListener){
     interfaceEle.addEventListener(type, eventfn);
     } else {
     interfaceEle.attachEvent( "on" +type, eventfn);
     }
     
     function  eventfn(e){
     var  e = e || window.event;    
     var  target = e.target || e.srcElement;
    //如果目标元素与选择器匹配则执行函数
     if  (matchSelector(target, selector)) {
             if (fn) {
 //将fn内部的this指向target(在此之前this都是指向的绑定事件的元素即interfaceEle)
                 fn.call(target, e); 
             }
         }
     }
}
/**
  * only support #id, tagName, .className
  * and it's simple single, no combination
  */
//比较函数:判断事件的作用目标是否与选择器匹配;匹配则返回true
function  matchSelector(ele, selector) {
     // 如果选择器为ID
     if  (selector.charAt(0) ===  "#" ) {            
         return  ele.id === selector.slice(1);   
     }
      //charAt(0),返回索引为0的字符
    //slice(a,b),从已有的数组或字符串返回从索引从a处开始,截取到索引b之前的子数组或子字符串;
     //如果选择器为Class
     if  (selector.charAt(0) ===  "." ) {
         return  ( " "  + ele.className +  " " ).indexOf( " "  + selector.slice(1) +  " " ) != -1;
     }
     // 如果选择器为tagName
     return  ele.tagName.toLowerCase() === selector.toLowerCase();
}
//toLowerCase()将字符串转换成小写
//调用
var  odiv = document.getElementById( "oDiv" );
delegateEvent(odiv, "a" , "click" , function (){
     alert( "1" );
})




<think>我们正在讨论JavaScript中的事件委托事件委托是一种利用事件冒泡机制的技术,将子元素的事件处理程序绑定到父元素上,从而减少事件处理程序的数量,提高性能,并支持动态添加的元素。 根据引用[1][2][3][4][5],事件委托的核心原理是事件冒泡:当子元素上发生事件时,事件会沿着DOM树向上传播(冒泡)到父元素。因此,我们可以在父元素上设置一个事件监听器,通过检查事件的`target`属性来判断事件源,从而执行相应的操作。 ### 事件委托的实现步骤: 1. **选择父元素**:选择一个共同的父元素(或祖先元素),该元素包含所有需要处理事件的子元素。 2. **绑定事件监听器**:在父元素上绑定事件监听器(例如`click`)。 3. **判断事件源**:在事件处理函数中,通过`event.target`获取实际触发事件的元素(即事件源)。 4. **执行操作**:根据事件源的不同,执行不同的操作。 ### 示例代码: 假设我们有一个无序列表`<ul>`,其中包含多个列表项`<li>`。我们希望点击每个列表项时,执行相同的操作(例如改变背景颜色)。使用事件委托,我们只需要在`<ul>`上绑定一个事件监听器。 #### HTML结构: ```html <ul id="myList"> <li>项目1</li> <li>项目2</li> <li>项目3</li> <!-- 动态添加的列表项也会自动拥有事件处理 --> </ul> ``` #### JavaScript代码: ```javascript // 获取父元素ul const list = document.getElementById('myList'); // 在父元素上绑定click事件 list.addEventListener('click', function(event) { // 检查事件源是否是li元素 if (event.target.tagName === 'LI') { // 执行操作:改变背景颜色 event.target.style.backgroundColor = 'lightblue'; } }); ``` ### 事件委托的优势: 1. **性能优化**:减少事件监听器的数量,避免为每个子元素单独绑定事件,节省内存[^1][^5]。 2. **动态元素支持**:自动为动态添加的子元素绑定事件,无需重新绑定[^1][^2]。 3. **代码简洁**:简化代码结构,提高可维护性[^1][^2]。 ### 注意事项: 1. **事件源判断**:需要准确判断事件源,避免误触发。可以使用`event.target`,也可以使用`event.currentTarget`(指向绑定事件的元素)和`event.target`(指向实际触发事件的元素)。 2. **事件冒泡**:如果子元素的事件被阻止冒泡(`event.stopPropagation()`),则事件委托将失效。 3. **事件类型**:事件委托适用于支持冒泡的事件(如`click`、`mousedown`、`keydown`等)。一些事件(如`focus`、`blur`)不支持冒泡,因此不能使用事件委托。 ### 更复杂的示例:多级嵌套 如果事件源是嵌套结构,比如在`<li>`内部还有`<span>`,那么点击`<span>`时,`event.target`就是`<span>`。这时,我们可以通过遍历父节点来找到目标元素。 #### HTML结构: ```html <ul id="myList"> <li><span>项目1</span></li> <li><span>项目2</span></li> <li><span>项目3</span></li> </ul> ``` #### JavaScript代码: ```javascript list.addEventListener('click', function(event) { let target = event.target; // 向上遍历直到找到li元素 while (target !== this) { if (target.tagName === 'LI') { // 执行操作 target.style.backgroundColor = 'lightblue'; break; } target = target.parentNode; } }); ``` 或者,使用`closest`方法(现代浏览器支持): ```javascript list.addEventListener('click', function(event) { const li = event.target.closest('li'); if (li) { li.style.backgroundColor = 'lightblue'; } }); ``` ### 总结: 事件委托是JavaScript中高效处理事件的重要技术,特别适用于动态内容和大规模元素。通过利用事件冒泡机制,将事件处理委托给父元素,可以显著提升性能并简化代码[^1][^2][^3][^4][^5]。 §§相关问题§§ 1. 事件委托在哪些情况下不适用? 2. 如何阻止事件冒泡?它会对事件委托产生什么影响? 3. 事件委托与直接绑定事件处理程序在性能上有什么差异? 4. 如何处理事件委托中的事件源是动态生成的情况?</think>### JavaScript 事件委托实现原理与示例 事件委托(Event Delegation)是一种利用**事件冒泡机制**的高效事件处理技术,其核心是将子元素的事件监听器绑定到父元素上[^1][^3][^4]。 #### 🔍 实现原理 1. **事件冒泡机制** 当子元素触发事件时,事件会沿着DOM树向上传播(冒泡)到父元素 ```mermaid graph LR A[子元素触发事件] --> B[事件向父元素冒泡] B --> C[父元素捕获事件] C --> D[通过event.target识别源元素] ``` 2. **关键要素** - `event.target`:获取实际触发事件的元素 - 父元素作为事件处理器 - 条件判断确定目标子元素 #### 💻 基础实现示例 ```html <ul id="parent-list"> <li data-action="save">保存</li> <li data-action="delete">删除</li> <li data-action="edit">编辑</li> </ul> <script> const parent = document.getElementById('parent-list'); parent.addEventListener('click', (event) => { // 1. 获取实际点击的元素 const clickedElement = event.target; // 2. 检查是否为LI元素 if(clickedElement.tagName === 'LI') { // 3. 获取自定义属性执行对应操作 const action = clickedElement.dataset.action; switch(action) { case 'save': console.log('执行保存操作'); break; case 'delete': console.log('执行删除操作'); break; case 'edit': console.log('执行编辑操作'); break; } } }); </script> ``` #### ⚡ 核心优势 1. **性能优化** 减少事件监听器数量,内存占用降低70%+(1000个元素只需1个监听器)[^1][^5] 2. **动态元素支持** 自动处理新增元素,无需重新绑定事件[^1][^2] ```javascript // 动态添加新元素仍可触发事件 const newItem = document.createElement('li'); newItem.textContent = '新建'; newItem.dataset.action = 'create'; parent.appendChild(newItem); ``` 3. **简化代码结构** 避免为每个子元素单独绑定事件[^4][^5] #### 🛠️ 高级应用技巧 1. **多级元素处理** 使用`closest()`方法处理嵌套结构: ```javascript parent.addEventListener('click', (event) => { const item = event.target.closest('[data-action]'); if(item) { console.log(`执行操作: ${item.dataset.action}`); } }); ``` 2. **事件过滤** 使用CSS选择器精确匹配目标元素: ```javascript parent.addEventListener('click', (event) => { if(event.target.matches('.btn.active')) { // 仅处理带有btn和active类的元素 } }); ``` 3. **性能关键点** ```javascript // 高效委托示例(10000个按钮) document.body.addEventListener('click', (event) => { if(event.target.classList.contains('action-btn')) { // 仅1个全局监听器处理所有按钮 } }); ``` #### ⚠️ 注意事项 1. 某些事件(如`focus`、`blur`)不冒泡,需使用`focusin`/`focusout`替代 2. 阻止冒泡(`stopPropagation()`)会使委托失效 3. 大型文档中应避免在`document`上绑定,选择最近的公共父元素 > 事件委托是处理动态内容和大型列表的最佳实践,可显著提升应用性能[^2][^3]。在React/Vue等框架中,原理相同但实现方式略有差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值