JS冒泡捕获

时间：2023-04-02 19:53:37 HTML

JS冒泡捕获是怎么回事？参见：https://www.cnblogs.com/alvin...冒泡和捕获指的是两个方向，或者说过程，当元素上的事件被触发时，js传递事件。前言：比如有这样一个页面和js方法Less：我写在less里面，如果没有less环境，可以忽略这一段。.level{padding:50px80px;}.level-template(@level:1,@color:#fff){background-color:darken(@color,5%*@level);}#lv1{.level-template(1)}#lv2{.level-template(2)}#lv3{.level-template(3)}#lv4{.level-template(4)}HTML

JSfunction$(id){returndocument.getElementById(id);}window.onload=()=>{$('lv1').addEventListener("click",()=>{console.日志（'lv1'）}，真）；$('lv2').addEventListener("点击",()=>{console.log('lv2')},true);$('lv3').addEventListener("click",()=>{console.log('lv3')},true);};//上面的()=>{}是ES6匿名方法的定义//相当于function()上面的js{console.log('lv1')}是干什么的：在页面加载的时候，给三个div添加点击监听方法，当点击的时候，就输出它们在控制台中的id值。页面的结构是lv1包含lv2，lv2包含lv3。当你点击lv3的时候，其实是点击了lv2和lv1，因为lv3在lv2里面。当你点击lv3的时候，自然会点击lv2和lv1，也就是说，点击lv3的时候，会触发三个点击事件。至于这三个事件的触发顺序，分别叫做冒泡和捕获。事件触发经历三个阶段：捕获阶段：首先从文档的根节点文档到事件触发对象，从外到内捕获事件对象；定位目标：找到目标事件位置（事件发生的地方），触发事件；冒泡阶段：从目标事件位置回溯到文档的根节点，将事件对象由内向外冒泡。1、捕获阶段如上例，当点击lv3时，js会从文档的最顶层开始，从外向内寻找点击事件的来源，即lv3。那么这个过程从外到内就是lv1-->lv2-->lv3，这三个div的点击事件都是按照这个过程依次触发的。这个触发器的方向就是捕捉的方向。2.冒泡阶段，找到点击的lv3后，向上传递事件，流程是lv3-->lv2-->lv1，此时lv3、lv2、lv1的点击事件在反过来，从内到外的触发过程就是所谓的冒泡我们再回顾一下最常用的事件绑定方法的格式：element.addEventListener(event,function,useCapture)其中useCapture是使用的布尔值定义事件是在冒泡阶段触发还是捕获Stage触发，默认值为false，即冒泡时触发。此时你就会知道上面例子定义的click方法是在capture阶段执行的，返回结果是lv1lv2lv3如果上面例子，onload内容是这样的window.onload=()=>{$('lv1').addEventListener("点击",()=>{console.log('lv1')},false);$('lv2').addEventListener("点击",()=>{console.log('lv2')},false);$('lv3').addEventListener("点击",()=>{console.log('lv3')},false);};也就是说click事件在发生冒泡阶段被触发，返回结果为lv3lv2lv1总结了冒泡和捕获的关系，只会出现在containing和included结构中，兄弟关系不会有这个关系。冒泡和捕获只是不同的方向。

上一篇：前端面试日常3+1——Day849

下一篇：Promise.allSettled的Polyfill处理

JS冒泡捕获相关文章