前端事件處理的四種方法
事件就是使用者或瀏覽器自身執行的某種動作,比如CLICK,LOAD,MOUSEOVER等等,響應事件的函式就是事件處理函式。
1.事件處理可以直接在HTML級別寫,<button onclick="somefunction()" />這樣就可以呼叫在頁面其他地方定義的指令碼,當然也可以直接在ONCLICK後面寫函式。
事件處理程式的程式碼在執行時,有權訪問全域性作用域的任何程式碼。
這種方式下,首先會建立一個封裝著元素屬性值的函式,這個函式中有個區域性變數EVENT,就是事件物件。
通過EVENT物件,可以訪問事件物件。並且在這種方式下,THIS的值就等於事件的目標元素,這個例子中就是點選的BUTTON。
這個函式擴充套件作用域的方法是這樣的:
function(){
with(document){
with(this){
//元素屬性值
}
}
}
2.事件處理也可以在DOM0級實現。
這是通過JS指定事件處理程式的傳統方式,就是將一個函式賦值給一個事件處理程式屬性。
每個元素,都有自己的事件處理程式屬性,我們先獲得元素,再設定它的事件處理程式即可。
這個時候的事件處理程式的作用域是元素的作用域,THIS就指向當前元素。
這種方式新增的函式會在事件的冒泡階段被處理。
3.事件處理也可以在DOM2級實現。
DOM2級在DOM0級的基礎上添加了更多的介面,用於事件處理的有兩個方法,addEventListener()和removeEventListener()
所有DOM節點都包含這兩個方法,接受三個引數,要處理的事件名,函式,和一個表示處理階段的布林值(TRUE表示在捕獲階段呼叫,FALSE表示在冒泡階段呼叫)
eg: btn,addEventListener("click",funciton()'{},false);
這種方法的好處是可以新增多個函式。執行順序就是新增的順序:先新增先執行。
4.IE中實現了與DOM中類似的方法,attachEvent()和detachEvent(),新增的事件在冒泡階段執行
但是這種方法下,THIS不指向元素,作用域變成全域性作用域,THIS指向WINDOW了。
它的執行順序也和DOM2級方法返回來,先新增後執行。
參考資料《JS高程》