说说handleEvent这个东东

大家知道，原生的javascript绑定事件方法 ：如下

 

<div id="handleEvent" style="width:200px;height:100px; border:solid 1px #ccc;">handleEvent 测试</div>

var handleEvents = document.getElementById("handleEvent");
  var callback = function(){ alert("this is a test!");}
  handleEvents.addEventListener('click', callback, false);

今天发现addEventListener 的第二个参数除了可以传入函数外 还可以传入一个对象， 

handleEvents.addEventListener('click', this, false);

事件会自动在传入对象中寻找handleEvent方法，也就是 this.handleEvent  举个例子 ：

var obj = {
    handleEvent: function() {
        alert(this.dude);
    },
    dude: "holla"
};

element.addEventListener("click", obj, false);

var obj  =  {
    init: function() {
        document.getElementById("btn").addEventListener("click", this, false);
        document.getElementById("btn").addEventListener("touchstart", this, false);
    },
    handleEvent: function(e) {
        switch(e.type) {
            case "click":
                this.button();
                break;
            case "touchstart":
                this.button();
                break;
        }
    },
    dude: "holla",
    button: function() {
        alert(this.dude);
    }
};

obj.init();

changeHandleEvent: function(evt) {
    this._handleEvent = this.handleEvent;
    this.handleEvent = function(e) {
        var t = evt.target;
        
        if (t.id === "btn") {
        } else if(t.id === "btn3") {
            this.revertHandleEvent();
        }
    }
}

function on(el, evt, fn, bubble) {
    if("addEventListener" in el) {
        try {
            el.addEventListener(evt, fn, bubble);
        } catch(e) {
            if(typeof fn == "object" && fn.handleEvent) {
                el.addEventListener(evt, function(e){
                    fn.handleEvent.call(fn,e);
                }, bubble);
            } else {
                throw e;
            }
        }
    } else if("attachEvent" in el) {
        if(typeof fn == "object" && fn.handleEvent) {
            el.attachEvent("on" + evt, function(){
                fn.handleEvent.call(fn);
            });      
        } else {
            el.attachEvent("on" + evt, fn);
        }
    }
}

 

这样，在 el 触发event事件后，调用的是handleEvent方法，注意这里面的 this 是指向对象本身 （即 this ==obj //true），这个我们调用对象里面的方法提供极大的便利！而普通的函数，this传入函数里面的this 是指向事件的，因事件类型不同而不同,无法定位到this到底指向哪里。

参考：http://www.thecssninja.com/javascript/handleevent