IE 和其他主流的浏览器之间有很多的不兼容, 有一些其他浏览器支持的方法在 IE 中并不能完美的支持, 首先哪些支持呢?
1 直接在 html 代码的元素属性的位置为事件绑定处理程序;
2 使用 JavaScript 的 node.onclick=function(){}
IE8 及之前的版本不支持 addEventListener 和 removeEventListener, 支持的是 attachEvent() 和 detachEvent()
attachEvent() 和 detachEvent() 都需要两个参数:
第一个参数是要绑定的事件 (onclickonmouseover..... 注意和 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>
来源: http://www.bubuko.com/infodetail-2508058.html