事件冒泡

事件冒泡：一个元素接收到事件以后，会把自身接收的所有事件全部传播给它的父级，直到最顶层window。

上述div 的嵌套关系是存在事件冒泡的。无论css如何对上面三个div进行位置的定位。

冒泡机制是默认存在的；

当点击div3时，不但会弹出div3 还会有div2 div1.当oDiv2.onclick = fn1被注释时，点击div3，不但会弹出div3 还会有div1 弹出。（这也就是说明，oDiv2.onclick = fn1被注释之后，div2还是能够接收到div3传过来的点击事件，没有弹出div2的原因是没有告诉div2在接收到点击事件后如何进行处理。例如上面的注释不能说是给div2 添加事件，应该是给div2 添加了事件处理函数。）

2、冒泡机制的存在即给我们带了便利也给我们带来了一些不必要的麻烦。冒泡机制是默认存在的（可能是存在带来的好处优于带来麻烦）。

3、阻止事件冒泡：

在当前要阻止冒泡的时间函数中调用：ev.cancelBubble =true;

4、因为事件冒泡要传到父级，如果想对某些结构进行处理的时候，尤其是嵌套结构，可以想一想事件的冒泡机制。

阻止事件冒泡

W3C的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation是事件对象Event的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止默认行为

什么是冒泡事件？如在一个按钮是绑定一个click事件，那么click事件会依次在它的父级元素中被触发，stopPropagation就是阻止目标元素的事件冒泡到父级元素

阻止事件冒泡兼容:

阻止浏览器默认行为

W3C的方法是e.preventDefault()，IE则是使用e.returnValue = false

preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为。如果元素没有默认行为，调用无效。什么元素有默认行为呢？如链接a标签，提交按钮input标签

return false:

JS的return false只会阻止默认行为，而jQuery则既阻止默认行为又防止对象冒泡

阻止浏览器默认行为兼容：

参考链接：

https://segmentfault.com/a/1190000008457972