js中事件委托

亦凉 2022-12-05 13:50 229阅读 0赞

`经典面试题`  
**一张图看懂事件委托**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

## 概念 ##

--------------------

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

## 好处: ##

--------------------

提高性能，减少了事件绑定，从而减少内存占用

## 案例1 ##

--------------------

需要点击每个a，来。弹出他们的内容

// 封装通用的事件绑定函数
    function bindEvent(elem, type, fn) { 
        elem.addEventListener(type, fn)
    }
    
    //获取父元素
    const fu = document.getElementById('div3')
    bindEvent(fu, 'click', function (event) { 
        // console.log(event.target) // 获取触发的元素
        let target=event.target
        event.preventDefault() // 阻止默认行为
        //过滤符合条件的子元素，主要是过滤掉 加载更多 
        if(target.nodeName.toLowerCase()==="A"){ 
            alert(target.innerHTML)
    
        }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
我们可以用事件委托的方式来实现这样的效果

*  这样我们就可以做到很多个a链接上的点击事件都添加到父元素div上。
 *  当然还要排除掉不参加事件委托的子元素。

## 应用场景 在vue中事件委托 ##

我们经常遇到vue中`v-for`一个列表，列表的每一项都绑定了`@click`处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现。  
![在这里插入图片描述][20200910171402992.png_pic_center]  
获取item元素中title值为edit的id

//html
    <table @click="edit">
      <tr v-for="item in list">
        <td>{ { item.name}}</td>
        ...
        <td>
          <button :data-id="item.id" title="eidt">编辑</button>
       </td>
      </tr>
    </table>
    
    
    //js
    edit (event){ 
        if(event.target.title == "edit"){  //如果点击到了edit 
            let id = evenr.target.dataset.id;
            //拿着id参数执行着相关的操作
            this.$router.push({ path:'/detail',query:{ id:id}})
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b0abc3b951294598ab79da8aeb4b0af2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/3a2db4b260544af4bf873fd12effeb75.png
[20200910171402992.png_pic_center]: /images/20221123/7f52f07380424bf682b127e1dbc4bdbf.png