跨浏览的DOM节点事件监听器

最新推荐文章于 2022-03-30 10:31:13 发布

原创最新推荐文章于 2022-03-30 10:31:13 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种避免DOM事件被覆盖的方法，并提供了绑定和解除事件监听器的实用函数。通过使用这些函数，可以在同一个DOM节点上绑定多个事件处理器，实现更灵活的事件处理。

如果我们要让某个DOM节点监听事件，最简单的方法就是使用 on+xxx 方法，但是如下时,后面的事件会把前面的事件覆盖掉，只会弹出 2 。

var div=document.getElementById('div');
div.onclick = function(){
    alert(1);
}
div.onclick = function(){
    alert(2);
}

我们可以使用以下方法来解决这个问题。

//////绑定事件监听器
function addEventHandler(target,type,func){
    if(target.addEventListener){target.addEventListener(type,func,false);}  //非IE
    else if(target.attachEvent){target.attachEvent("on"+type,func);}  //IE
         else {target["on"+type]=func;}
}
//////解除事件监听器的绑定
function removeEventHandler(target,type,func){
    if(target.removeEventListener){target.removeEventListener(type,func,false);}  //非IE
    else if(target.detachEvent){target.detachEvent("on"+type,func);}  //IE
         else delete target["on"+type];
}

我们像下面这样来使用这些方法：

var divs=document.getElementById("all");
addEventHandler(divs,"click",test1);
addEventHandler(divs,"click",test2);
addEventHandler(divs,"click",test3);
//removeEventHandler(divs,"click",test1);

 function test1(){
    alert(1);
 }
  function test2(){
    alert(2);
 }
  function test3(){
    alert(3);
 }