事件

1，句柄绑定方式

ele.onxxx = function(event) {}

兼容性很好，但是一个元素的同一事件上只能绑定一个函数

基本等同于写在HTMl行间上

 ===  

2，监听者方式

obj.addEventListener(type, fn, false);

IE9以下不兼容，可以为一个事件绑定多个处理函数

div.addEventListener(事件类型, 处理函数, false)

看下面的情况：

中间的函数是一个应用，所以不能对同一个函数绑定多个事件

3，obj.attachEvent('on' + type, fn);

IE独有，一个事件同样可以绑定多个处理程序

div.attachEvent('onclick', function(){});

给三个li，点击不同的li，输出他们的顺序

注意有闭包会生成

------------------------------------------------------------------------------------------------

事件处理程序的运行环境

1，ele.onxxx = function (event) {}

程序this指向是dom元素本身

2，obj.addEventListener(type, fn, false);

程序this指向是dom元素本身

3，obj.attachEvent('on' + type, fn);

程序this指向window

针对不同的浏览器，绑定事件函数

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 = null/false/'';

只执行一次

2，ele.removeEventListener('click', 事件函数名, false);

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

3，ele.detachEvent('on' + type, fn);

同2的使用方法