javascript中的事件問題的總結
一.什麽是事件？
事件就是DOM和瀏覽器之間的交互行為(只要觸發了這個行為，也就相當於觸發了事件)，我們可以通過事件監聽來綁定事件，例如：box.onclick=function(){}，如果我們點擊了這個盒子，就觸發了盒子的click事件，同樣會把事件綁定給這個方法，讓其執行某一些特定的操作。(事件是瀏覽器默認給的，與生俱來的，綁定事件時不過是給某一特定元素綁定對應的事件名以及方法，讓其執行特定的方法)
事件綁定：就是給某一個元素的相關事件行為綁定方法
-> DOM 0級事件：
-> DOM 2級事件：
二.DOM 0級與DOM 2級事件的區別：
1.DOM 0級
1).我們通過事件的監聽處理程序 onclick屬性=function(){}這種形式綁定的事件，叫做DOM 0級事件
2).所有的DOM 0級事件都是在冒泡，執行的事件處理函數
3).只能給當前元素的某一個事件綁定一個方法，綁定多個的時候，後邊綁定的會將前邊的覆蓋掉
4).我們所說的事件是文檔和瀏覽器的交互行為，而文檔是DOM，DOM包含了html和document
5).移除事件監聽的處理程序就是直接訪問DOM對象的事件監聽屬性，然後講處理事件的函數設置為null，比如：
2.DOM２級
1).可以給當前元素的某一事件類型綁定多個不同的方法，觸發事件，這些綁定的方法會按照在事件池中的順序(和綁定的的順序相同)依次把方法執行(IE
低版本有區別)
2).DOM 2中有一些單獨的事件，這些事件不是元素的私有屬性，所以只有DOM2的綁定方式才會給這些事件綁定方法，例如：DOMContentLoaded...
3).DOM 2級事件處理事件函數的執行時間是在捕獲階段執行還是在冒泡階段執行
4).DOM２級事件的事件監聽，是通過DOM元素的原型鏈查找事件對象上的原型上的addEventListener實現的監聽事件
5).移除事件監聽，是通過removeEventListener實現的移除事件監聽(標準瀏覽器)
6).如果第三個參數不傳參的話，我們默認是false，也就是在冒泡階段發生的
7).事件處理程序中的this是當前觸發事件的元素對象
註：1.在IE瀏覽器中是不同的，IE中的DOM 2級事件，是通過attachEvent()實現的事件監聽和detachEvent()事件移除監聽，只支持兩個參數，將所有事件都定義在冒泡階段執行，IE瀏覽器以及IE8以前，即使是DOM 2級事件，也只是支持事件的處理函數，在冒泡階段執行。
2.IE中的事件處理程序的this是window
三.事件流：
事件的觸發執行分為三個步驟：事件捕獲階段->捕獲事件源->事件冒泡階段
事件的默認傳播機制:
->捕獲階段:從外向內依次查找元素
->目標階段:當前事件源本身的操作
->冒泡階段:從內到外依次觸發相關的行為(我們最常用的就是冒泡階段)
利用事件傳播機制可以實現事件委托。
四.事件的相關兼容處理：
ele.addEventListener(type,fn,[bool]); DOM 2級 綁定事件
ele.removeEventListener(type,fn,[bool]); DOM 2級 移除事件
ele.attachEvent(‘on‘+type,fn); DOM 2級 IE中綁定事件
ele.detachEvent(‘on‘+type,fn); DOM 2級 IE中移除事件
e=e||window.event; 獲取事件對象
e.target=e.target||e.srcElement; 獲取事件源
e.stopPropagation?e.stopPropagation():e.cancelBubble=true; 阻止事件傳播
e.preventDefault?e.preventDefault():e.returnValue=false; 阻止事件冒泡
e.pageX=e.pageX||(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;
e.pageY=e.pageY||(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
IE6~8中DOM 2級事件綁定存在的問題：
1).this指向問題，默認的this指向window；
2).重復問題，綁定事件的時候，能夠重復給同一元素的同一行為，綁定同一事件處理程序；
3).順序混亂，給元素綁定事件處理程序後，執行的先後順序與綁定的先後順序不一致；
javascript中的事件問題的總結