日期:2014-05-16  浏览次数:20380 次

[ javascript ] attachEvent事件!

最近在看本司徒大神的博客,发现其中很是有还多可以发掘的东西的!

如下:

<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="call me" id="call-id" alt="1"/>
</body>
<script type="text/javascript">
	
	var E = {

		on:function(el,type,fn){
			el.addEventListener?
				el.addEventListener(type,fn,false):el.attachEvent("on" + type,function(){
					fn.call(el,window.event);
				})

				/*
					el.addEventListener(type,fn,false):el.attachEvent("on" + type,fn);
				*/
		}
	};
	
	function handler(e){
		//alert(e.getAttribute("alt"));
		alert(this == window);
		alert(e.srcElement);
	}
	E.on(document.getElementById("call-id"),"click",handler);
</script>
</html>


以上被注释的代码,想了很久没有想明白为什么他要采用一种全新的方式去调用,那就是用call ?

包括很多书上都是这样写的,都是直接执行。

于是开始各种搜索,测试之。

发现原来还是有区别的。

在这里,使call去调用:

fn.call(el,window.event);


 1 第一点,它能够确保,事件对象作为第一个参数被传入,这里直接将window.event传入。(这一点,司徒大神已经说过了)

 2 在某些浏览器下,ie678,如果直接调用,会出现 this == window 的情况,这关于这个问题,就不多说了,都是万恶的IE导致的。

   那么如果采用call 可以保证this的值指向事件源对象。这对于兼容标准浏览器和IE我想是有一定的用处的。


偶有所得,以记录之,谨防忘记!