大型网站制作哪家好,锡盟建设工程造价管理站网站,万户网站做的怎样,北京市工程建设信息网官网事件委托#xff08;事件代理#xff09;
将原本需要绑定在子元素上的事件监听器委托在父元素上#xff0c;让父元素充当事件监听的职务。
事件委托是一种利用事件冒泡的特性#xff0c;在父节点上响应事件#xff0c;而不是在子节点上响应事件的技术。它能够改善性能事件代理
将原本需要绑定在子元素上的事件监听器委托在父元素上让父元素充当事件监听的职务。
事件委托是一种利用事件冒泡的特性在父节点上响应事件而不是在子节点上响应事件的技术。它能够改善性能因为只需要在父元素上设置一次事件监听器就可以管理同一类型的所有子元素的事件。
事件委托利用了事件冒泡的原理即事件从最深的节点开始逐步向上传播。在事件冒泡过程中父元素会捕获到子元素的事件并进行分析。通过查看event对象的属性可以确定是哪个子元素的事件从而执行相应的处理逻辑。
使用事件委托能够避免对每个子元素单独设置事件监听器降低了与DOM交互的次数提高了页面的整体运行性能。同时事件委托也具有更高的灵活性和可维护性不需要操作大量的DOM元素。
在Vue中可以利用v-on指令或符号来绑定事件监听器并在父元素上设置事件委托。例如可以在父元素上设置一个click事件监听器然后在子元素上绑定一个click事件通过事件委托实现父元素对子元素事件的响应。
优点
节省内存dom与js的关联减少事件的注册 增加子元素也无需再注册事件
缺点
获取绑定的节点数据会相对麻烦一点
在日常开发中很经常我们会遇到个问题就是在长列表数据较多的时候而又需要对子元素注册一些事件如onClick,就会造成比较大的内存开支很耗费性能也可能会造成页面卡顿等等 所以可以通过在父元素上添加click监听而不是在子元素上注册事件 如果数据量比较少就可忽略不计
html代码
div idappdiv idevent-agent clickeventAgentp v-for(item, index) in list :keyindex :data-nameitem.name :data-indexindex{{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);
