js函数绑定同时，如何保留代码执行环境？

浏览数：35 / 时间：2015年06月09日

　　经常写js的程序员一定不会对下面这段代码感到陌生。

 1  var EventUtil = {
 2  
 3       addHandler : function(element, type, handler){
 4             if(element.addEventListener){
 5                     element.addEventListener(type, handler, false);    
 6             }else if(element.attachEvent){
 7                      element.attachEvent("on"+type,handler);
 8             }else{
 9                      element["on"+type]=handler;
10             }
11        },
12         removeHandler : function(element, type, handler){
13             if(element.removeEventListener){
14                   element.removeEventListener(type, handler, false);
15            }else if(element.detachEvent){
16                    element.detachEvent("on"+type, handler);
17            }else{
18                   element["on"+type]=null;
19            }
20        }
21  } ;

　　这段代码可以用跨浏览器的方式给元素绑定事件处理函数。

　　像这样：

1 var handler = {
2     info : "bind me",
3     handleClick : function(e){
4          alert(this.info);
5     }  
6 }
7 var btn = document.getElementById("mybtn");//一个按钮
8 EventUtil.addHandler( btn, "click", handler.handleClick);

　　这样做的话，alert框中显示的不是“bind me”，而是undefined。这是因为没有保存handler.handleClick的环境，即handleClick 中的this并没有指向handler类。

　　一般情况下，这样做也没有什么问题。但在某些需要保存代码的执行环境的情况下，比如说，事件处理函数、setTimeout()等。在这些情况下，我们可能会需要利用原来执行环境中的某些变量，状态标识等信息。

　　比较容易想到的一种解决方法是使用闭包。

　　就像这样：

 1  var handler = {
 2      info : "bind me",
 3      handleClick : function(e){
 4           alert(this.info);
 5      }  
 6  }
 7  var btn = document.getElementById("mybtn");//一个按钮
 8  EventUtil.addHandler( btn, "click", function(e){
 9     handler.handleClick(e);
10  });

　但是，闭包用多了会让代码变得难以维护。

　　于是翻阅资料，发现一个常用的函数

1  function bind(fn, context){
2      return function(){
3           return fn.apply(context, arguments);
4      }
5 }

　　是的，这个函数也使用了闭包，但是这个bind函数还是很强大的，它可以将我们的函数fn，绑定到我们制定的执行环境context中。这个bind函数还是比较好理解的。那么，可以这样来使用它。

1   var handler = {
2       info : "bind me",
3       handleClick : function(e){
4            alert(this.info);
5       }  
6   }
7   var btn = document.getElementById("mybtn");//一个按钮
8   EventUtil.addHandler( btn, "click", bind(handler.handleClick, handler));

　　注意这句 fn.apply(context, arguments); 这样可以保证事件对象e也传递给了fn。

　　令人庆幸的是，在ECMAScript5中，所有函数都定义一个原生的bind函数，我们可以直接来使用它。

1    var handler = {
2        info : "bind me",
3        handleClick : function(e){
4             alert(this.info+" "+e.type);
5        }  
6    }
7    var btn = document.getElementById("mybtn");//一个按钮
8    EventUtil.addHandler( btn, "click", handler.handleClick.bind(handler));

　　值得注意的是，IE9+、ff4+，chrome支持这个bind函数。

　　最近在看一个开源项目的源码时，发现了一个更好的方法，这个方法不仅能解决上述问题，还能提供更好的事件管理方案。

　　这个方法就是

addEventListener + handleEvent

首先，我们来看看addEventListener的参数都有哪些，

parameters：

　　　　1. type of type DOMString

　　　　　　The event type for which the user is registering

　　　　　　用户注册的事件类型

　　　　2.listener of type EventListener

　　　　　　The listener parameter takes an interface implemented by the user which contains the methods to be called when the event occurs.

　　　　　　listener是用户定义的一个EventListener接口的实现，事件发生时会被调用。（这里是重点）

　　　　3.useCapture of type boolean

　　　　　　定义事件在哪个阶段被处理，一般都是false，即在冒泡阶段处理事件。

再来看看，EventListener这个接口，

1 // Introduced in DOM Level 2:
2 interface EventListener {
3   void  handleEvent(in Event evt);
4 };

　　官方对handleEvent的解释是

　　This method is called whenever an event occurs of the type for which the EventListener interface was registered.　　

　　就是说，在事件发生被处理时，这个函数会被调用，evt就是事件对象。

　　看来addEventListener的第二个参数，不仅支持传入一个回调函数，还可以传入一个对象，前提是这个对象中实现了handleEvent方法。利用这个特性，可以这样来使用：

1     var handler = {
2         info : "bind me",
3         handleEvent : function(e){
4              alert(this.info+" "+e.type);
5         }  
6     }
7     var btn = document.getElementById("mybtn");//一个按钮
8     EventUtil.addHandler( btn, "click", handler);

　　这样一来，不用当心函数的执行环境被改变。

　　这个方法还有一个更大的用处就是可以创作一个事件管理中心来更方便，更优雅地管理事件。

像这样：

 1  var handler = {
 2          info : "bind me",
 3          handleEvent : function(e){
 4               switch(e.type){
 5                      case "mousedown":
 6                            this.startHandle(e);
 7                            break;
 8                      case "mousemove":
 9                            this.moveHandle(e);
10                            break;
11                      case "mouseup":
12                            this.endHandle(e);
13                            break;
14                      default: 
15                            //todo
16               }
17          },
18          startHandle:function(e){
19               //todo
20          },
21          moveHandle:function(e){
22               //todo
23          },
24          endHandle:function(e){
25               //todo
26          }
27      }
28      var btn = document.getElementById("mybtn");//一个按钮
29      EventUtil.addHandler( btn, "mousedown", handler);