1、以下是JavaScript事件兼容性寫法,使用者可以隨意使用,兼容所有瀏覽器。包括IE6(親測)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo">
<a>點擊我將獲得節點1</a>
<a>點擊我將獲得節點2</a>
</p>
<script type="text/javascript">
// event(事件)工具集
eventUntil = {
// 頁面加載完成后
// 主要是原生JS,頁面只能加載一次window.onload;這里使用該方法可以綁定多個方法。
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 下面的順序:標准dom2,IE dom2, dom
// 參數: 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因為IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();// 標准w3c
} else {
ev.cancelBubble = true;// IE
}
},
// 取消事件的默認行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();// 標准w3c
} else {
event.returnValue = false;// IE
}
},
// 獲取事件目標
getTarget : function(event) {
// 標准W3C 和 IE
return event.target || event.srcElement;
},
// 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
eventUntil.readyEvent(function(){
console.log("相比於window.onload可以綁定多個 按順序執行。");
})
eventUntil.addEvent(document.getElementById("demo") , "click" , function(){
alert("我點擊了p元素")
})
</script>
</body>
</html>
