一、什麼是事件冒泡
二、事件冒泡有什麼作用
<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>
<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>
三、需要注意什麼
四、阻止事件冒泡
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例你實際希望點擊灰色盒子打開google首頁,而點擊黑色盒子打開baidu首頁,但結果你點擊灰色盒子的時候,卻是同時打開了兩個網頁。其實在實際設計中較少遇到此問題,你可能會想如果我在頁面不同DOM深處安置了不同的按鈕或鏈接,深層處的事件觸發會不會波及頂層的按鈕呢?不會,因爲按鈕不能形成嵌套關係。
function openWin(url)
{
window.open(url);
}
</script>
<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>