JavaScript Event學習第八章 事件的順序
2024-05-06 14:11:35
供稿：網(wǎng)友
基本問題很簡單。假設你的一個元素包含在另外一個元素中。
代碼如下:
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
-----------------------------------
這兩個元素都有onclick事件處理程序。如果用戶在element2上面單擊那么在元素2和元素1上都觸發(fā)了單擊事件。但是哪個事件先發(fā)生呢？哪個事件處理程序會先執(zhí)行呢？換句話說，事件順序（event order）是什么呢？
兩種模式
毫無疑問的，Netscape和微軟在過去那段很糟糕的日子里都做出了自己的決定。
Netscape說element1先發(fā)生的。這叫事件捕獲（event capturing）。
微軟覺得element2先發(fā)生的。這叫事件冒泡（event bubbling）。
這兩種事件順序剛好相反。IE只支持事件冒泡。Mozilla，Opera 7和Konqueror兩種都支持。早一些的Opear和iCab瀏覽器兩個都不支持。
事件捕獲
當你使用事件捕獲的時候
代碼如下:
---------------| |-----------------
| element1 | | |
| --------- --| |----------- |
| |element2 / / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
element1的事件處理程序會先執(zhí)行，element2后執(zhí)行。
事件冒泡
但你使用事件冒泡的時候
代碼如下:
/ /
---------------| |-----------------
| element1 | | |
| ---------- -| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
element2的事件處理程序會先執(zhí)行，element1的事件處理程序后執(zhí)行。
W3C模式
W3C決定在這場戰(zhàn)爭中保持重力。在W3C事件模型中任何事件發(fā)生都是首先被捕獲直到到達目標元素，然后再冒泡。
代碼如下:
| | / /
-----------------| |--| |-----------------
| element1 | | | | |
| ----------- --| |--| |----------- |
| |element2 / / | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------
作為設計師的你，可以隨意選擇把事件處理程序注冊在捕獲還是冒泡階段。通過之前高級模式里面介紹的addEventListener()方法就可以完成。如果最后一個參數(shù)是true那么就設置成為事件捕獲，如果是false就設置為事件冒泡。
假設你這樣寫
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
如果用戶在element2上單擊就會發(fā)生下面的事情：
、click事件發(fā)生在捕獲階段。這樣看來，如果element2的任何一個父元素有onclick事件處理程序那么都會執(zhí)行。
、事件在element1上發(fā)現(xiàn)了doSomething2()，那么就會執(zhí)行它。
、事件向下傳遞直到目標本身，再沒有其他的捕獲階段程序了。事件轉而進入冒泡階段然后就會執(zhí)行doSomething()，也就是element2注冊在冒泡階段的事件處理程序。
