# 一、定义
DOM2级事件定义了两个事件处理方法：==addEventListener==(event, function, useCapture)和==removeEventListener==(event, function, useCapture)
- useCapture == true时，在==捕获阶段==调用事件处理程序；
- useCapture == flase(默认)时，在==冒泡阶段==调用事件处理程序
# 二、事件执行顺序
- 事件冒泡：由最具体的元素逐级向上传播到最不具体的节点；叶-->根
- 事件捕获：由最不具体的元素逐级向下传播到最具体的节点；根-->叶
w3c模型将两者中和，事件流包括三个阶段：事件捕获阶段 -->处于目标阶段 -->事件冒泡阶段
# 三、实例
当事件处于目标阶段时，事件调用顺序决定与书写顺序，demo如下
<html>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click',function(){
alert('outer');
},false);
inner.addEventListener('click',function(){
alert('inner');
},false);
outer.addEventListener('click',function(){
alert('456');
},true);
inner.addEventListener('click',function(e){
alert('123');
e.stopPropagation();
},true);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
执行结果：456 -> inner -> 123 -> (outer) stopPropagation()用来阻止事件进行，因此123之后的outer不执行；