为了账号安全,请及时绑定邮箱和手机立即绑定

为什么要添加句柄呢?添加句柄有什么作用呢?句柄是啥意思?

<!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 回答

换而言之,element.addEventListner的返回值是布尔类型咯?

0 回复 有任何疑惑可以回复我~

同问,就是if(element.addEventListner)这样的书写格式!在哪里有讲到.表达什么意思.虽然知道在这个程序是指如果支持element.addEventListner就执行后面的程序,

0 回复 有任何疑惑可以回复我~
#1

慕盖茨4878874

这种写法我们不是一直在用么?if(element.addEventListner)的意思就是你用的浏览器是否能响应你执行的动作,这里不是有三句话么,就是为了响应浏览器而用的。主要是因为浏览器的兼容性,所以才要这样写的。
2016-08-03 回复 有任何疑惑可以回复我~
#2

慕粉18764815087

if(bool),如果返回true,就是这种方法存在,就可以调用。
2016-08-14 回复 有任何疑惑可以回复我~

主要作用就是为了代码能够适应不同的浏览器,在这个句柄中我们看到有三个判断:

  1. if(element.addEventListener){}                  

  2. else if(element.attachEvent){}  

  3. else{} 

         就是为了后面代码调用function(element,type,handler){}这个函数时候,能够让调用的代码产生作用,如果我们不用句柄,很可能就是调用的代码在不同的浏览器有的有效果有的却没效果(这三条语句就保证了在所有浏览器都能正确执行我们所调用的代码) 。前面两个是dom2级的,最后一个是dom0级的,没有什么浏览器不能响应0级的。 写两个dom2级是因为在ie浏览器中不能够响应   element.addEventListener    这样的写法,她只响应element.attachEvent这样的写法。 句柄就是个官方名字吧,我们把这样的操作称之为添加句柄,理解一下就行了。


1 回复 有任何疑惑可以回复我~
#1

mm小鱼酱 提问者

问一下这个格式是什么意思呢, addHandler:function(){...} 是跟function addHandler(){...}一样的么,就是定义一个名字叫addHandler的函数?
2016-08-02 回复 有任何疑惑可以回复我~
#2

慕盖茨4878874

这只是js函数的两种形式,addHandler是var eventUtil={}里的一个属性,eventUtil这个是对象,对象包含属性和方法,用function addHandler(){...}这种方法也是可以写的,只不过学的深入了以后,用的方法与我们刚学的自然是不一样,但效果相同,而我们课程这种方法在以后的实践中是更加的常用。
2016-08-03 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么要添加句柄呢?添加句柄有什么作用呢?句柄是啥意思?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信