跨浏览器事件处理
在慕课网里，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>