跨浏览器事件处理

来源：互联网发布：天元突破知乎编辑：程序博客网时间：2024/05/22 04:34

在慕课网里，DOM事件一节中提到了怎么在Chrome,IE,和更低版本的浏览器中实现事件处理，这里做一个小结：

1.非IE浏览器支持addEventListener和removeEventListener。

2.IE浏览器（低版本）支持attachEvent和detachEvent，但其他浏览器不支持。

3.各个浏览器（无论低版本）都支持dom0级事件，但是有一个弊端就是无法重复处理。

这样我们要实现要给跨浏览器的处理，就需要用到句柄操作，这里以click为例，看一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>跨浏览器事件处理</title></head><body><button id="button">按钮</button><script> var btn=document.getElementById('button');  function show(){ alert("这是一个按钮"); }   var eventUtil={   addHandler:function(element,type,handler){    if(element.addEventListener)    {      element.addEventListener(type,handler,false);    }else if(element.attachEvent)    {     element.attachEvent('on'+type,handler);    } else    {     element['on'+type]=handler;    }    }  }   eventUtil.addHandler(btn,'click',show);</script></body></html>

在变量eventUtil中封装了一个句柄addHandler,用来传递要实现的事件，需要的参数是element(元素)，type(事件，这里是click操作)，handler(响应函数)

之后进行一个if判断：

如果能执行addEventListener则直接执行，addEventListener的前两个参数是刚刚传进来的事件及其响应，最后一个false表示用事件冒泡；

如果不能执行上述，但能执行attachEvent，也就是IE，那么就调用attachEvent，注意参数中的type需要在前面加“on”,因为我们传递到句柄中是省略了on的，但是在attachEvent参数中on不可以省略，比如click要加为onclick；

最后一个兼容性的处理是直接element.onclick，这里用中括号代替点，也是为了配合on的添加。element."on"+type这种语法是错误的，所以用中括号代替。

用不同的浏览器点击一下按钮，均弹出来窗口。

同样地，我们可以添加一个删除句柄，这时候再点击按钮就没有反应了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>跨浏览器事件处理</title></head><body><button id="button">按钮</button><script> var btn=document.getElementById('button');  function show(){ alert("这是一个按钮"); }   var eventUtil={   addHandler:function(element,type,handler){    if(element.addEventListener)    {      element.addEventListener(type,handler,false);    }else if(element.attachEvent)    {     element.attachEvent('on'+type,handler);    } else    {     element['on'+type]=handler;    }    },removeHandler:function(element,type,handler){ if(element.removeEventListener)    {      element.removeEventListener(type,handler,false);    }else if(element.detachEvent)    {     element.detachEvent('on'+type,handler);    } else    {     element['on'+type]=null;    }    }  }   eventUtil.addHandler(btn,'click',show);  eventUtil.removeHandler(btn,'click',show);</script></body></html>

1 0