js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中,ie只支持attachEvent,而FF和Chrome只支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先判断attachEvent只否为真(存在),如果为真则用attachEvent()方法,否则的话就用addEventListener()。
另外,为了避免每次绑定事件时都要做判断,可以封装一个函数myAddEvent(obj,ev,fn){}。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绑定</title> <script> window.onload = function() { var oBtn = document.getElementById("btn1"); //IE attachEvent(事件名,函数),此方法只有ie支持,FF和Chrome均不支持 /*oBtn.attachEvent("onclick",function() { alert("a"); }); oBtn.attachEvent("onclick",function() { alert("b"); })*/ //FF和Chrome addEventListener(事件名,函数),此方法ie不支持 /*oBtn.addEventListener("click",function() { alert("a"); }); oBtn.addEventListener("click",function() { alert("b"); })*/ //兼容写法:if/else判断 /*if(oBtn.attachEvent) { oBtn.attachEvent("onclick",function() { alert("a"); }); oBtn.attachEvent("onclick",function() { alert("b"); }) } else { oBtn.addEventListener("click",function() { alert("a"); },false); oBtn.addEventListener("click",function() { alert("b"); },false) }*/ //另外,还可以把这个兼容写法封装成一个函数,这样就不用每次绑定事件时都要判断一下 function myAddEvent(obj,ev,fn) //obj为要绑定事件的元素,ev为要绑定的事件,fn为绑定事件的函数 { if(obj.attachEvent) { obj.attachEvent("on" + ev,fn); } else { obj.addEventListener(ev,fn,false); } } myAddEvent(oBtn,"click",function() { alert("a"); }) myAddEvent(oBtn,"click",function() { alert("b"); }) } </script> </head> <body> <input id="btn1" type="button" value="按钮"/> </body> </html>
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/473
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!