html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。
当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。
那么是先执行父元素的单击事件,还是先执行div的单击事件 ???
什么是DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
DOM 事件流分为3个阶段:
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程
事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程
当时的2大浏览器霸主谁也不服谁!
IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。
Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。
最终,w3c 采用折中的方式,制定了统一的标准 —--— 先捕获再冒泡。
现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流
注意:
1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段。
3. addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕 获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理 程序。
4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
5. 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave
猜一下运行结果
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段
//document -> html -> body -> father -> son
//冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段
//son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
运行结果是 son > father > document (均处于冒泡阶段)
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段
//document -> html -> body -> father -> son
//冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段
//son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
document.addEventListener('click', function() {
alert('document');
})
</script>
运行结果是 father > son > document (father处于捕获阶段)