addEventListener之handleEvent

addEventListener() 方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。

语法:

element.addEventListener(type, listener[, useCapture]);
其中listener:  当指定的事件类型发生时被通知到的一个对象。该参数必是实现EventListener接口的一个对象或函数。

即,第二个参数除了可以传入函数外,还可以传入对象。

那么实现 EventListener 接口的对象有什么特征呢?

// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~

interface EventListener {

void  handleEvent (Event evt);

};

也就是说事件会自动在传入对象中寻找handleEvent方法。

这样做的 好处之一 

1 var obj = {
2     name: 'foo',
3     handleEvent: function() {
4        alert('click name='+ this.name);
5     }
6 };
7 document.body.addEventListener('click', obj, false);

这样,在 element 触发event事件后,调用的是handleEvent 方法,且其中的 this 是指实现EventListener接口的对象,这里指向obj对象。而普通的函数中的this 指向事件源:

1 document.body.addEventListener('click', function() {
2    console.log(this == document.body); // output: true
3 }, false);

好处之二 :

 1 var obj = {
 2     name: 'foo',
 3     handleEvent: function() {
 4        alert('click name='+ this.name);
 5     }
 6 };
 7  
 8 document.body.addEventListener('click', obj, false);
 9  
10 function changeHandler() {
11  obj.handleEvent = function() {
12     alert("change the click handle!");
13  };
14 }
15  
16 // 5秒后动态改变事件处理函数
17 setTimeout(function() {
18    changeHandler();
19 }, 5000);

这样就可以动态切换绑定事件的处理函数,而不需要remove之前的事件。

总结:

使用这种绑定对象的方式,而不是和具体的函数耦合,更有面向对象的感觉了,呵呵。

有理解错误的地方,还望大家多多指教~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值