宝山苏州网站建设,网站维护模式,北京网站开发学习,昆山专业网站建设公司事件流 js 事件的执行过程分为捕获阶段#xff08;由外层节点传播到内层节点#xff09;和冒泡阶段#xff08;由内层节点传播到外层节点#xff09;#xff0c;即先执行捕获阶段的代码#xff0c;后执行冒泡阶段的代码 事件冒泡 js 事件中的代码默认在冒泡阶段执行… 事件流 js 事件的执行过程分为捕获阶段由外层节点传播到内层节点和冒泡阶段由内层节点传播到外层节点即先执行捕获阶段的代码后执行冒泡阶段的代码 事件冒泡 js 事件中的代码默认在冒泡阶段执行以下图为例点击box2时会依次触发box2的点击事件【冒泡阶段执行】、box1的点击事件【冒泡阶段执行】、window的点击事件【冒泡阶段执行】。 window.addEventListener(click, function (e) {if (e.target.id box2) {console.log(点击box2触发window的click事件);} else if (e.target.id box1) {console.log(点击box1触发window的click事件);} else {console.log(触发了window的click事件);}});document.getElementById(box1).addEventListener(click, function (e) {console.log(触发了box1的click事件);});document.getElementById(box2).addEventListener(click, function (e) {console.log(触发了box2的click事件);});事件捕获 给 addEventListener 函数的第三个参数传入 true 便会将事件中的代码改为在捕获阶段执行此时点击box2时会依次触发window的点击事件【捕获阶段执行】box2的点击事件【冒泡阶段执行】box1的点击事件【冒泡阶段执行】。 window.addEventListener(click,function (e) {if (e.target.id box2) {console.log(点击box2触发window的click事件);} else if (e.target.id box1) {console.log(点击box1触发window的click事件);} else {console.log(触发了window的click事件);}},//改为在捕获阶段执行true);document.getElementById(box1).addEventListener(click, function (e) {console.log(触发了box1的click事件);});document.getElementById(box2).addEventListener(click, function (e) {console.log(触发了box2的click事件);});阻止事件的传播 使用
e.stopPropagation()范例点击box2时只触发box2的点击事件不触发box1和window的点击事件 window.addEventListener(click, function (e) {if (e.target.id box2) {console.log(点击box2触发window的click事件);} else if (e.target.id box1) {console.log(点击box1触发window的click事件);} else {console.log(触发了window的click事件);}});document.getElementById(box1).addEventListener(click, function (e) {console.log(触发了box1的click事件);});document.getElementById(box2).addEventListener(click, function (e) {console.log(触发了box2的click事件);// 阻止事件继续传播e.stopPropagation();});实战范例 需求
点击box2时只执行window点击事件中通过点击box2触发window点击事件的代码不执行box1的点击事件代码点击box1时只执行box1的点击事件代码不执行window点击事件中通过点击box1触发window点击事件的代码 window.addEventListener(click,function (e) {if (e.target.id box2) {console.log(点击box2触发window的click事件);// 阻止事件继续传播e.stopPropagation();} else if (e.target.id box1) {return;console.log(点击box1触发window的click事件);} else {console.log(触发了window的click事件);}},true);document.getElementById(box1).addEventListener(click, function (e) {console.log(触发了box1的click事件);});document.getElementById(box2).addEventListener(click, function (e) {console.log(触发了box2的click事件);});
