彻底搞明白javascript事件加载机制
2010-08-10 12:53
471 查看
先看一段代码。
[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]
到此,这个函数基本上没有什么遗憾了,不过,根据你的使用场景不一样,可能它就不那么适合了,所以程序方面没有最完美,只有最适合。
[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]
到此,这个函数基本上没有什么遗憾了,不过,根据你的使用场景不一样,可能它就不那么适合了,所以程序方面没有最完美,只有最适合。
相关文章推荐
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- document.ready和onload的区别----JavaScript文档加载完成事件
- javascript监听iframe加载完成事件
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- 通俗易懂的让你彻底明白接口回调机制
- javascript中的事件捕获机制,深入理解并区别IE和DOM中的事件模型
- Android与javascript中事件分发机制的简单比较
- Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
- Android:30分钟弄明白Touch事件分发机制
- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
- 理解JavaScript中的事件路由冒泡过程及委托代理机制
- JavaScript的事件机制
- javascript的事件机制
- javascript 中的事件机制
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
- JavaScript事件机制兼容性解决方案