Vue中的事件委托(事件代理)

事件委托（事件代理）

将原本需要绑定在子元素上的事件监听器委托在父元素上，让父元素充当事件监听的职务。

优点：

• 节省内存（dom与js的关联），减少事件的注册
• 增加子元素也无需再注册事件

缺点：

• 获取绑定的节点数据会相对麻烦一点

在日常开发中，很经常我们会遇到个问题，就是在长列表数据较多的时候，而又需要对子元素注册一些事件（如onClick）,就会造成比较大的内存开支，很耗费性能，也可能会造成页面卡顿等等；

所以可以通过在父元素上添加@click监听，而不是在子元素上注册事件；

如果数据量比较少，就可忽略不计；

vue事件委托，以及绑定节点传参

// html代码：
<div id="app">
    <div id="event-agent" @click="eventAgent">
        <!--获取节点参数 (data-index、data-name），则在 $event.target.dataset  { index: 'xxx', name: 'xxx' } 中取值 -->
        <p v-for="(item, index) in list" :key="index" :data-name="item.name" :data-index="index">{{item.name}}</p>
    </div>
</div>

// js代码
data() {
    return { 
         list: [
             { id: 1, name: 'kmj1'},
             { id: 2, name: 'kmj2'},
             { id: 3, name: 'kmj3'},
             { id: 4, name: 'kmj4'}
         ]   
    }
},
methods: { 
    // 事件委托
    eventAgent(e) {
       const target = e.target; 
       console.log(target )
       // 注意 e.target.nodeName 的元素名是大写的
       if (target  && target.nodeName === "P") {
           const dataset = target .dataset;
           console.log('$event.target.dataset : ' dataset ); // $event.target.dataset :  { name: 'xxx', index: 'xxx' }
       }
    }
}

原生的写法其实也差不多：

document.getElementById( "event-agent").onclick = function(event){ 
    // 兼容Ie的写法
    event = event || window.event;
    var  target = event.target || event.srcElement;  
    // 注意 e.target.nodeName 的元素名是大写的
    if (target  && target.nodeName === "P") {
       const dataset = target .dataset;
       console.log('$event.target.dataset : ' dataset ); // $event.target.dataset :  { name: 'xxx', index: 'xxx' }
    }
}; 

// 也可以用这种方式，其实都差不多的：
// 冒泡阶段处理程序  
document.getElementById( "event-agent").addEventListener( "click", (e) => {},   false);
// 捕获阶段处理程序
document.getElementById( "event-agent").addEventListener( "click", (e) => {},   true);