一、事件捕获【jquery全局拦截请求 js阻止事件捕获的方法有哪些】1、概念
事件捕获:从document到触发事件的那个节点 , 自上而下的去触发事件 。
2、图解
文章插图
二、事件冒泡1、概念
事件冒泡:从触发事件的那个节点一直到document,是自下而上的去触发事件 。
2、图解
文章插图
三、DOM事件流1、概念
DOM事件流相当于将事件捕获与事件冒泡两者结合起来,事件触发的顺序是先进行事件捕获阶段 => 目标元素阶段 => 事件冒泡阶段 。
2、图解
文章插图
3、示例
绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的,默认为false,即事件冒泡;若为true,即事件捕获 。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title><style>.boxA {width: 200px;height: 200px;background-color: blueviolet;}.boxB {width: 100px;height: 100px;background-color: pink;}.boxC {width: 50px;height: 50px;background-color: red;}</style></head><body><div class="boxA" id="boxA"><div class="boxB" id="boxB"><div class="boxC" id="boxC">目标</div></div></div><script>let boxA = document.getElementById("boxA");let boxB = document.getElementById("boxB");let boxC = document.getElementById("boxC");//目标元素boxC.addEventListener('click', function () { console.log("target1"); }, true);boxC.addEventListener('click', function () { console.log("target2"); }, true);// 事件冒泡boxB.addEventListener('click', function () { console.log("bubble1"); }, false);boxB.addEventListener('click', function () { console.log("bubble2"); }, false);// 事件捕获boxA.addEventListener('click', function () { console.log("capture1"); }, true);boxA.addEventListener('click', function () { console.log("capture2"); }, true);</script></body></html>4、结果
文章插图
五、事件捕获或事件冒泡的阻止1、用法
#当在事件流执行过程中,需要阻止后续的事件的执行,可以使用以下语法event.stopPropagation();2、示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title><style>.boxA {width: 200px;height: 200px;background-color: blueviolet;}.boxB {width: 100px;height: 100px;background-color: pink;}.boxC {width: 50px;height: 50px;background-color: red;}</style></head><body><div class="boxA" id="boxA"><div class="boxB" id="boxB"><div class="boxC" id="boxC">目标</div></div></div><script>let boxA = document.getElementById("boxA");let boxB = document.getElementById("boxB");let boxC = document.getElementById("boxC");//目标元素boxC.addEventListener('click', function (e) { console.log("target1"); e.stopPropagation(); }, true);boxC.addEventListener('click', function () { console.log("target2"); }, true);// 事件冒泡boxB.addEventListener('click', function () { console.log("bubble1"); }, false);boxB.addEventListener('click', function () { console.log("bubble2"); }, false);// 事件捕获boxA.addEventListener('click', function () { console.log("capture1"); }, true);boxA.addEventListener('click', function (e) { console.log("capture2"); }, true);</script></body></html>3、结果
文章插图
五、总结
- 事件函数执行顺序:捕获阶段的处理函数最先执行 , 其次是目标阶段的处理函数,最后是冒泡阶段的处理函数 。目标阶段的处理函数,先注册的先执行 , 后注册的后执行 。
- 事件阻止只能阻止后续的阶段事件并且未作用于同一元素上的事件函数 。
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- 如何让电脑自动拦截广告弹窗
- 如何在易语言农历日期框下新建全局变量
- 深入了解jQuery中show语法的使用
- 360浏览器广告拦截设置教程
- 如何正确配置火绒安全的恶意网址拦截功能
- 360安全卫士弹窗拦截设置详解
- 如何设置火绒安全软件的弹窗拦截功能
- 如何有效拦截软件中的广告
- jQuery中的prepend方法用法及实例展示
- 今天语音搜索了吗?如何使用火绒安全软件记录电脑打开的窗口并实现精准拦截