跨浏览的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);
 }
复制代码

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/03/15/2961300.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
17天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
17天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
27天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
26天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
28天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
30天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树