JS中事件冒泡和事件捕获介绍

更新时间：2016年12月13日 10:02:01 作者：big董

这篇文章主要为大家详细介绍了JS中事件冒泡和事件捕获的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

1、冒泡事件：

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。

html:

<div>
 <input type="button" value="测试事件冒泡" />
</div>

js:

  var $input = document.getElementsByTagName("input")[0];
   var $div = document.getElementsByTagName("div")[0];
   var $body = document.getElementsByTagName("body")[0];
 
   $input.onclick = function(e){
      this.style.border = "5px solid red"
      var e = e || window.e;
      alert("red")
   }
   $div.onclick = function(e){
      this.style.border = "5px solid green"
      alert("green")
   }
   $body.onclick = function(e){
      this.style.border = "5px solid yellow"
      alert("yellow")
   }

效果：依次弹出”red“,"green","yellow"。这就是事件冒泡：触发button这个元素，却连同父元素绑定的事件一同触发。

2、阻止事件冒泡

如果对input的事件绑定改为：

$input.onclick = function(e){
  this.style.border = "5px solid red"
  var e = e || window.e;
  alert("red")
  e.stopPropagation();
}

这个时候只会弹出”red“，因为阻止了事件冒泡。

3、事件捕获：

从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

$input.addEventListener("click", function(){
  this.style.border = "5px solid red";
  alert("red")
}, true)
$div.addEventListener("click", function(){
  this.style.border = "5px solid green";
  alert("green")
}, true)
$body.addEventListener("click", function(){
  this.style.border = "5px solid yellow";
  alert("yellow")
}, true)

这个时候依次弹出”yellow“,"green","red"。这就是事件的捕获。

如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。这是因为在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧
这篇文章主要介绍了浅谈Vue3.0之前你必须知道的TypeScript实战技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
JS小功能(offsetLeft实现图片滚动效果)实例代码
这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码，有需要的朋友可以参考一下
2013-11-11
详解JavaScript状态容器Redux
Redux官网上是这样描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript状态容器，提供可预测性的状态管理）。目前Redux GitHub有5w多star，足以说明 Redux 受欢迎的程度
2021-06-06
JavaScript之移动端H5生成图片解决方案讲解
这篇文章主要介绍了JavaScript之移动端H5生成图片解决方案讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
js实现移动端轮播图效果
这篇文章主要为大家详细介绍了js实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
javascript简单实现命名空间效果
这篇文章主要介绍了javascript简单的实现命名空间效果的方法。需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
微信小程序中视频的显示与隐藏功能
这篇文章主要介绍了微信小程序中视频的显示与隐藏,思路大概是定义一个标记变量，控制视频的播放与暂停，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
JS图像无缝滚动脚本非常好用
最好用的JS图像无缝滚动脚本，根据需要改改宽度和图像个数就可以了,需要的朋友可以参考下
2014-02-02
150行代码带你实现微信小程序中的数据侦听
在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器，感兴趣的朋友跟随小编一起看看吧
2019-05-05
javascript实用小函数使用介绍
本文整理了一些实用小函数如阻止输入非数字，backspace除外；限制输入最大字符串长度等，需要的朋友可以了解下
2013-11-11