事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事件捕获则正好相反，事件捕获是由Netscape提出的，事件冒泡和捕获具体如下图所示：
虽然事件捕获是Netscape唯一支持的事件流模型，但目前IE9，火狐和谷歌也都支持这种事件流模型。
事件冒泡的好处
因为事件具有冒泡机制，因此我们可以利用冒泡的原理，把事件加到父级上，触发执行效果。这样做的好处当然就是提高性能了.
如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。
<head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function () { var aUl = document.getElementsById("bubble"); var aLi = aUl.getElementsByTagName("li"); //不管在哪个事件中，只要你操作的那个元素就是事件源。 // ie：window.event.srcElement // 标准下:event.target aUl.onmouseover = function (ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "li"){ target.style.background = "blue"; } }; aUl.onmouseout = function (ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() = "li"){ target.style.background = ""; } } }; </script> </head> <body> <div> <ul id = "bubble"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body>
阻止冒泡
<div onclick="showMsg(this,event)" id="outSide" style="100px; height:100px; background:#000; padding:50px"> <div onclick="showMsg(this,event)" id="inSide" style="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>