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

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JS的冒泡事件和捕获事件实例讲解

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

事件的三阶段

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:布尔类型值。

useCapture value
false(默认值) 表示冒泡事件(由小)。由内往外执行,先执行当前事件再向外执行,直到执行完父事件。
true 表示捕获事件。由外向内执行,先执行父事件再向内执行,直接当前事件

将上述案例的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时:

事件的三阶段

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:布尔类型值。

useCapture value
false(默认值) 表示冒泡事件(由小)。由内往外执行,先执行当前事件再向外执行,直到执行完父事件。
true 表示捕获事件。由外向内执行,先执行父事件再向内执行,直接当前事件

将上述案例的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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过