JavaScript事件模型

JavaScript和HTML之間的互動是通過事件來實現的。

JavaScript事件模型主要有三種：DMO0級事件處理程式（原始事件模型）、DMO2級事件處理程式、IE事件處理程式。

1.DMO0級事件處理程式（原始事件模型）

特點：

①簡單；

②具有跨瀏覽器的優勢；

③this：當前元素（使用DOM0級方法指定的事件處理程式被認為是元素的方法，事件處理程式是在元素的作用域中執行）;

④一個DOM物件只能註冊一個型別的事件，如果註冊了兩個，則會發生覆蓋，只執行後一個事件；

程式碼：

①新增事件

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    console.log(this.id);//"myBtn"
}
複製程式碼

②刪除事件

var btn = document.getElementById("myBtn");
btn.onclick = null;
複製程式碼

2.DMO2級事件處理程式

特點：

①一個DOM物件可以註冊多個事件處理程式，會依次觸發；

②addEventListener()、removeEventListener()均接受三個引數：要處理的事件名、作為事件處理程式的函式、一個布林值；而布林值若為true，則代表在捕獲階段呼叫事件處理程式，為false，則代表在冒泡階段呼叫事件處理程式。

程式碼：

①新增事件

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    console.log(this.id);//"myBtn"
},false)

btn.addEventListener("click",function(){
    console.log('Hello!');//"myBtn"
},false)
複製程式碼

②刪除事件

var btn = document.getElementById("myBtn");
btn.removeEventListener("click",function(){
    console.log(this.id);//沒用。。。。
},false)
複製程式碼

正確的：

var btn = document.getElementById("myBtn");
var hander = function(){
console.log(this.id);
}
btn.addEventListener("click",hander,false);

btn.removeEventListener("click",hander,false);
複製程式碼

3.IE事件處理程式

特點：

①一個物件可以註冊多個事件處理程式，但並非依次觸發，而是相反順序被觸發(與DOM方法不同)；

②this：window物件（與DOM0級方法中有所區別）;

程式碼：

①新增事件

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){//注意第一個引數為 onclick
    console.log('Click!');
});
btn.attachEvent("onclick",function(){//注意第一個引數為 onclick
    console.log('Hello!');
});

//先 "Hello!" 再"Click!"
複製程式碼