事件（2）——事件处理程序

事件处理程序的名字以“on”开头，如click事件的事件处理程序就是onclick,为事件指定处理程序的方式有如下几种：

（1）HTML事件处理程序

<input type='button' value='click me' οnclick="alert('haha')";/>

or

<input type='button' value='click me' οnclick='show()';/>
<script>
      function show(){
	   alert('haha');
	   }
</script>

缺点：首先，存在时差问题，因为用户可能会在HTML元素一出现就触发相应事件，在执行事件处理程序的时候可能还没有条件，（例如触发函数写在了最后面），二是扩展事件处理函数的作用域链可能因不同浏览器导致不同结果，三是HTML and JavaScript代码紧密耦合

（2）DOM0级事件处理程序

<button id='btn' type="button">click</button>
<script>
	  var btn = document.getElementById('btn');
	  btn.onclick = function(){
	  	alert('hello world');
	  }
	  btn.onclick = function(){
	  	alert('hello world!!');
	  }
      btn.onclick = null;//delete
</script>

结果只是弹出hello world!!,因为它不可给同一个元素添加多个事件处理程序，只会覆盖，但是支持所有浏览器。

（3）DOM2级事件处理程序（IE8及以前不支持）

它定义了两种方法，用于处理指定和删除事件处理程序的操作

<script>
	  var div1 = document.getElementById('div1');
	  var div = document.getElementById('div');
	  var handler = function(){
	  	 alert('hello world');
	  }
      div1.addEventListener('click',handler,false);
      div1.removeEventListener('click',handler,false);
</script>

之所以定义了函数handler是因为在用这两个函数的时候，一定要成对匹配使用，即要是同一个函数。大多数的情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器，当用到捕获的时候注意，先执行捕获操作，在执行冒泡操作。

（4）IE事件处理程序(默认支持冒泡,也支持添加多个,支持该程序的有IE ，Opera)

类似的两种方法：attachEvent()   and  detachEvent()

 var btn = document.getElementById('btn');
      btn.attachEvent('onclick',function(){
      	  alert(this === window);//true
 });

事件处理程序会在全局域中运行，this === window  !!!!!!!!important

 var btn = document.getElementById('btn');
      var handler = function(){
	  	 alert('hello world');
	  }
      btn.attachEvent('onclick',handler);
      btn.detachEvent('onclick',handler);

（5）跨浏览器的事件处理程序

综合以上各种方法，采用能力检测。

 addHandler:
      function(ele,type,handler){
      	if(ele.addEventListener){
      		ele.addEventListener(type,handler,false);
      	}else if(ele.attachEvent){
            ele.attachEvent('on'+ type,handler);
      	}else{
      		ele['on'+ type] = handler;
      	}
      },
removeHandler:
      function(ele,type,handler){
      	if(ele.removeEventListener){
      		ele.removeEventListener(type,handler,false);
      	}else if(ele.detachEvent){
            ele.detachEvent('on'+ type,handler);
      	}else{
      		ele['on'+ type] = null;
      	}
      }