JavaScript事件冒泡简介及应用

一、什么是事件冒泡

定义:JavaSciprt事件中有两个很重要的特性：事件冒泡 以及目标元素 。
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
目标元素: 任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。

二、事件冒泡有什么作用

（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
}
</script>

（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。

三、需要注意什么

●事件冒泡的捕获顺序。
●不冒泡的事件：blur、focus、load、unload。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。
在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为，比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

四、阻止事件冒泡

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>

window.event.cancelBubble可以用来设置是否启用事件传播.但是这只能在IE是使用,如果跨浏览器就不太合适了,Jquery中的event.stopPropagation()解决了浏览器的兼容性。

Thanks：/article/5890154.html AND http://www.cnblogs.com/wuhen/articles/1798348.html