事件冒泡

恶补一下js中事件的问题！

事件冒泡

当一个元素接收到事件的时候，会把它接收到的所有传播给它的父级。一直到顶层document对象。什么意思呢，看看图解吧！

具体有什么用处呢，先来看一个简单的例子。在有些网页中，页面侧边经常会有一个分享功能。鼠标移入，侧边内容展开，选择要分享的平台，鼠标移开，侧边内容则收回。

看看代码，原理是通过改变div1的left的值来实现展开和隐藏。运用事件冒泡机制，当鼠标移入到div2上面时，事件会传给它的父级div1，然后让div1来调用函数，将left值变为0。（额……这里好像可以用this来代替oDiv。）移开时，left值为-100。

在默认情况下，冒泡事件是存在的。如果需要阻止冒泡事件，只需在事件函数中添加event.cancelBubble=true;

如下代码结构，红、绿、蓝三层div嵌套。给它们分别都加上点击事件，并调用同一个函数，弹出它们的id名称。

受事件冒泡的影响。点击红色div时弹出“div1”；点击绿色div时弹出“div2”，然后弹出“div1”；点击蓝色div时弹出“div3”，然后弹出“div2”，最后弹出“div1”。

在事件函数中添加event.cancelBubble=true后，点击div，就会弹出相应的id名称。