兼容浏览器的JS事件绑定函数(详解)

作者:像素猫时间:2026-10-22 03:55:36浏览:125

本文介绍一种通过扩展Object原型来实现跨浏览器事件绑定的方法。该方法封装了attachEvent与addEventListener,简化代码调用。文中包含HTML示例及JS核心代码,适用于需要统一处理事件绑定的场景。

兼容浏览器的JS事件绑定函数详解

由于JavaScript中所有对象均继承自Object,因此只需为Object原型添加一个事件绑定函数,即可避免在处理事件绑定时无需重复编写冗长代码,实现直接调用。在代码中引入相关实现后,即可直接使用该方法。


<div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> 
<script language="javascript"> 

Object.prototype.addListener=function(ev,fn){ 
  if (this.attachEvent) { 
    this.attachEvent('on' + ev, fn); 
  }else{  
    this.addEventListener(ev,fn,false); 
  } 
} 
 
   
var mydiv=document.getElementById("mydiv"); 
mydiv.addListener('click', click1,false); 
mydiv.addListener('click', click2, false); 
console.log(mydiv); 
function click1(){ 
  alert("click1"); 
}   
 
function bclick2(){ 
  alert("click2"); 
} 

以上关于兼容浏览器的JS事件绑定函数的详解内容,旨在为读者提供参考。感谢阅读,希望此方案能对各位有所帮助,也欢迎大家继续支持本站。

作者最新文章