JavaScript Event學習第八章：事件的順序

基本問題很簡單。假設你的一個元素包含在另外一個元素中。

-----------------------------------<BR>| element1 |<BR>| ------------------------- |<BR>| |element2 | |<BR>| ------------------------- |<BR>| |<BR>-----------------------------------<BR>

這兩個元素都有onclick事件處理程序。如果用戶在element2上面單擊那么在元素2和元素1上都觸發了單擊事件。但是哪個事件先發生呢？哪個事件處理程序會先執行呢？換句話說，事件順序（event order）是什么呢？

兩種模式
毫無疑問的，Netscape和微軟在過去那段很糟糕的日子里都做出了自己的決定。
Netscape說element1先發生的。這叫事件捕獲（event capturing）。
微軟覺得element2先發生的。這叫事件冒泡（event bubbling）。
這兩種事件順序剛好相反。IE只支持事件冒泡。Mozilla，Opera 7和Konqueror兩種都支持。早一些的Opear和iCab瀏覽器兩個都不支持。

事件捕獲
當你使用事件捕獲的時候

| |<BR>---------------| |-----------------<BR>| element1 | | |<BR>| --------- --| |----------- |<BR>| |element2 / | |<BR>| ------------------------- |<BR>| Event CAPTURING |<BR>-----------------------------------<BR>

element1的事件處理程序會先執行，element2后執行。

事件冒泡
但你使用事件冒泡的時候

/ <BR>---------------| |-----------------<BR>| element1 | | |<BR>| ---------- -| |----------- |<BR>| |element2 | | | |<BR>| ------------------------- |<BR>| Event BUBBLING |<BR>-----------------------------------<BR>

element2的事件處理程序會先執行，element1的事件處理程序后執行。

W3C模式
W3C決定在這場戰爭中保持重力。在W3C事件模型中任何事件發生都是首先被捕獲直到到達目標元素，然后再冒泡。

| | / <BR>-----------------| |--| |-----------------<BR>| element1 | | | | |<BR>| ----------- --| |--| |----------- |<BR>| |element2 / | | | |<BR>| -------------------------------- |<BR>| W3C event model |<BR>------------------------------------------<BR>

作為設計師的你，可以隨意選擇把事件處理程序注冊在捕獲還是冒泡階段。通過之前高級模式里面介紹的addEventListener()方法就可以完成。如果最后一個參數是true那么就設置成為事件捕獲，如果是false就設置為事件冒泡。

假設你這樣寫

element1.addEventListener('click',doSomething2,true)<BR>element2.addEventListener('click',doSomething,false)<BR>

如果用戶在element2上單擊就會發生下面的事情：
1、click事件發生在捕獲階段。這樣看來，如果element2的任何一個父元素有onclick事件處理程序那么都會執行。
2、事件在element1上發現了doSomething2()，那么就會執行它。
3、事件向下傳遞直到目標本身，再沒有其他的捕獲階段程序了。事件轉而進入冒泡階段然后就會執行doSomething()，也就是element2注冊在冒泡階段的事件處理程序。
4、事件再向上傳遞再檢查是否有父元素在冒泡階段設置事件處理程序。這里沒有，所以什么也不會發生。

反過來：

element1.addEventListener('click',doSomething2,false)<BR>element2.addEventListener('click',doSomething,false)<BR>

現在如果用戶在element2上面點擊就會發生：
1、事件click發生在捕獲階段。事件會查找element2的父元素是否有在捕獲階段注冊事件處理程序，在這里沒有。
2、事件向下傳遞直到目標本身。然后開始冒泡階段，執行dosomething()，這個是注冊在element2冒泡階段的事件處理程序。
3、事件繼續向上傳遞然后檢查是否有父元素在冒泡階段注冊了事件處理程序。
4、事件發現了element1.然后doSomething2()就被執行了。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈