事件处理

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

html：

<div style="width: 200px; height:200px;background-color:red;
position: absolute;top: 100px;left: 100px;"></div>

js:

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
	console.log('a');
}
div.onclick = function(){
	console.log('b');
}

当鼠标左键点击红色方块时，控制台上打印出b,一个元素只能绑定一个处理程序

2.obj.addEventListener(type, fn, false);
IE9以下不兼容，可以为一个事件绑定多个处理程序

div.addEventListener('click',function(){
        console.log('a');
},false);
div.addEventListener('click',function(){
        console.log('b');
},false);

当鼠标左键点击红色方块时，控制台上打印出a,b

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

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

2.obj.addEventListener(type, fn, 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;
  	}
  }

解除事件处理程序

div.onclick = function(){
		console.log('a');
		this.onclick = false;
	}


div.addEventListener('click',test,false);要求外部定义一个函数，再从内部引用
  function test (){
  	console.log('a');
  }
  div.removeEventListener('click',test,false);
  

 div.attachEvent('onclick',test);
  function test(){
  	console.log('a');
  }
  div.detachEvent('onclick',test);