日期:2014-05-16 浏览次数:20380 次
最近在看本司徒大神的博客,发现其中很是有还多可以发掘的东西的!
如下:
<!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我想是有一定的用处的。
偶有所得,以记录之,谨防忘记!