關於事件寫了一系列文章
1.事件流(事件捕獲和事件冒泡)
http://blog.csdn.net/github_34514750/article/details/53067077
2.事件處理程序
http://blog.csdn.net/github_34514750/article/details/53083973
3.事件對象
http://blog.csdn.net/github_34514750/article/details/53084014
4.通用的事件偵聽器函數
本文介紹通用的事件偵聽器函數
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.寫一個通用的事件偵聽器函數(機試題)。
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;
}
},
//根據情況分別獲取DOM或者IE中的事件對象,事件目標,阻止事件的默認行爲
getEvent: function(event) {
return event ? event: window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
//根據情況分別使用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;
}
}
//根據情況分別取消DOM或者IE中事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
var btn = document.getElementById("myBtn"),
handler = function () {
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);