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函数,感觉作用差不多。
这是一个小技巧,记录一下