[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时，点击的事件不仅仅发生在按钮上，同时点击的还有这个按钮的容器元素，甚至也点击了整个页面。
事件流
事件流描述了从页面接收事件的顺序，但在浏览器发展到第四代时，浏览器开发团队提出了两种完全相反的事件流。
冒泡事件流：IE提出的事件流，即事件由最具体的元素接收，逐级向上，传播到页面。
捕获事件流：Netscape提出的事件流，即事件由页面元素接收，逐级向下，传播到最具体的元素。
两种事件流在DOM2级事件模型中得到了统一，相较于DOM0级事件模型，DOM2级有着如下特点：
1、允许在某个元素上绑定多个同类型的事件
2、规定了事件流的三个阶段：捕获阶段、目标阶段、冒泡阶段
【测试】使用addEventListener输出事件流过程:
分别在window、document、html、body、btn上绑定事件，单击按钮，输出结果如下[FF测试]
可以看到当事件处于目标阶段时，并不只触发一次，而是分别属于捕获和冒泡两个阶段。
尽管DOM2级事件规定了事件的三个阶段，但遗憾的是，IE8及以下浏览器只支持冒泡事件流。
【测试】使用attachEvent输出事件流过程：
分别在window、document、html、body、btn上绑定事件，单击按钮，输出结果如下[IE8测试]
可以看到仅输出了目标和冒泡阶段的信息，并且绑定在window上的事件并没有被触发，IE8及以下浏览器的冒泡事件仅冒泡到document
目前支持以attachEvent绑定事件的浏览器：IE6-10
阻止事件传递
通过前面的讲述，可以知道在事件流中，某元素的事件被触发，同时也会导致其容器元素上的同类型事件被触发。但很多时候，我们并不希望这样的结果。
此时可以通过stopPropagation()或cancelBubble来阻止事件向下一级元素传递。
stopPropagation()
stopPropagation()是W3C标准下阻止事件传递的方法
【测试】使用addEventListener绑定，测试stopPropagation():
分别在box0-2上绑定事件，单击box0，输出结果[FF测试]
由于addEventListener可以设置是否在捕获阶段运行，故可分为[在捕获阶段阻止事件传递]和[在冒泡阶段阻止事件传递]
1、在捕获阶段阻止事件传递
2、在冒泡阶段阻止事件传递
通过测试，可以看到当阻止事件传递后，事件流将不会继续执行。
【测试】使用attachEvent绑定，测试stopPropagation():
分别在box0-2上绑定事件，单击box0，输出结果[IE8测试]
由于attachEvent不支持捕获事件流，故仅冒泡阶段测试其对stopPropagation()的支持程度：
可以看到attachEvent的event对象不支持stopPropagation()方法
cancelBubble
cancelBubble是IE标准下阻止事件传递的属性，设置cancelBubble=true表示阻止冒泡
【测试】使用addEventListener绑定，测试cancelBubble:
分别在box0-2上绑定事件，单击box0，输出结果
1、在捕获阶段阻止：
[FF测试]
[Chrome测试]
[IE11测试]
可以看到，只有在FF上的结果是我们期望的结果，此外，通过对Safari、Opera进行测试，输出结果与Chrome一致；对IE9-10进行测试，输出结果与IE11一致
2、在冒泡阶段阻止：
FF、Chrome、Safari、Opera、IE9-11均输出上图结果。
【测试】使用attachEvent绑定，测试cancelBubble:
分别在box0-2上绑定事件，单击box0，输出结果[IE8测试]
总结
综合测试结果，总结stopPropagation()及cancelBubble兼容性如下：
| element.on[type] = triggerFn | addEventListener | attachEvent | ||
| 在冒泡阶段阻止 | 在捕获阶段阻止 | 在冒泡阶段阻止 | 在冒泡阶段阻止 | |
| stopPropagation() | 除IE8及以下，其他均支持，且结果正确 | 支持，且结果正确 | 支持，且结果正确 | 不支持 |
| cancelBubble | 支持，且结果正确 | 支持，但只有FF正确 | 支持，且结果正确 | 支持，且结果正确 |
使用时需要注意以下几点：
1、虽然阻止事件传递分为W3C标准（stopPropagation()）和IE标准（cancelBubble），但并不意味着该属性或方法为各自浏览器所所独有。测试表明，FF、Chrome等高级浏览器同样支持IE标准下的cancelBubble。
2、若需要在捕获阶段阻止事件传递，使用addEventListener()进行事件监听，同时使用e.stopPropagation()阻止冒泡。
3、若需要在冒泡阶段阻止事件传递，在兼容addEventListener()和attachEvent()的同时，为保险起见，需要对阻止事件传递方式进行兼容。以下仅表示在DOM2及事件模型下兼容方式：
阻止默认事件
一些元素在一般状态下存在默认行为，如：
对配置了href的<a>绑定单击事件fn1，点击后会首先执行fn1，但之后也会执行<a>标签的默认行为，即：跳转href指向的页面。
对<form>中的<input type="submit">绑定单击事件fn2，点击后首先会执行fn2，之后再执行<input type="submit">的默认行为，即：提交表单数据。
为解决元素默认事件对绑定事件的影响，我们可以采用event对象提供的方法进行处理。
preventDefault()
preventDefault()是W3C标准下阻止元素默认事件的方法。
【测试】使用DOM0事件模型进行绑定，测试preventDefault():
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[FF]：
点击链接后，输出“点击了<a>”，且页面不进行跳转，说明阻止事件成功。
测试兼容性后发现，仅IE8及以下浏览器不支持preventDetault()
【测试】使用DOM2事件模型addEventListener进行绑定，测试preventDefault():
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[FF]：
测试发现，对于支持addEventListener的浏览器，无论捕获还是冒泡阶段都可以阻止默认事件。
【测试】使用DOM2事件模型attachEvent进行绑定，测试preventDefault():
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[IE8]：
测试发现，对于支持attachEvent的浏览器，均不支持e.preventDefault()
returnValue = false
returnValue是IE标准下阻止元素默认事件的方法，设置returnValue = false表示阻止默认事件。
【测试】使用DOM0事件模型进行绑定，测试returnValue:
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[FF]：
点击链接后，输出“点击了<a>”，但页面进行跳转，说明阻止事件失败。
测试兼容性后发现，IE8、Chrome、Safari、Opera设置returnValue=false时，会阻止元素的默认事件；而FF、IE9-11则不会阻止。
【测试】使用DOM2事件模型addEventListener进行绑定，测试returnValue:
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[FF]：
测试发现，对于支持addEventListener的浏览器：
在捕获阶段：FF、IE9-11不会阻止默认事件，而Chrome、Opera、Safari会阻止。
在冒泡阶段：IE9-11不会阻止默认事件，而FF、Chrome、Opear、Safari会阻止。
【测试】使用DOM2事件模型attachEvent进行绑定，测试returnValue:
在<a htrf = "http://www.baidu.com">上绑定单击事件，点击<a>，输出结果[IE8]：
测试发现，对于支持attachEvent的浏览器，returnVaule=false可以阻止默认事件。
总结
综合测试结果，preventDefault和returnValue的兼容性如下（T：支持该属性或事件且结果正确；F：不支持该属性或事件或结果不正确：—：不支持该事件绑定方式）：
| 函数名 | 事件绑定方式 | 事件流 | FF | Chrome | Opera | Safari | 模拟IE8 | 模拟IE9 | 模拟IE10 | IE11 |
|---|---|---|---|---|---|---|---|---|---|---|
| preventDetault() | element.on[type] = fn | 冒泡 | T | T | T | T | F | T | T | T |
| addEventListener() | 捕获 | T | T | T | T | — | T | T | T | |
| 冒泡 | T | T | T | T | — | T | T | T | ||
| attachEvent() | 冒泡 | — | — | — | — | F | F | F | — | |
| returnValue=false | element.on[type] = fn | 冒泡 | F | T | T | T | T | F | F | F |
| addEventListener() | 捕获 | F | T | T | T | — | F | F | F | |
| 冒泡 | F | T | T | T | — | F | F | F | ||
| attachEvent() | 冒泡 | — | — | — | — | T | F | F | — |
使用时需要注意以下几点：
1、为兼容不同浏览器，可编写如下代码：
但实际上，这样也存在着雷区，对于IE9和IE10，支持addEventListener和attachEvent进行事件绑定，而对照上表，IE9和IE10在使用attachEvent进行绑定时，无法阻止默认事件。故应在事件绑定兼容时，优先检验addEventListener。
2、以前一直将returnValue = false与return false混淆，此处应注意returnValue是IE标准下Event对象的属性，仅用于阻止元素的默认事件。而return false的作用范围更加广泛，如：阻止事件、跳出循环、返回对象等等，方便的一刀切容易出错，不可滥用。
