DOM事件机制

1.W3C标准

1. 2002年，W3C发布标准《DOM Level 2 Events Specification》。
2. 它规定浏览器应该同时支持两种调用顺序。
3. 首先按照爷爷=>爸爸=>儿子的顺序看有没有函数监听，然后按照儿子=>爸爸=>爷爷顺序看有没有函数监听。
4. 有监听函数就调用，并提供事件信息，没有就跳过。
5. 开发者可以选择将监听函数放在捕获阶段还是冒泡阶段

2.事件捕获和事件冒泡

2.1定义

1. 从外向内找监听函数，叫事件捕获
2. 从内向外找监听函数，叫事件冒泡

2.2图解

3.addEventListener

3.1事件绑定API

IE5以上系列：baba.attachEvent('onclick',fn)//冒泡
网景: baba.addEventListener('onclick',fn)//捕获
W3C: baba.addEventListener('onclick',fn,bool)

3.2W3C的API的bool值

1. 如果bool为true,那么就让fn在冒泡阶段被浏览器被调用
2. 如果bool不传或者为falsy,那么就让fn在捕获阶段浏览器调用

3.3图解

4.target和currentTarget的区别

1. e.target是用户操作的元素
2. e.currentTarget是浏览器监听的元素 总之，两者可能相同也可能不同

5.一个特例

5.1背景

只有一个div被监听，并且fn分别在捕获阶段和冒泡阶段监听点击事件

5.2解决方案

div.addEventListener('click',f1,true)//捕获
div.addEventListener('click',f2,true)//冒泡

1. 问题：请问f1先执行还是f2先执行？
2. 答案：f1先执行
3. 原因:谁先监听谁先执行

6.取消冒泡

1. 捕获阶段不能取消监听，但冒泡阶段可以取消监听
2. e.stopPropagation()放在监听函数中，一般情况下可中断冒泡，使得浏览器不再向上走
3. 所有的冒泡都能被取消

7.不可阻止默认动作

1. 默认动作有的可以取消有的不能取消
2. 查看这个信息的方法:在浏览器中搜MDN 关键词 event,并在MDN的英文版中查看
3. MDN搜索scroll event,看到Bubbles和Cancelable.Bubbles的意思是该事件是否冒泡。Cancelable的意思是是否支持开发者可以阻止默认动作，与冒泡无关.