JavaScript添加IE事件處理程序
阿新 • • 發佈:2018-02-26
als 不能 type light div 匿名函數 綁定 use gpo
IE和其他主流的瀏覽器之間有很多的不兼容,有一些其他瀏覽器支持的方法在IE中並不能完美的支持,首先哪些支持呢?
1、直接在HTML代碼的元素屬性的位置為事件綁定處理程序;
2、使用JavaScript的 node.onclick=function(){}
IE8及之前的版本不支持addEventListener和removeEventListener,支持的是attachEvent()和detachEvent()
attachEvent()和detachEvent()都需要兩個參數:
第一個參數是要綁定的事件(onclick、onmouseover.....註意和addEventListener不同)
第二個參數是要綁定的處理程序(匿名函數或者函數名,註意如果不是匿名函數,函數名不要加括號)
在使用addEventListener之前應該先檢測當前瀏覽器是否支持該方法,可以將代碼封裝到一個對象中:
<button id="btn">按鈕</button>
<script>
var eventUtil = {
//type 傳入 click mouseover,而不傳onclick,mouseover
addEvent : function(element, type, func){
if (element.addEventListener) { //所有主流瀏覽器,除了 IE 8 及更早 IE版本
element.addEventListener(type, func, false);
} else if(element.attachEvent) { // IE 8 及更早 IE 版本
element.attachEvent(‘on‘+type, func);
} else {
var type = "on"+type;
//element.type = func; //wrong,不會成功
element[type] = func;
}
},
removeEvent : function(element, type, func){
if (element.removeEventListener) { //所有主流瀏覽器,除了 IE 8 及更早 IE版本
element.removeEventListener(type, func, false);
} else if(element.detachEvent) { // IE 8 及更早 IE 版本
element.detachEvent(‘on‘+type, func);
} else {
var type = "on"+type;
//element.type = null; //wrong,不會成功
element[type] = null;
}
}
}
var btn = document.getElementById("btn");
function showOne(){ alert("one"); }
eventUtil.addEvent(btn, "click", showOne);
eventUtil.removeEvent(btn, "click", showOne);
</script>
JavaScript添加IE事件處理程序
