addEventListener的第二个参数——listener

时间：2015-03-08 21:23:05 阅读：227 评论：0 收藏：0 [点我收藏+]

标签：

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之前的事件。

总结：

使用这种绑定对象的方式，而不是和具体的函数耦合，更有面向对象的感觉了，呵呵。
有理解错误的地方，还望大家多多指教~

addEventListener的第二个参数——listener

标签：

原文地址：http://www.cnblogs.com/langjt/p/4322265.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行