JavaScript事件的绑定与取消

定义

DOM事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自Event 类的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。

绑定事件的方法

1.ele.onxxx = function (event) {}
    兼容性很好，但是一个元素只能绑定一个处理程序 基本等同于写在HTML行间上

2.ele.addEventListener(type, fn, false);
    IE9以下不兼容，可以为一个事件绑定多个处理程序
    当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

3.ele.attachEvent(‘on’ + type, fn);
    IE独有，一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

1.ele.onxxx = function (event) {}                       程序this指向是dom元素本身

2.obj.addEventListener(type, func, false);        程序this指向是dom元素本身

3.obj.attachEvent(‘on’ + type, fn);                     程序this指向window

封装兼容性的 addEvent(elem, type, handle) 方法

function addEvent(elem, type, handle)  {
	if(elem.addEventListener){
		elem.addEventListener(type, handle, false);
	} else if(elem.attachEvent) {
		elem.attachEvent('on'+ type, function(){
			handle.call(elem);
		})
	} else {
		elem['on' + type] = handle;
	}
}

解除事件处理程序

1. ele.onclick = false/‘’/null;
2. ele.removeEventListener(type, func, false);
3. ele.detachEvent(‘on’ + type, func);

注:若绑定匿名函数，则无法解除