脚本宝典收集整理的这篇文章主要介绍了js实例教程-JS的冒泡事件和捕获事件实例讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 //为box1，box2，box3以及document都绑定了点击事件  box1.onclick = function () {      console.LOG("我是box1")  }  box2.onclick = function () {      console.log("我是box2")  }  box3.onclick = function (event) {      console.log("我是box3")  }   document.onclick = function () {      console.log("我是document")  }

  event = event || window.event;  if(event && event.stopPRopagation()){     event.stopPropagation();  }else {      event.cancelbubble = true;  }

 box3.onclick = function (event) {     //在box3的点击事件中阻止冒泡,阻止后，冒泡将停止不会再执行父系的click事件     event = event || window.event;     if(event && event.stopPropagation()){         event.stopPropagation();     } else {         event.cancelBubble = true;     }     console.log("我是box3") }

 box1.addEventListener("click",function () {     console.log("我是box1") },true);  box2.addEventListener("click",function () {     console.log("我是box2") },true);  box3.addEventListener("click",function () {     console.log("我是box3") },true);  document.addEventListener("click",function () {     console.log("我是document") },true); 

事件的三阶段

1. 捕获阶段

当一个元素上的某个事件被触发的时候，就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段。

2. 目标阶段

当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。

3. 冒泡阶段

当一个元素上的某个事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一阶段被称为冒泡阶段。

冒泡事件

1. 定义：

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

这个事件从原始元素开始一直冒泡到DOM树的最上层。子元素事件被触动，父盒子的同样的事件也会被触动。

下面以案例说明：

 //为box1，box2，box3以及document都绑定了点击事件  box1.onclick = function () {      console.log("我是box1")  }  box2.onclick = function () {      console.log("我是box2")  }  box3.onclick = function (event) {      console.log("我是box3")  }   document.onclick = function () {      console.log("我是document")  }

展示图如下：

结果如下：

① 当点击document部分，结果：

② 当点击box1盒子，结果：

③ 当点击box2盒子，结果：

④ 当点击box3盒子，结果：

发现：

元素事件被触发后，如果他的祖先元素也有该事件，那么祖先元素也会触发该事件，并且是由内往外的顺序，由小到大，即是事件冒泡。

注意：

由于有事件冒泡这个机制，会给程序带来一些不必要的麻烦，因此需要阻止冒泡。

2. 阻止冒泡

火狐谷歌，IE11等 用event.stopPropagation()

IE10及以下 用 event.cancelBubble = true

采用兼容写法：

  event = event || window.event;  if(event && event.stopPropagation()){     event.stopPropagation();  }else {      event.cancelbubble = true;  }

那么在上面的案例中：
使box3阻止冒泡，将上述代码修改成以下代码：

 box3.onclick = function (event) {     //在box3的点击事件中阻止冒泡,阻止后，冒泡将停止不会再执行父系的click事件     event = event || window.event;     if(event && event.stopPropagation()){         event.stopPropagation();     } else {         event.cancelBubble = true;     }     console.log("我是box3") }

修改之后，点击box3，可以发现： 只打印了 “ 我是box3 ”，这样就阻止了冒泡

捕获事件

捕获事件是与冒泡相反的方向执行的，由外向内执行，先执行父事件再向内执行，直接当前事件。

利用addEventListener方法来实现事件捕获。

target.addEventListener（type, listener, useCapture）

type：监听事件类型的字符串。

listener：事件处理函数。

useCapture：布尔类型值。

将上述案例的js代码改为捕获：

 box1.addEventListener("click",function () {     console.log("我是box1") },true);  box2.addEventListener("click",function () {     console.log("我是box2") },true);  box3.addEventListener("click",function () {     console.log("我是box3") },true);  document.addEventListener("click",function () {     console.log("我是document") },true); 

点击box3时：

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JS的冒泡事件和捕获事件实例讲解全部内容，希望文章能够帮你解决js实例教程-JS的冒泡事件和捕获事件实例讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。