彻底搞明白javascript事件加载机制
先看一段代码。
[html]
<input type="button" value="aaa" id="handle">
[/html]
[javascript]
function addEvent(el,type,fn,useCapture){
if(window.addEventListener){
el.addEventListener(type,fn,useCapture);
}else if(window.attachEvent){
el.attachEvent('on'+type,fn);
}
}
function test(){
for(i in this){ document.write(this[i]+'<br/>'); }
}
addEvent(document.getElementById('handle'),'click',test);
[/javascript]
这是所谓web2.0下的dom事件加载的一般常用方法。它兼容了主流浏览器，看着非常完美。
再看这个test函数，代码只有一行，目的是为了详细说明此时this指针的指代对象，运行后点击按钮你会发现。在IE浏览器中窗体输出来的是winow对象的属性，但遵循dom标准的浏览器输出的是按钮的属性。一般情况下我们会认为firefox这种所谓标准浏览器的这种做法符合我们的要求一些，为了让ie也达到标准我们来对它进行改造。
[javascript]
function addEvent(el,type,fn,useCapture){
if(window.addEventListener){
el.addEventListener(type,fn,useCapture);
}else if(window.attachEvent){
nfn = function(){ fn.apply(el); }//fn内部的this强行转化为调用fn的dom对象
el.attachEvent('on'+type,nfn);
}
}
function test(){
var str;
for(i in this){ str += i+"="+this['\''+i+'\'']+"<br/>"; };
document.write('this.value = '+this['value']+'<br/>'+str);
}
addEvent(document.getElementById('a1'),'click',test,false);
[/javascript]
这里我们看到的，其实我们只做了一个手脚[注释那行],就把this指向dom对象了。到此，万事大吉了，什么？不能传参数，你要非常要传点参数给它那也未尝不可，那我们再改进一下。
[javascript]
function addEvent(el,type,fn,useCapture,parameters){
nfn = function(){
fn.apply(el,[].slice.call(arguments,0).concat(parameters));
}
if(window.addEventListener){
el.addEventListener(type,nfn,useCapture);
}else if(window.attachEvent){
el.attachEvent('on'+type,nfn);
}
}
function test(){//
alert('哈哈：我是隐形参数event:'+[].slice.apply(arguments,[0]));
alert('大家好我们是参数：'+[].slice.call(arguments,1));
}
addEvent(document.getElementById('a1'),'click',test,false,[1,2,'a','b']);
[/javascript]
到此，这个函数基本上没有什么遗憾了，不过，根据你的使用场景不一样，可能它就不那么适合了，所以程序方面没有最完美，只有最适合。
