dom事件

事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段，默认在捕获阶段是不调用事件处理程序的，在冒泡阶段触发

 1. DOM0
 就是直接通过 onclick写在html里面的事件； 
 2. DOM2
 是通过addEventListener绑定的事件；  
 特殊情况下： IE下的DOM2事件通过attachEvent绑定; 
 addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件
 注意：............消除必须是removeEventListener
 3. DOM3
 DOM3是一些新的事件,区别DOM3和DOM2的方法我感觉是DOM3事件有分大小写的,DOM2没有;

事件处理程序

1. html事件处理程序

   buttonid=”btn”οnclick=show()点我呀
   事件对象是event

2. DOM0级事件处理程序：兼容性好，缺点是会事件覆盖，是事件冒泡的

   添加：
   document.getElementById(‘btn’).οnclick=function() { }
   移除事件处理程序
   document.getElementById(‘btn’).onclick = null
   ie8下事件对象是window.event，其他是event

3. DOM2级事件处理程序

   添加
   document.getElementById(‘btn’).addEventListener(‘click’,function() { })；
   ie8：attachEvent（‘click’，function（）{ }），只有两个参数，默认将事件添加到冒泡阶段
   移除
   document.getElementById(‘btn’).removeEventListener(‘click’,添加时的回到函数)；
   e8：detachEvent（‘click’，function（）{ }）
   如果添加时使用的是匿名函数，移除时就算和代码写的一样，也是移除不掉的，因为两个函数不是同一个引用
   第三个参数是一个布尔值：true：在捕获阶段调用事件处理程序，false：在冒泡阶段调用事件处理程序（默认）
   事件对象都是event

4. 兼容性问题

<script>
     var eventUtil = {
        add : function(element, type, handler) {
            if(element.addEventListener) {
                element.addEventListener(type, handler, false);
            }else if( element.attachEvent ) {
                element.attachEvent("on"+type, handler);
            }else{
                element["on"+type] = handler;
            }
        },
        off : function(element, type, handler) {
            if( element.removeEventListener ) {
                element.removeEventListener(type, handler, false)
            }else if(element.detachEvent ) {
                element.detachEvent(type, handler);
            }else{
                element["on"+type] = null;
            }
        }
     };
    </script>