江苏龙网

  1. 主页 > 生活百科 > >

JS基础入门：事件捕获与事件冒泡

JS

JS是前端很重要的一部分内容，可以说把JS的基础打好了，你才能更好的向上发展，而且现在很多大公司初试考察的就是js基础，如果你连初试都过不了，更不用说后面的复试了 。
今天的学习内容：事件捕获与事件冒泡

JS基础入门：事件捕获与事件冒泡

文章插图
 
事件冒泡事件冒泡是IE的开发团队提出的，它定义了事件首先由最具体的元素接收，然后逐级冒泡到上级元素 。
事件捕获事件捕获定义了事件首先由最外层的元素（window）接收，然后才是下级元素 。
注意：主流的高版本浏览器都支持这两种事件流，但由于老版本的浏览器不支持事件捕获，所有更多的使用的还是事件冒泡.
DOM2级事件规定的事件流包括三个阶段：1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段
首先发生的是事件捕获，在这个阶段为外层的元素截获事件提供了机会，然后就是实际的事件目标接收到了事件，最后才是冒泡阶段，在这个阶段可以对事件进行响应（触发事件监听器） 。 注意：虽然规范要求在捕获阶段，真正的事件目标元素不会接收到事件，但是主流高版本浏览器都实现了在捕获阶段就触发这个事件，这就提供了两个机会在目标事件上操作事件，例子在下面.
<div> <a href=https://www.isolves.com/it/cxkf/yy/js/2019-04-28/"#">l am a link
//js代码var div = document.querySelector('div');var a = document.querySelector('a');a.addEventListener('click',function(event){ console.log('capture') },false); //为元素a绑定click事件处理函数，该事件将在冒泡阶段触发 。a.addEventListener('click',function(){ console.log('bubble') },true); //为元素a绑定click事件处理函数，该事件将在事件捕获阶段触发，早于冒泡阶段的监听器 。div.addEventListener('click',function(e){ console.log('div-capture') },true); //为元素div绑定事件处理函数，该事件将在事件捕获阶段触发，早于a元素 。打开浏览器，点击元素a，打开控制台，你将看到依次输出：div-capture,capture,bubble 。这证明了，有两次机会可以为元素注册事件，并且捕获阶段早于冒泡阶段触发；
补充：
1.addEventListener方法属于DOM二级，使用时如果不提供第三个参数，默认是在冒泡阶段触发 。
2. on+事件名，DOM 0级方法，使用此方法注册的监听器将在冒泡阶段触发 。
 

【JS基础入门：事件捕获与事件冒泡】


    推荐阅读


    上一篇：IP地址冲突、环路问题如何解决？

    下一篇：非常全面的无线网桥知识