在慕课网里,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>