addEventListener,handleEvent and passing objects
2015-01-19
根据http://www.thecssninja.com/javascript/handleevent翻译,仅是本人个人理解,有不对的地方,还请大家留言指正,多谢。
直到有人告诉我 addEventListener 可以把一个对象当第二个参数然后调用一个叫handleEvent的方法,我才知道还有这么好的一个小技巧!不需要绑定“this”,所以可以正确的传递上下文,上下文是一个对象,你只需要设置为时间监听的回调函数。
var obj = {
handleEvent:function(){
alert(this.dude);
},
dude: "holla"
};
element.addEventListener("click", obj, false);
为什么这是极好的?
我们可以这样做:
var obj = {
init: function(){
document.getElementById("btn").addEventListener("click", this, false);
document.getElementById("btn").addEventListener("touchstart", this, false);
},
handleEvent: function(e){
switch(e.type){
case "click":
this.button();
break;
case "touchstart":
this.button();
break;
}
},
dude: "holla",
button: function(){
alert(this.dude);
}
};
obj.init();
正如你所看见的,我们的对象有了一个绑定了所有时间和只传了“this”做为回调函数的init()方法,然后无论什么事件被触发都会交由handleEvent代理。