在浏览器中，事件的传播方式分为：事件冒泡和事件捕获。那么事件冒泡和事件捕获分别是什么？为什么会出现两种传播方式呢？
一、前提
- 在浏览器中用户点击鼠标，操作系统最先知道，浏览器次之。
- 页面中子元素被点击了，意味着父元素也被点击。
- 如果子元素和父元素同时监听了点击事件，那么点击子元素后，是子元素先知道，还是父元素先知道。而这个知道的前后顺序，就是由事件传播方式决定的。
二、冒泡模式和捕获模式
事件的传播途径是通过文档节点组成的有序列表。在DOM里面，这个事件传播路径的最后一点就是事件对象（Event Target）本身，其之前的元素就是事件对象的祖先元素。
- 触发事件后：
- 对于冒泡模式，事件首先被事件对象本身知道，然后让其父元素知道，就这样在祖先元素中一层层向外传播，直至window 对象，如果中间有节点设置监听这个事件，就调用其监听函数。
-
对于捕获模式，事件首先被window 对象知道，然后到document 节点，最后才被事件对象本身知道，如果中间有节点监听此事件，就调用监听函数。
例子:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<title>example</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li class="clicked">item3</li>
</ul>
</body>
</html>
- 在上面例子的结构中，假设我在
item3用鼠标点击了一下。- 在捕获模式中，事件是按以下顺序传播的：
window-->document--><html>--><body>--><ul>--><li class="clicked">,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。 - 在冒泡模式中，事件的传播顺序是同捕获模式相反的：
<li class="clicked">--><ul>--><body>--><html>-->document-->window,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。
- 在捕获模式中，事件是按以下顺序传播的：
三、设置冒泡模式或捕获模式
在十几年前，那时候浏览器各自为政，其中一个巨头网景公司主张捕获模式，所以那时它的浏览器只支持捕获模式；而另一巨头微软公司支持冒泡模式，所以IE 9 以前的版本只支持冒泡模式。在2000 年的时候，w3c 将两种模式都写入标准里面，所以现在大部分浏览器都支持两种模式。
我们可以使用addEventListener(type, listener, useCapture) 方法来设置事件的传播模式，如果想要捕获模式，就将第三个参数useCapture 设为true 。如果想要冒泡模式，可以将第三个参数设为false 或者直接省略第三个参数，因为不传入参数的时候，参数值为undefined 。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<section id="alog"></section>
<script>
var divs = document.getElementsByTagName('div');
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim())
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim())
}
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
function log(msg) {
var p = document.createElement('p');
p.textContent = msg;
alog.appendChild(p);
}
</script>
</body>
</html>
下图是我点击div 5 的结果
在两种模式混用的情况下，如果是事件对象（Event Target）的父元素，按先捕获后冒泡的顺序进行。如果是事件对像自身，那么谁先监听就先执行谁。在实际工作中不推荐混用两种模式。
例子：对上面代码进行小小的改动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<section id="alog"></section>
<script>
var divs = document.getElementsByTagName('div');
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim())
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim())
}
for (var i = 0; i < divs.length; i++) {
/* 只是调换了下面两句语句的位置*/
divs[i].addEventListener('click', bubble, false);
divs[i].addEventListener('click', capture, true);
// 其他语句不变
}
function log(msg) {
var p = document.createElement('p');
p.textContent = msg;
alog.appendChild(p);
}
</script>
</body>
</html>
下图是我点击div 5 的结果
链接
本文部分借鉴自: https://stackoverflow.com/a/4616720/7309659
部分来自饥人谷老师方方的观点: http://www.jianshu.com/users/b4fd9acca45c/timeline
饥人谷链接：https://jirengu.com/
网友评论