前端笔记-浏览器事件绑定兼容性问题

1.代码演示：2.代码优化:

---

1.事件绑定与解绑:  绑定事件时:  能使用addEventListener方法绑定的，就采用此方法.  否则采用attachEvent方法绑定  解绑事件时:  能用removeEventListener方法绑定就用。  否则就用detachEvent方法绑定。

1.代码演示：

代码如下（示例）：

//例.html部分 <div style="width:200px;height:200px;background-color: #999999;"></div> <button>点我</button> <script> //获取元素 var div = document.querySelector('div'); var btn = document.querySelector('button'); //定义一个事件来判断处于哪个环境(非IE，IE) //绑定事件(元素,事件类型,callback): function addEvent(ele,type,func){ if(ele.addEventListener){ ele.addEventListener(type,func); }else if(ele.attachEvent){ ele.addEventListener("on"+type, func); }else{ ele["on"+type] = func; } }; //解绑事件: function removeEvent(ele,type,func){ if(ele.removeEventListener){ ele.removeEventListener(type,func); }else if(ele.detachEvent){ ele.detachEvent("on"+type, func); }else{ ele["on"+type] = null; } }; function divEvent(){ console.log("这是一个div事件执行函数"); } addEvent(div,'click', divEvent); </script>

2.代码优化:

代码如下（示例）：

<script> //获取元素 var div = document.querySelector('div'); var btn = document.querySelector('button'); //使用Document对象封装一下 var Wrapper = { add:function (ele,type,func){ if(ele.addEventListener){ ele.addEventListener(type, func); }else if(ele.attachEvent){ ele.attachEvent("on"+ type,func); }else{ ele["on"+type] = func; } }, //事件解绑 remove:function (ele, type, func){ if(ele.removeEventListener){ ele.removeEventListener(type,func,false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, func); }else{ ele["on"+type] = null; } } }; //testing! function EventShow() { console.log("这是一个div事件执行函数"); } function EventBtn() { console.log("这是一个btn事件执行函数"); } wrapper.add(div,'click', EventShow); //wrapper.add(btn,'click',EventBtn); btn.onclick = function () { wrapper.remove(btn, 'click', ShowRemove); }; </script>

---