事件监听addEventListener()和removeEventListener() ---------1

一直想写一个原生事件监听的记录，方便以后看，不愿意写主要是事件监听的单词太长，记起来好难记每次都要查，这次把知道的写完了，来这里查好了，以后要是理解的更透彻了，就再补全好了

首先，DOM0级事件和DOM2级事件

给一个元素添加事件有三种方法

HTML

对于btn3的按钮，事件是直接加到元素标签内的，好像叫html事件，缺点就是没有分离吧

DOM0级事件

//添加事件
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
    alert('我是btn1')
}
//解除事件
btn1.onclick=null;

直接取到btn1，给他添加conclick事件，缺点只能添加一个事件，如果再添加，会覆盖第一个事件

DOM2级事件

//添加事件 
var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
btn2.addEventListener('click',box,false);
//解除事件
btn2.removeEventListener('click',box,false);

添加事件用 addEventListener(什么事件、做什么事、false); false好像是事件冒泡阶段对应的 true事件捕获阶段，一般我这种菜鸟用不到true，没试过，反正一律写false

删除事件用 removeEventListener(什么事件、做什么事、false);

ps:添加事件和删除事件，必须和添加的时候相同才能移除，不然清不掉。

好像挺简单，真的要是这样就好了，这个addEventListener和removeEventListener有兼容问题，好像是IE8以下不好使，所以还有另外的单词要记

attachEvent 和 detachEvent，这个好像是IE专属，

用法

//添加事件 
var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
btn2.attachEvent('onclick',box);
//解除事件
btn2.detachEvent('onclick',box);

没有第三个参数是因为IE8以前只支持事件冒泡，另外需要记住，这里是onclick，所有的事件都要加on，低级的浏览器事比较多

好了，要记住这四个单词

addEventListener、removeEventListener、attachEvent、detachEvent

------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------------------------------

要兼容所有浏览器，就做判断，谁有能力，谁做事

var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
var eventUtil={
       // 添加事件
    addHandler:function(element,type,handler){         ////三个参数分别为元素、事件、做什么事(方法)
         if(element.addEventListener){                 //如果支持element.addEventListener方法就用addEventListener
           element.addEventListener(type,handler,false);          
         }else if(element.attachEvent){                //如果支持element.attachEvent方法就用attachEvent
           element.attachEvent('on'+type,handler);    
         }else{
           element['on'+type]=handler;                 //如果都不支持，那就用DOM0级的方法
         }
    },
    // 删除事件                                        //同上
       removeHandler:function(element,type,handler){
         if(element.removeEventListener){
           element.removeEventListener(type,handler,false);
         }else if(element.detachEvent){
                 element.detachEvent('on'+type,handler);
         }else{
           element['on'+type]=null;
         }
    }
}
eventUtil.addHandler(btn2,'click',box);
eventUtil.removeHandler(btn2,'click',box);

封装了一个方法，以后可以直接拿过来用