事件流的冒泡与捕获

什么是事件流

浏览器厂商最是一种两极对立，微软的IE和网景的Netscape，这两大厂商各自规定了自家浏览器的事件流，IE是冒泡，网景是捕获。

那什么又是冒泡呢？
冒泡可以比作小鱼吐泡泡，从最小的泡泡到水面上泡泡越来越大，对于文档的事件而言就是从最精确的元素对象到模糊的元素，比如从一个绑定了点击事件的div到最外层的document。

捕获相对冒泡来说方向相反，毕竟这两家也不愿意说谁是在抄袭谁，所以网景的捕获的事件流方向是从最模糊的元素到精确的元素，可以理解为从document再到div。

后来W3C为了改变这种尴尬的局面，向两家公司统一了事件流，即：
捕获—》目标元素—》冒泡

冒泡

其实我们最常用的事件流方式就是以冒泡的形式，在鼠标事件中有一个mouseover和mouseout事件表示鼠标的移入移出，此时我在父亲盒子上设置一个mouseover事件，再移动到子盒子上同样会触发事件，这就是冒泡。

以上只是一个举例，其实所有的DOM0级事件都是以冒泡的形式存在的。0级事件即使用on关键字+事件名称对元素绑定事件的形式（如：document.οnclick=function(){}）

今天针对事件流就主要讲一下Dom2级事件

Dom2级事件

Dom2级事件的注册形式为：
元素.addEventListener(“事件名”，函数，布尔值)

addEventListener方法一共有三个参数，第一个事件名就是0级事件中on后面的单词，这个函数就是事件触发以后需要执行的函数，还有最后一个布尔值表示该事件流是否为捕获，true为捕获，false为冒泡，

代码示例

1、结构代码

2、冒泡代码与结果
此时的第三个参数为false

3、捕获代码与结果
此时将第三个参数改为true