Vue中的事件委托(事件代理)使用方法介绍

事件委托（事件代理）

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

事件委托是一种利用事件冒泡的特性，在父节点上响应事件，而不是在子节点上响应事件的技术。它能够改善性能，因为只需要在父元素上设置一次事件监听器，就可以管理同一类型的所有子元素的事件。

事件委托利用了事件冒泡的原理，即事件从最深的节点开始，逐步向上传播。在事件冒泡过程中，父元素会捕获到子元素的事件，并进行分析。通过查看event对象的属性，可以确定是哪个子元素的事件，从而执行相应的处理逻辑。

使用事件委托能够避免对每个子元素单独设置事件监听器，降低了与DOM交互的次数，提高了页面的整体运行性能。同时，事件委托也具有更高的灵活性和可维护性，不需要操作大量的DOM元素。

在Vue中，可以利用v-on指令或@符号来绑定事件监听器，并在父元素上设置事件委托。例如，可以在父元素上设置一个click事件监听器，然后在子元素上绑定一个click事件，通过事件委托实现父元素对子元素事件的响应。

优点：

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

缺点：

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

在日常开发中，很经常我们会遇到个问题，就是在长列表数据较多的时候，而又需要对子元素注册一些事件（如onClick）,就会造成比较大的内存开支，很耗费性能，也可能会造成页面卡顿等等；
所以可以通过在父元素上添加@click监听，而不是在子元素上注册事件；
如果数据量比较少，就可忽略不计；

html代码：

<div id="app"><div id="event-agent" @click="eventAgent"><p v-for="(item, index) in list" :key="index" :data-name="item.name" :data-index="index">{{item.name}}</p></div>
</div>

获取节点参数 (data-index、data-name），则在 $event.target.dataset { index: 'xxx', name: 'xxx' } 中取值

 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);