addEventListener之handleEvent

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

element.addEventListener(type, listener[, useCapture]);

其中listener：当指定的事件类型发生时被通知到的一个对象。该参数必须是实现EventListener接口的一个对象或函数。即，第二个参数除了可以传入函数外，还可以传入对象。

 

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

interface EventListener {

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

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

 

好处之三：

 1 var obj = {

 2     name: 'foo', 3 handleEvent: function(e) { 4 switch(e.type) { 5 case "click": 6 console.log("click event"); 7 break; 8 case "mousedown": 9 console.log("mousedown event"); 10 break; 11  } 12  } 13 }; 14 15 document.body.addEventListener('click', obj, false); 16 document.body.addEventListener('mousedown', obj, false);

这样可以把不同事件的处理逻辑放到一起，根据事件类型区分即可，而不用为每个事件类型定义不同的处理函数了。
因为处理逻辑都在同一对象中，也使程序更加“内聚”了。

 

总结：

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