浅析js事件冒泡机制

什么是js事件冒泡呢？简单来说就是事件从事件源逐级向上传递，这一机制就叫事件冒泡机制。打个比方就好像某个地方发生了一件什么大事，县长要报告给市长，市长又要报告给省长，省长最后再报告给中央，这样一级一级往上传递消息。那么在js中这种事件机制有什么影响呢？且看下面代码：

<div>
    <p>
         <span></span>
    </p>
</div>

假如我给div、p和span标签各添加了一个点击事件，点击时分别弹出框弹出1、2、3。由于事件冒泡的影响，当我点击span元素的时候将依次弹出3、2、1。（可给3个元素设置不同的大小和背景色以保证点击的是span元素）这个应该很好理解。

有时我们不希望事件往上传递就可以用以下方法解决，

在W3c中，使用stopPropagation（）方法
 在IE下设置cancelBubble = true；

jquery中 return false;

这就好像告诉浏览器，这件事情太小了，父元素不需要知道，你自己处理吧,这样事件传播就停止在了事件源这一级别。

与之相对的还有一种事件处理机制叫事件捕获，事件捕获就是从上往下查找。就好像下面发生什么事的话，命令也是一级一级往下传达的。

总之记住下面规律就可以

事件捕获
当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
事件冒泡
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

可以理解为事件冒泡是底层发生事件需要向上级汇报，报告是一级一级往上传递；事件捕获是命令一级一级往下传达。