addEventListener绑定方式的问题:
document.body.addEventListener( 'click',
function() {
alert('body clicked');
},false);
以及第二个参数为object的优势:
document.body.addEventListener('click',
{
handleEvent: function() {
alert('body clicked');
}
},
false);
原文废话太多,我只翻译了主要部分。
具体细节,请自行查看
正文
先简短的看一下各个浏览器提供的DOM元素事件绑定接口:
//IE使用element.attachEvent:
document.body.attachEvent(
'onclick',
function() {
alert('body clicked');
});
//其他浏览器使用element.addEventListener:
document.body.addEventListener(
'click',
function() {
alert('body clicked');
},
false);
一般来说上面的第二个参数都是传入一个函数句柄,但是大多数javascript程序员并不知道第二个参数可以传入一对象obj【DOM2接口http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener】,如此一来,当event执行的时候,会隐式的调用obj的handleEvent方法。
document.body.addEventListener(
'click',
{
handleEvent: function() {
alert('body clicked');
}
},
false);
这么做的一个重要方面是obj的handleEvent只有在执行的时候才需要去访问【有点类似延迟绑定的效果】。同时,如果在两次event事件
间隔中,handleEvent发生了改变,那么产生的效果会跟着改变。这样一个好处就是不用remove事件而直接切换事件。
看下面的例子:
document.body.addEventListener('click', obj, false);
// click body will error in some browsers because
// 现在还没有事件
obj.handleEvent = function() {alert('alpha');};
// 单击弹出alpha
obj.handleEvent = function() {alert('beta');};
// 单击弹出"beta"
document.body.removeEventListener('click', obj, false);
//单击什么都没有了
【注意,这个用法存在一定的兼容性问题。不过我现在只面向手机浏览器,所以请自行测试】
采用obj的绑定形式:
function LIB_addEventListener(el,type,obj){
el.addEventListener(type,obj,false);
}
function ViewObject() {
this.data = 'alpha';
LIB_addEventListener(document.body, 'click', this);
LIB_addEventListener(document.body, 'mousemove', this);
}
ViewObject.prototype.handleEvent = function(e) {
if('click' == e.type){
console.log(this.data)
}else{
console.log('not click')
}
};
var test = new ViewObject();