js基础之事件捕获与冒泡原理
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。
什么是事件？
我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些规则，浏览器按照这些规则与用户进行交互。比如开发者希望当用户点击页面上某个按钮的时候，就弹出一个窗口，显示特定的内容。而当用户真正点击这个按钮的时候，浏览器将按照开发者定义的这个规则，去弹出指定的窗口，显示指定的内容。
在上面的例子中，浏览器是一切规则的执行者，开发者是这些规则的制定者，而JavaScript只是开发者向浏览器描述这些规则时所使用的的语言（否则浏览器无法知道开发者想要在什么情况下做什么事）。假如我们通过以下的语句向浏览器描述了一条规则：
<body>
<button id="btn">点击</button>
<script>
var button = document.getElementById("btn"); //获取页面上的按钮
button.addEventListener("click", function(){ //定义点击事件
alert("我被点击了");
})
</script>
</body>
页面上现在有一个按钮，我们首先使用原生DOM获取这个按钮，然后使用button.addEventListener(“click”, function(){})这样的语法向浏览器描述了一条规则：当这个按钮被点击（click）时，弹出提示框，显示“我被点击了”。用户点击按钮后网页就会出现如下提示：
浏览器把这次“点击”称为一个“事件”。“事件”用于描述交互过程中某些特定的关键点（如点击、鼠标滑动、滚轮滚动、按下键盘、触屏操作等，每个操作都对应特定的事件，不过事件也可能与用户行为无关，比如网页加载完毕也是一个事件）。而浏览器处理交互最重要的手段就是基于事件来执行开发者定义好的回调函数（如在用户“点击按钮”时“弹出窗口”，而定义“弹出窗口”行为的就是回调函数，也就是addEventListener中的function）。
定义完这条规则，当用户点击按钮时，浏览器就会弹出上述窗口了。我们称“点击”这个事件是在这个按钮上触发的（因为我们的回调函数是绑定在这个按钮上的）。
那什么是事件的捕获与冒泡呢？
事件的捕获与冒泡
这个问题与HTML的结构息息相关。
在前端开发中，我们使用标签语言HTML来描述网页结构，如一个标题、一个段落、一个表格等，这些网页元素描述了网页上有哪些需要显示的内容，它们构成了整个网页的“骨骼”，通常是一种嵌套的结构，比如：
<html> <head> ... //这是对网页内容的元描述 </head> <body> //这是网页需要渲染的真正内容 <div> <h1>标题</h1> <p>这里是一个段落</p> </div> </body> </html>
上述网页结构示意图如下（在没有设置padding等属性的情况下，子元素通常会填满父元素，这里的内间距只是为了说明元素的嵌套关系）：
我们看到，body元素是整个网页的容器，它的内部包含了一个div元素，而div的内部又包含了两个元素：h1和p。假如我们现在在p的内部点击了一下，那么请问我们有没有点击它的外部容器div，以及最外部的body呢？
从浏览器的角度来看，我们同时在点击这三个元素。
想要证明这个结论非常简单，只需要使用addEventListener向div和body各自绑定click事件，如果点击p时也会被触发，那就说明上面的结论是正确的。毫无疑问，它们会被触发。
那么问题来了，既然用户同时在点击这三个元素，浏览器应该先执行哪个元素定义的回调函数呢（由于JavaScript采用单线程模型，执行回调函数必然有一定的先后顺序）？
这个问题实际上是在说，对于嵌套的元素，应该从内向外还是从外向内响应事件。浏览器之争的两大对立方分别有自己的看法：Netscape公司认为应当由最外层的body首先得到这个事件，其次是div，最后才是目标元素p；而微软的IE开发组则认为，应当是内部的p首先得到这个事件，然后是div，最后才是body。在没有标准约束的情况下，两者按照自己的想法去设计浏览器的事件模型，Netscape从外向内传播的模型在业内被称为事件捕获模型，而微软从内向外传播的模型则被称为事件冒泡模型。
两个模型虽然从思路上南辕北辙，但是都可以保证所有绑定的回调函数正确触发（不过触发顺序是相反的。如果这个触发顺序很重要，那么在当时，你的代码可能只能在一个浏览器中正确运行，或者去做恶心的浏览器兼容）。不过浏览器允许开发者在事件传播的过程中阻止事件的继续传播，此时两者的差异就变得极其明显。
假如我们在定义点击div元素的回调函数时阻止了事件的传播：
div.addEventListener("click", function(e){
...
e.stopPropagation(); //阻止事件继续传播
})
这个代码会在两种模型下产生巨大的差异。在捕获模型中，由于最外部首先得到该事件，因此body的点击事件首先被触发，之后是div的点击事件。由于阻止了事件传播，p元素不会触发回调。而在冒泡模型中则恰恰相反，内部的p首先得到该事件，其次才是div，因此触发回调的将是p和div，body因为事件没有冒泡上来而无法监听到该事件。同样的代码在两种模型中产生了完全不同的行为，这对于开发者来说显然是不可接受的（两个模型都有自己的适用场景，也都有自己的合理性，因此对于模型的好坏不能一概而论）。
那么后来的国际标准组织是如何解决这个冲突的呢？答案就是由开发者自己选择。
标准的事件绑定使用addEventListener函数，它接收两个必传参数和一个可选参数：必传的为event（事件名，如"cick"）和function（回调函数），可选的为useCapture（是否使用捕获模型，默认为false，根据MDN的接口说明，这里也可以传入一个对象，为本次监听设置其他参数，详细请参考MDN接口文档 - addEventListener）。
div.addEventListener("click", function(){}, true); //使用捕获模型
第三个参数就是标识开发者是否需要使用捕获模型，默认为false，也就是默认使用微软的冒泡模型（这是因为大多数事件都只在最内部的元素上触发，这也间接表明，冒泡模型的普适性更好）。如果开发者的需求确实需要使用捕获模型，可以将第三个参数设置为true。比如下面的例子：
事件捕获与冒泡的用法
了解了事件捕获与冒泡的基本原理之后，我们举个例子来说明这两个模型的基本用法。
假设有以下的DOM结构：
<div id="outer"> <div id="inner" style="width:100px;height: 100px;border: 1px solid black;"> </div> </div>
这是两个重叠的div，当点击时，两者都会响应这个click事件。假如事件绑定如下：
var outer = document.querySelector("#outer");
var inner = document.querySelector("#inner");
outer.addEventListener("click", function(e){
alert("来自外部div的消息");
e.stopPropagation(); //阻止事件向内部传播
}, true); //使用捕获模型
inner.addEventListener("click", function(e){
alert("来自内部div的消息");
}, true); //使用捕获模型
页面上将只显示外部弹出的消息，内部的事件被e.stopPropagation()拦截了下来，导致事件没有触发。而如果写成下面的代码：
var outer = document.querySelector("#outer");
var inner = document.querySelector("#inner");
outer.addEventListener("click", function(e){
alert("来自外部div的消息");
}, false); //使用冒泡模型
inner.addEventListener("click", function(e){
alert("来自内部div的消息");
e.stopPropagation(); //阻止事件向外部传播
}, false); //使用冒泡模型
这次是只显示了内部的消息，而没有显示外部的消息，说明事件在向上冒泡的过程中被阻止了。
注意
如果是在表格中内嵌复选框，希望实现点击一行时选中复选框，通过stopPropagation阻止CheckBox响应click事件并不能实现。测试发现复选框状态改变的事件似乎并不是在click事件触发的（断点跟踪表明，CheckBox在执行click回调之前，状态就已经发生了改变，具体是通过什么事件改变了选中状态尚不清楚），下面给一个可以处理行点击的示例：
<table border="1" cellspacing="0">
<tr class="tr">
<td>
<input class="checkbox" type="checkbox">
</td>
<td>
表格第一行
</td>
</tr>
<tr class="tr">
<td>
<input class="checkbox" type="checkbox">
</td>
<td>
表格第二行
</td>
</tr>
</table>
<script>
var tr = document.querySelectorAll(".tr"); //获取所有tr
tr.forEach(function(item){ //为每个tr绑定click事件，手动选中复选框
item.addEventListener("click", function(e){
var checkbox = item.querySelector(".checkbox");
checkbox.checked = !checkbox.checked;
})
})
var cb = document.querySelectorAll(".checkbox");
cb.forEach(function(item){
item.addEventListener("click", function(e){
this.checked = !this.checked;
});
})
</script>
这里没有使用stopPropagation阻止事件传播，而是通过为CheckBox定义额外的click事件来解决状态不变的问题（经过断点跟踪，此时在点击CheckBox时，状态发生了三次变化，第一次是触发了某个原生事件导致其状态变化，第二次是执行了tr的点击事件，第三次则是为CheckBox自定义的click事件）。也就是说，点击tr时状态改变一次，点击CheckBox时状态改变三次，功能均正常。
由于在大多数情况下，事件都是由最内层的元素来处理的，所以冒泡模型的应用更为广泛，它也因此成为绑定事件时使用的默认模型。
总结
事件的捕获与冒泡两个模型相对比较简单，只要明白了其中的原理，就可以很容易掌握通过stopPropagation阻止事件传播的使用。
浏览器的标准事件模型把事件的传播过程分成了三个阶段：捕获阶段、处于目标阶段和冒泡阶段。捕获阶段指事件从最外层传播到最内层之前的整个过程，对应捕获模型；处于目标阶段指的是事件刚好传播到目标元素上；而冒泡阶段指的是从最内层元素向外传播的整个过程。所以我们看到，标准的浏览器事件模型就是把捕获模型和冒泡模型有机地结合起来，使开发者可以以最简单的方式灵活地使用两个模型。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p
-
js事件冒泡与事件捕获详解
(一)事件绑定 1.普通事件绑定 给html添加一个以on开头的特定的属性(如onclick,onfocus); <button id="A" onclick="alert(this.id)">方式一</button> <button id="A" onclick="handler(this)">方式二</button> <script> function handl
-
浅谈javascript中的事件冒泡和事件捕获
1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML 页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv&q
-
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场).工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗).今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了. 先上结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件
-
JavaScript事件冒泡与事件捕获实例分析
本文实例讲述了JavaScript事件冒泡与事件捕获.分享给大家供大家参考,具体如下: 1.事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. <body onclick="alert('body')"> <div onclick="alert('div')"> <a href="" onclick=" rel="external nofollow&qu
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,
-
js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开
-
javascript 中事件冒泡和事件捕获机制的详解
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY
-
JS中事件冒泡和事件捕获介绍
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 1.冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.通俗来讲就是,就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件
-
JS html事件冒泡和事件捕获操作示例
本文实例讲述了JS html事件冒泡和事件捕获操作.分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下. 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲...... 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
-
js事件冒泡、事件捕获和阻止默认事件详解
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo
-
javascript事件冒泡和事件捕获详解
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出