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>