JS事件监听器用法实例：解决onclick覆盖与跨浏览器兼容

JavaScript事件监听器概述

本文通过具体实例解析JavaScript中事件监听器的应用方式，旨在为读者提供实用的参考与学习思路。

onclick与事件监听的差异

首先分析直接绑定事件的问题：若对同一对象多次使用.onclick属性绑定方法，后续赋值会覆盖之前的绑定，导致该事件触发时仅执行最后绑定的函数。相比之下，使用事件监听机制可避免覆盖现象，确保所有绑定的事件均能正常执行。


window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.onclick = function(){ 
  alert("第一个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三个事件"); 
 } 
}

上述覆盖问题的具体表现是，最终仅输出第三个事件的处理结果，因为后续的方法定义完全覆盖了前序绑定。

原生addEventListener绑定机制

接下来介绍原生的事件绑定函数addEventListener，它是处理DOM事件的标准方式之一。


var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 //addEventListener：绑定函数 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
}

通过该函数绑定多个监听器后，执行结果会依次输出第一个和第二个监听事件，验证了多监听器共存的有效性。

事件绑定的解除与句柄要求

利用事件监听机制绑定方法后，还可以动态解除特定的事件绑定，具体实现方式如下所示。


var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
 btn.removeEventListener("click",eventOne); 
}

执行解除绑定操作后，控制台或弹窗仅显示第二个监听事件，表明第一个事件已被成功移除。

在解除事件绑定时，必须传入原函数的引用（句柄）。若直接重新书写整个函数体，系统将无法匹配并解除原有的绑定关系。

错误的解除绑定写法示例如下，这种直接匿名函数的方式无法正确移除事件。


btn.addEventListener("click",function(){ 
 alert(11); 
}); 
btn.removeEventListener("click",function(){ 
 alert(11); 
});

正确的解除绑定写法应如上述示例所示，通过引用预先定义的函数变量来实现精准移除。


btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

跨浏览器兼容封装方案

综上所述，对事件监听函数进行封装可以实现跨浏览器的兼容处理，确保代码在各类主流浏览器中稳定运行。


/* 
 * addEventListener:监听Dom元素的事件 
 * 
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function addEventHandler(target,type,func){ 
 if(target.addEventListener){ 
  //监听IE9，谷歌和火狐 
  target.addEventListener(type, func, false); 
 }else if(target.attachEvent){ 
  target.attachEvent("on" + type, func); 
 }else{ 
  target["on" + type] = func; 
 } 
} 
/* 
 * removeEventHandler:移除Dom元素的事件 
 * 
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function removeEventHandler(target, type, func) { 
 if (target.removeEventListener){ 
  //监听IE9，谷歌和火狐 
  target.removeEventListener(type, func, false); 
 } else if (target.detachEvent){ 
  target.detachEvent("on" + type, func); 
 }else { 
  delete target["on" + type]; 
 } 
} 
var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var bindEventBtn = document.getElementById("bindEvent"); 
 //监听eventOne事件 
 addEventHandler(bindEventBtn,"click",eventOne); 
 //监听eventTwo事件 
 addEventHandler(bindEventBtn,"click",eventTwo ); 
 //监听本身的事件 
 addEventHandler(bindEventBtn,"click",function(){ 
  alert("第三个监听事件"); 
 }); 
 //取消第一个监听事件 
 removeEventHandler(bindEventBtn,"click",eventOne); 
 //取消第二个监听事件 
 removeEventHandler(bindEventBtn,"click",eventTwo); 
}

以下是完整的兼容各大主流浏览器的封装实例代码。


<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>Event</title> 
  <script type="text/javascript"> 
   function addEventHandler(target,type,func){ 
    if(target.addEventListener){ 
     //监听IE9，谷歌和火狐 
     target.addEventListener(type, func, false); 
    }else if(target.attachEvent){ 
     target.attachEvent("on" + type, func); 
    }else{ 
     target["on" + type] = func; 
    } 
   } 
   function removeEventHandler(target, type, func) { 
    if (target.removeEventListener){ 
     //监听IE9，谷歌和火狐 
     target.removeEventListener(type, func, false); 
    } else if (target.detachEvent){ 
     target.detachEvent("on" + type, func); 
    }else { 
     delete target["on" + type]; 
    } 
   } 
   var eventOne = function(){ 
    alert("第一个监听事件"); 
   } 
   function eventTwo(){ 
    alert("第二个监听事件"); 
   } 
   window.onload = function(){ 
    var bindEventBtn = document.getElementById("bindEvent"); 
    //监听eventOne事件 
    addEventHandler(bindEventBtn,"click",eventOne); 
    //监听eventTwo事件 
    addEventHandler(bindEventBtn,"click",eventTwo ); 
    //监听本身的事件 
    addEventHandler(bindEventBtn,"click",function(){ 
     alert("第三个监听事件"); 
    }); 
    //取消第一个监听事件 
    removeEventHandler(bindEventBtn,"click",eventOne); 
    //取消第二个监听事件 
    removeEventHandler(bindEventBtn,"click",eventTwo); 
   } 
  </script> 
 </head> 
 <body> 
  <input type="button" value="测试" id="bindEvent"> 
  <input type="button" value="测试2" id="yuanEvent"> 
 </body> 
</html>

JS事件在线工具推荐

此外，推荐一个关于JS事件的在线工具，该工具归纳并总结了JavaScript中常用的事件类型及相关函数的具体功能。

该工具提供了详细的javascript事件与功能说明大全，便于开发者查阅。

访问地址为：http://tools.jb51.net/table/javascript_event

希望上述关于JavaScript程序设计的解析与示例能对各位读者的实际开发工作有所帮助。

JavaScript事件监听器用法详解：从覆盖问题到跨浏览器兼容实现