JavaScript 事件冒泡簡介及應用
2024-05-06 14:11:50
供稿：網友
一、什么是事件冒泡
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
打個比方說：你在地方法院要上訴一件案子，如果地方沒有處理此類案件的法院，地方相關部門會幫你繼續往上級法院上訴，比如從市級到省級，直至到中央法院，最終使你的案件得以處理。
二、事件冒泡有什么作用
（1）事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
【集中處理例子】
代碼如下:
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定義了處理方法，而這個方法一樣可以捕獲到子元素點擊行為并處理它。假設有成千上萬子元素要處理，難道我們要為每個元素加“onclick="eventHandle(event)"”？顯然沒有這種集中處理的方法來的簡單，同時它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
}
</script>
（2）讓不同的對象同時捕獲同一事件，并調用自己的專屬處理程序做自己的事情，就像老板一下命令，各自員工做自己崗位上的工作去了。
【同時捕獲同一事件例子】
代碼如下:
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert('My name is outSide,I was working...');
}
function inSideWork()
{
alert('My name is inSide,I was working...');
}
//因為下面程序自動激活單擊事件，有些瀏覽器不允許，所以請單擊灰色盒子，從這里開始下命令，這樣因為冒泡的原因，黑色大盒子也會收到單擊事件，并調用了自己的處理程序。如果還有更多盒子嵌套，一樣道理。
/*
function bossOrder()
{
document.getElmentById('inSide').click();
}
bossOrder();
*/
</script>
三、需要注意什么
●事件捕獲其實有三種方式，事件冒泡只是其中的一種：（1）IE從里到外（inside→outside）的冒泡型事件。（2）Netscape4.0從外到里（outside→inside）的捕獲型事件。（3）DOM事件流，先從外到里，再從里到外回到原點（outside→inside→outside）的事件捕獲方法（似乎對象將觸發兩次事件處理，這有什么作用？鄙人不懂！）。
