关于JS中的事件冒泡和事件捕获

关于JS中的事件冒泡和事件捕获 

 事件冒泡

想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的 不是一个圆，而是一组圆。

如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面。

所以我理解的事件冒泡，就是从你所点击到的那个最小最具体的元素算起，比如说N多div层下面的一个按钮，那么最新触发的肯定是这个按钮对应的事件处理函数，如果这个按钮没有对应的响应函数，则事件像它的父容器抛出去，如果它父容器有响应函数，则执行，如果没有则继续一层层向上抛去

简单来说，就是从儿子开始，儿子没办法就找父亲。。。。

事件捕获 

事件捕获和事件冒泡正好相反，先从最外层开始找，然后在往下找

简单说，先找老子，再找儿子

再次盗用一张图说明吧



另外：

冒泡：所有浏览器均支持事件冒泡。Firefox、chrome、safari将事件一直冒泡到window对象。

捕获：Safari、chrome、Opera、firefox支持，但从window对象开始捕获（DOM2级规范是从document开始）。

W3C模型
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器
如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
4.哇，终于写完了，一边测试一边写的额，不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。