事件委托(事件代理)
将原本需要绑定在子元素上的事件监听器委托在父元素上,让父元素充当事件监听的职务。
事件委托是一种利用事件冒泡的特性,在父节点上响应事件,而不是在子节点上响应事件的技术。它能够改善性能,因为只需要在父元素上设置一次事件监听器,就可以管理同一类型的所有子元素的事件。
事件委托利用了事件冒泡的原理,即事件从最深的节点开始,逐步向上传播。在事件冒泡过程中,父元素会捕获到子元素的事件,并进行分析。通过查看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);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/188445.html