javascript中事件代码分离后上下文的绑定

在js中这几天一直在考虑一个问题，如何将事件如click的功能代码和事件分开

比如先获取一个DOM的元素id为test并为之触发一个click事件，事件的功能函数为test将其分离

var test = document.getElementById('test');

test.adEventListener('click',test,false);

function test(){

...

}

如果触发一般的动作没什么问题，如果审查元素或需要运用本身的话就错了。

比如

function test(){

　　console.log(this);

　　console.log(e.target);

};

可见事件函数的对象和获取的元素本身纷纷消失。

虽然知道call可以绑定上下文不过对于事件的绑定貌似不行

比如我们改成test.adEventListener('click',test.call(this,e),false);

这样就会报错。

所以痛定思痛想了一个两全其美的办法那就是

var test = document.getElementById('test');

test.adEventListener('click',function(e){

　　test.call(this,e);

},false);

function test(){

...

}

先用一个匿名函数获取上下文和事件对象e，然后再用CALL绑定上下文就好了，用apply应该也可以。如果用jquery的话貌似还可以用$.proxy()

 

当一个函数以function进行作用域的回调的时候可以写成这样

(function(){

　　...

}).call(this)

 

如果在创建内部匿名函数，往往this就会丢掉。

这时候得打出函数全名并给定作用域

ExColor.prototype.test.call(ExColor,data);

 

如果说想写的率性一点可以用jquery的

$.proxy函数，感觉作用差不多。

这是一个小技巧，记录一下