關於事件寫了一系列文章
1.事件流(事件捕獲和事件冒泡)
http://blog.csdn.net/github_34514750/article/details/53067077
2.事件處理程序
本文介紹事件處理程序
3.事件對象
http://blog.csdn.net/github_34514750/article/details/53084014
4.通用的事件偵聽器函數
http://blog.csdn.net/github_34514750/article/details/53084034
5.事件循環(event loop)
http://blog.csdn.net/github_34514750/article/details/53067106
6.事件代理((event delegation)
http://blog.csdn.net/github_34514750/article/details/53067133
1.事件處理程序(HTML事件處理程序,DOM0事件處理程序,DOM2事件處理程序,IE事件處理程序,跨瀏覽器事件處理程序)
在以下幾點進行對比和了解:
1.各種事件處理程序的添加和刪除
2.在捕獲階段或者是冒泡階段執行事件處理程序
3.是否可以添加多個事件處理程序
HTML事件處理程序
DOM0級事件處理程序
1.=null就是事件的刪除
2.這種事件處理程序會在事件流的冒泡階段被處理
3.DOM0級對每個事件只支持一個事件處理程序
// 添加事件處理程序
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert(this.id); //"myBtn"
};
//刪除事件處理程序
btn.onclick = null;
DOM2級事件處理程序
DOM2級方法添加事件處理程序主要好處是可以添加多個事件處理程序,並按照他們的順序觸發
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function() {
alert(this.id);
},false);
btn.addEventListener("click",function() {
alert("Hello World!");
},false);
attention:通過addEventListener和removeEventListener來添加和刪除事件處理程序,但是移除和添加處理程序的時候參數必須相同,這意味着addEventListener添加的匿名函數將無法移除
//錯誤的寫法
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function() {
alert(this.id);
},false);
// 這個和addEventListener的函數完全不是同一個函數,匿名函數無法移除
btn.removeEventListener("click",function() {
alert(this.id);
},false);
//正確的寫法
var btn = document.getElementById("myBtn"),
handler = function() {
alert(this.id);
};
btn.addEventListener("click",handler,false);
// 這樣就刪除掉了
btn.removeEventListener("click",handler,false);
IE事件處理程序
1.增加刪除事件處理程序attachEvent()和detachEvent()
2.IE只支持冒泡,因此由attachEvent()添加的事件處理程序會被添加到冒泡階段
3.attachEvent()方法也可以爲一個元素添加多個事件處理程序
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert("Clicked");
});
跨瀏覽器事件處理程序
var EventUtil = {
//根據情況分別使用dom2 || IE || dom0方式 來添加事件
addHandler:function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on" + type,handler);
} else {
element["on" + type] = handler;
}
},
//根據情況分別使用dom2 || IE || dom0方式 來刪除事件
removeHandler:function(element,type,handler){
if(element.removeHandler) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on" + type,handler);
} else {
element["on" + type] = null;
}
}
}
var btn = document.getElementById("myBtn"),
handler = function () {
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);