js事件目标查找方式，事件代理，e.target与e.currentTarget的区别，阻止冒泡与捕获，取消默认事件一次搞懂，看这个就够了 |
您所在的位置：网站首页 › js委托事件代码是什么类型 › js事件目标查找方式，事件代理，e.target与e.currentTarget的区别，阻止冒泡与捕获，取消默认事件一次搞懂，看这个就够了 |
js事件目标查找方式，事件代理，e.target与e.currentTarget的区别，阻止冒泡与捕获，取消默认事件一次搞懂，看这个就够了
|
文章目录
一、EventTarget 事件目标的查找方式（冒泡与捕获）冒泡与捕获：冒泡事件：捕获事件：
addEventListener(type,listener,useCapture) 简单分析：参数useCapture解析：冒泡与捕获的顺序分析：代码演示：
二、事件代理机制（事件委托）利用事件冒泡完成事件代理机制：
三、e.target与e.currentTarget的区别：四、阻止冒泡与捕获为什么要阻止冒泡或捕获？阻止冒泡或捕获的方法event.stopPropagation()阻止冒泡：event.stopPropagation()阻止捕获：event.target == event.currentTarget：
五、补充:为什么要使用`addEventListener()`六、取消默认事件event.preventDefault()return false;
一、EventTarget 事件目标的查找方式（冒泡与捕获）
事件目标指的是绑定事件的元素，elemet.addEventListener(‘click’,function(){}) 这里的 elemet 就是事件目标。 冒泡与捕获： 冒泡事件： 事件默认是由下往上的冒泡执行方式。以点击事件为例，当我们点击子元素也能触发父元素及以上元素的点击事件。事件执行顺序由下至上，这就是冒泡事件。 捕获事件： 当然还有一种执行方式是由上往下的捕获方式。还是以点击事件为例，当一个子元素绑定了点击事件，我们点击子元素时，父元素及以上的元素绑定的点击事件也会执行。事件的执行顺序时由上至下，这就是捕获事件。 addEventListener(type,listener,useCapture) 简单分析： type：事件类型listener：事件监听处理函数useCapture：设置事件查找方式 false，冒泡事件（默认值）true， 捕获事件 参数useCapture解析：重点！！一个事件目标的触发，整个过程分为两个阶段（捕获与冒泡）。 useCapture 这个值决定事件目标的触发在哪个阶段执行。 冒泡与捕获的顺序分析：
当我们点击div3，如下从控制台结果可以看出，这里的事件都是在冒泡阶段执行。
还是点击div3，我们将div1.addEventListener第三个参数改为true，如下可以看出div1最先执行，说明捕获阶段优先于冒泡阶段。 这里看完一定要敲一下，我并没有列举所有的情况，其余的情况留给你们去尝试再总结（能理解上面的就够了，真正编码不会很复杂）。 如上就是我对事件目标查找的两种机制冒泡与捕获理解。 二、事件代理机制（事件委托） 利用事件冒泡完成事件代理机制： 列表1 列表2当我们要给如上列表中的li都绑定一个点击事件点击获取li中的内容，一般是利用for遍历元素绑定点击事件。 let lis = document.querySelectorAll('li'); for (let i = 0; i 这是div1 这是div2 这是div3 let div1 = document.getElementById('div1'); let div2 = document.getElementById('div2'); let div3 = document.getElementById('div3'); div1.onclick = function (e) { alert('div1'); } div2.onclick = function (e) { e.stopPropagation(); alert('div2'); } div3.onclick = function (e) { alert('div3'); }上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。 event.stopPropagation()阻止捕获： 这是div1 这是div2 这是div3 let div1 = document.getElementById('div1'); let div2 = document.getElementById('div2'); let div3 = document.getElementById('div3'); div1.addEventListener('click',function(e){ console.log('div1'); },true); div2.addEventListener('click',function(e){ console.log('div2'); e.stopPropagation(); },true); div3.addEventListener('click',function(e){ console.log('div3'); },true);当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。 event.target == event.currentTarget： div.addEventListener('click',function(e){ if(event.target == event.currentTarget){ //需要执行的代码 } });此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。 五、补充:为什么要使用addEventListener()从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）： addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括： 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。 六、取消默认事件 event.preventDefault()默认事件指的是， 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。 点击跳转 let a = document.querySelector('a'); addEventListener('click',function(e){ e.preventDefault(); })那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。 return false;事件执行函数中设置return false取消默认事件，但此方法不常用。 感兴趣还可以关注我的： cnsd：m0_46217225 掘金：寸头男生 github：Buzz_cut 微信公众号：web_mycode 知乎：寸头男生 欢迎加入QQ群交流编程知识： qq群：808752665 我的QQ：2356924146 我会持续的编程干货。 |
【本文地址】