说说handleEvent这个东东

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

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

1 var handleEvents = document.getElementById("handleEvent");
2   var callback = function(){ alert("this is a test!");}
3   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

转载于:https://www.cnblogs.com/qgd87/p/3337127.html