文中涉及大量內容來自于PPK的博客
現代前端開發應該要遵守:
html展示文檔內容，css渲染頁面效果，javascript提供交互
瀏覽器能夠提供交互可以追溯到Netscape公司在其第二個版本中支持javascript語言，隨后與微軟之間的瀏覽器大戰，以及w3c標準制定的落后，導致至今被詬病的瀏覽器兼容問題，這些問題中關于DOM事件模型無疑是棘手的一個。
在 Introduction to Events中PPK提到了如何學習javascript中的事件模型，概括來說就是理解：
- four event registration models
- two event accessing models
- two event orders
four event registration models
- **inline event registration model **
下面的代碼應該見過，直接在html文檔中對相應的元素注冊事件處理函數，好處是直觀，壞處也是直觀，破壞了文章開始提到的內容-展現-交互分離的原則
<A HREF="somewhere.html" onClick="doSomething(this);return false;">
行內注冊模型中this對象可以直接以參數的形式傳人,避免了查找觸發元素的問題。
- Traditional event registration model
下面這種事件注冊模型是在Netscape3中引入的，算是事實上的標準，當時瀏覽器大戰還未開始， IE基于Netscape用戶基數巨大，被迫實現了該標準。
element.onclick = doSomething;
該種事件注冊模型this值就是觸發事件的元素本身，該種事件模型的缺點就是一個事件只能注冊一個處理函數，如果多次注冊會發生之后注冊的事件處理函數覆蓋之前的函數。
element.onclick = startDragDrop;
element.onclick = spyOnUser;
spyOnUser會覆蓋之前的startDragDrop。
- Advanced event registration models
為了改進Netscape事件注冊模型的缺陷，w3c開發了自己的事件注冊模型，對于傳統方式不能處理的給一個事件注冊多個事件處理函數的問題，新的模型可以輕松做到
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
要移除某一個事件處理函數也很容易
element.removeEventListener('click',spyOnUser,false)
該種事件注冊模型this值也是觸發事件的元素本身
存在的一個問題是，如何知道某一元素是否注冊了相應的事件，對于傳統的時間注冊模型，可以：
alert(element.onclick)
值得欣喜的是：DOM Level 3 Events W3C 添加了eventListenerList 接口存儲當前注冊事件的元素的所有事件句柄列表，另外即便不清楚元素是否注冊了相應的事件，我們也可以使用removeEventListener()直接移除，因為該接口在移除一個并沒有注冊的事件是并不會報錯。
- Microsoftevent registration models
最后要說的是IE自己新搞的一套事件注冊模型，跟w3c的接口有異曲同工之效，例如可以使用下面的方式注冊
element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)
唯一不足的問題是：IE的模型只支持事件冒泡階段，并不支持事件捕獲。
其次IE的事件模型中的事件處理函數只是函數引用，什么意思呢，我們了解到javascript中this的值是隨著上下文變化而變化的，這樣就導致事件處理函數在被調用時this的值指向了window對象。而window對象在這里是沒一點用的。
two event accessing models
ok，已經為元素綁定了事件處理函數，接下來的問題就是如果獲知關于事件本身更多的信息，例如對于鼠標單擊事件，想要知道鼠標的位置， 非常抱歉的是，在那個瀏覽器大戰的年代，Netscape和微軟處于自身戰略的考慮，各自引入了自己的事件訪問模型，要命的是這兩種模型完全不兼容。
為了說明這兩種事件訪問模型，PPK給出了5個問題以及相應的回答：
-
事件的類型是什么？
( e | window.event).type -
事件target對應的HTML元素是誰？
e = e | window.event target = e.target || e.srcElement; if(target.nodeType == 3){ target = target.parentNode; } -
事件觸發過程中，哪一個鍵被按下？
e = e | window.event; if (e.keyCode){ code = e.keyCode; } else if (e.which){ code = e.which; } var character = String.fromCharCode(code); 事件觸發過程中，用戶使用的時鼠標的哪一個鍵？
首先是有兩個屬性可以判斷鼠標的哪一個鍵點擊：which和button，同時要注意這兩個屬性不總是在click事件中正常工作，安全的做法是使mousedown或者 mouseup事件 ,which是舊式Netscape瀏覽器中的屬性，
左鍵用1表示
中鍵(鼠標滾輪)是2
右鍵用3表示
button把事情全搞砸了，W3C給出的值是：
- Left button – 0
- Middle button – 1
- Right button – 2
而微軟的實現確是：
- Left button – 1
- Middle button – 4
- Right button – 2
關于鼠標按鍵的兼容上遇到了困難，你沒法區分用戶單擊了鼠標左鍵還是中鍵，搞笑的是微軟和w3c在關于鼠標右鍵的問題上達成一致，下面是關于鼠標右鍵的兼容方案：
function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which)
rightclick = (e.which == 3);
else if (e.button)
rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
5.事件觸發過程中鼠標的位置坐標是什么？
對于鼠標坐標計算的兼容問題同樣嚴峻，盡管規范提供了不少于6個鼠標坐標屬性，但是沒有一個可信賴的跨瀏覽器方式去找到鼠標相對于文檔document的坐標，下面是作者提供的一個方案
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
}
two event orders
w3c在event orders的問題上扮演了和事佬的角色，博采眾家之長，產生了w3c的事件模型，在w3c的事件模型中，首先進行事件捕獲的階段，直到到達target元素，然后進行事件冒泡的過程：
事件有捕獲或者冒泡階段，實際的應用價值是什么呢？個人觀點僅供參考:
- 對于復雜的界面，逐一給每一個元素單獨綁定事件顯得繁瑣枯燥，一種可操作的方案就是讓事件冒泡到根元素，然后由根元素做統一處理。
- 對于復雜界面，為每個元素綁定事件勢必消耗大量資源，統一由根元素處理節省了資源。
- 采用事件冒泡的方式處理事件，使得對于未來插入文檔中的元素也能觸發之前綁定的事件，這一點可以參考jquery中delegete方法的實現原理，具體可以參考這篇文字
既然事件有冒泡的特性，那有沒有一種方式可以取消這種特性呢？
在IE中可以這樣
window.event.cancelBubble = true
遵循w3c規范的瀏覽器中可以這樣
e.stopPropagation()
currentTarget 對象
前面講過 target 指向的是當前事件正在發生在哪個元素身上，要明確一點是：不論是在事件捕獲還是冒泡階段，target對象是不會發生變化的，那么如果多個元素綁定了同一事件，如何知道哪個元素正在處理事件呢？ w3c引入了currentTarget 對象，可惜IE沒有相似對應的屬性.
