为什么要添加句柄呢？添加句柄有什么作用呢?句柄是啥意思？
来源：2-4 IE事件处理程序及跨浏览器解决
mm小鱼酱
2016-08-01 12:23
<!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>
<input type="button" value="按钮" id="btn">
<script type="text/javascript">
function showMes(){
alert("hello!");
}
var btn=document.getElementById("btn");
var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){ //DOM 2级判断
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){ //IE事件处理程序判断
element.attachEvent('on'+type,handler);
}
else{ HTML事件处理程序
element['on'+type]=handler; //element.onclick===element['onclick']
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){ //DOM 2级判断
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){ //IE事件处理程序判断
element.detachEvent('on'+type,handler);
}
else{ HTML事件处理程序
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn,'click',showMes);
// eventUtil.removeHandler(btn,'click',showMes);
</script>
</body>
</html>
写回答
关注
3回答
-
- superhuman进化中
- 2016-11-02 22:52:27
换而言之，element.addEventListner的返回值是布尔类型咯？
-
- qq_蜘蛛的听觉在脚上_03435164
- 2016-08-02 21:02:16
同问,就是if(element.addEventListner)这样的书写格式!在哪里有讲到.表达什么意思.虽然知道在这个程序是指如果支持element.addEventListner就执行后面的程序,
-
- 慕盖茨4878874
- 2016-08-01 13:28:50
主要作用就是为了代码能够适应不同的浏览器，在这个句柄中我们看到有三个判断：
if(element.addEventListener){}
else if(element.attachEvent){}
else{}
就是为了后面代码调用function(element,type,handler){}这个函数时候，能够让调用的代码产生作用，如果我们不用句柄，很可能就是调用的代码在不同的浏览器有的有效果有的却没效果（这三条语句就保证了在所有浏览器都能正确执行我们所调用的代码） 。前面两个是dom2级的，最后一个是dom0级的，没有什么浏览器不能响应0级的。 写两个dom2级是因为在ie浏览器中不能够响应 element.addEventListener 这样的写法，她只响应element.attachEvent这样的写法。 句柄就是个官方名字吧，我们把这样的操作称之为添加句柄，理解一下就行了。
DOM事件探秘
DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件
99528 学习 · 1305 问题
相似问题