长治门户网站,免费三折页宣传册模板下载网,网站 数据库 sql 导入数据库文件,portfolio做网站目录 一、事件委托#xff08;事件代理#xff09;
1、事件委托的优点
2、事件委托的缺点
3、为什么要使用事件委托
4、事件委托实现原理
5、DOM事件流
6、事件委托的实现方法
1、vue写法
1.1、html代码
1.2、js代码
2、原生的写法其实也差不多#xff1a;
2.1、…目录 一、事件委托事件代理
1、事件委托的优点
2、事件委托的缺点
3、为什么要使用事件委托
4、事件委托实现原理
5、DOM事件流
6、事件委托的实现方法
1、vue写法
1.1、html代码
1.2、js代码
2、原生的写法其实也差不多
2.1、html代码
2.2、js代码
二、阻止事件冒泡
三、取消默认事件
四、总结 一、事件委托事件代理
将原本需要绑定在子元素上的事件监听器委托在父元素上让父元素充当事件监听的职务。
利用事件冒泡的特性在父节点上响应事件而不是在子节点上响应事件的技术。它能够改善性能因为只需要在父元素上设置一次事件监听器就可以管理同一类型的所有子元素的事件。
即事件从最深的节点开始逐步向上传播。在事件冒泡过程中父元素会捕获到子元素的事件并进行分析。通过查看event对象的属性可以确定是哪个子元素的事件从而执行相应的处理逻辑。
使用事件委托能够避免对每个子元素单独设置事件监听器降低了与DOM交互的次数提高了页面的整体运行性能。同时事件委托也具有更高的灵活性和可维护性不需要操作大量的DOM元素。
在Vue中可以利用v-on指令或符号来绑定事件监听器并在父元素上设置事件委托。例如可以在父元素上设置一个click事件监听器然后在子元素上绑定一个click事件通过事件委托实现父元素对子元素事件的响应。 1、事件委托的优点
节省内存dom与js的关联减少事件的注册增加子元素也无需再注册事件
2、事件委托的缺点
获取绑定的节点数据会相对麻烦一点
3、为什么要使用事件委托
在日常开发中很经常我们会遇到个问题就是在长列表数据较多的时候而又需要对子元素注册一些事件如onClick,就会造成比较大的内存开支很耗费性能也可能会造成页面卡顿等等 所以可以通过在父元素上添加click监听而不是在子元素上注册事件 如果数据量比较少就可忽略不计
此外事件处理程序需要与 DOM 节点进行交互访问 DOM 的次数越多引起浏览器重绘和重排的次数也就越多从而影响页面的性能。
4、事件委托实现原理
事件委托是利用事件的冒泡原理来实现的大致可以分为三个步骤
确定要添加事件元素的父级元素给父元素定义事件监听子元素的冒泡事件使用 event.target 来定位触发事件冒泡的子元素。 5、DOM事件流
事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即DOM事件流。
比如我们给页面中的一个div注册了单击事件当你单击了div时也就单击了body单击了html单击了document。 DOM 事件流会经历3个阶段
捕获阶段事件从文档的根节点流向目标对象。
事件从最不精确的对象(document 对象)开始触发然后到最精确(也可以在窗口级别捕获事件不过必须由开发人员特别指定)与事件冒泡相反事件会从最外层开始发生直到最具体的元素。
当前目标阶段在目标对象上被触发。冒泡阶段回溯到文档的根节点。
微软提出了名为事件冒泡的事件流。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
6、事件委托的实现方法 1、vue写法
1.1、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 } 中取值
1.2、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 }}}
}
2、原生的写法其实也差不多
2.1、html代码
div idevent-agentp :data-nameItem1 :data-index0Item 1/pp :data-nameItem2 :data-index1Item 2/pp :data-nameItem3 :data-index2Item 3/pp :data-nameItem4 :data-index3Item 4/pp :data-nameItem5 :data-index4Item 5/pp :data-nameItem6 :data-index5Item 6/p
/div
2.2、js代码
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); 二、阻止事件冒泡
W3C的方法是e.stopPropagation()IE则是使用e.cancelBubble true。 stopPropagation是事件的一个方法作用是阻止目标元素的事件冒泡但是不会组织默认行为。 function stopBubble(e) {
//如果提供了事件对象则这是一个非IE浏览器
if ( e e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation();
else //否则我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble true;
}
三、取消默认事件
W3C的方法是e.preventDefault()IE则是使用e.returnValue false。 preventDefault()是事件对象(Event)的一个方法作用是取消一个目标元素的默认行为。既然是默认行为那么元素必须有默认行为才能被取消如果元素本身就没有默认行为调用自然就无效了。什么元素有默认行为呢如链接\a href提交按钮input type”submit”等这些都有默认行为。 function preventDefault(e){if(e e.preventDefault){e.preventDefault();}else{window.event.returnValue false;}return false;
} 四、总结
要使用事件委托需要保证事件能够发生冒泡适合使用事件委托的事件有 click、mousedown、mouseup、keydown、keyup、keypress 等。需要注意的是虽然 mouseover 和 mouseout 事件也会发生事件冒泡但处理起来非常麻烦所以不推荐在 mouseover 和 mouseout 事件中使用事件委托。
另外对于不会发生事件冒泡的事件例如 load、unload、abort、focus、blur 等则无法使用事件委托。
