事件冒泡机制
事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。
举个例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <script src="demo2.js"></script> </head> <body> <div id = "first" style="padding : 20px;background-color: #ff0; 150px;"> <div id="second" style="background-color :#f00;100px;height:100px;border :1px dashed #000"></div> </div> </body> </html>
//demo2.js window.onload = setupEvents; function setupEvents(){ document.getElementById("first").onmousedown=function(){ alert("first element event"); } document.getElementById("second").onmousedown=function(){ alert("second element event"); } document.onmousedown=function(){ alert("document event"); } }
如果单击最里面的div元素，不论在什么浏览器中将弹出三个警告窗口，依次显示：
1.Second element event
2.First element event
3.Document event
取消事件冒泡机制
如果你有一个元素堆栈，且只希望一个元素触发该事件处理程序，可以取消事件冒泡机制。IE中的属性：cancelBubble，Mozila中的属性：stopPropagation。代码如下：
function stopEvent(evnt){ if(evnt.stopPropagation){ evnt.stopPropagation(); }else{ evnt.cancelBubble = ture; } }
现在修改demo2.js中的first id的js代码：
//demo2.js window.onload = setupEvents; function setupEvents(){ // document.getElementById("first").onmousedown=function(){ // alert("first element event"); // } // document.getElementById("first").onmousedown=function(evnt){ var theEvent = evnt ? evnt :window.event; alert("first element event"); stopEvent(theEvent); } document.getElementById("second").onmousedown=function(){ alert("second element event"); } document.onmousedown=function(){ alert("document event"); } } function stopEvent(evnt){ if(evnt.stopPropagation){ evnt.stopPropagation(); }else{ evnt.cancelBubble = ture; } }
然后试验，你会发现最后一个针对文档事件处理程序的警告窗口将不会影响，因为在时间到达栈顶之前，事件已经取消了。