js元素事件的綁定與解綁，綁定事件的區別

一、元素事件的綁定

1. 第一種方式

   /**
   *  @param {*} element 元素
   *  @param {*} type    事件類型
    * @param {*} fn      事件處理函數
   */
   element["on"+type]=fn;
   
   例如：
       element.onclick = function(){
             console.log("我是element元素的點擊事件");  
       }

2. 第二種方式

   /**
    * 為任意元素綁定任意事件
    * @param {*} element 元素
    * @param {*} type    事件類型
    * @param {*} fn      事件處理函數
    */
   element.addEventListener(type,fn,false);
   例如：
       element.addEventListener('click',function(){
               console.log("我是element元素的點擊事件");
       },false);

3.  

   第三種方式

   /**
    * 為任意元素綁定任意事件
    * @param {*} element 元素
    * @param {*} type    事件類型
    * @param {*} fn      事件處理函數
    */
   element.attachEvent(type,fn);
   例如：
       element.attachEvent('onclick',function(){
               console.log("我是element元素的點擊事件");
       });

   　　　

二、元素事件的解綁

1. 第一種事件綁定方式的解綁

   /**
    * 為元素解綁事件
    * @param {*} element 標簽元素
    * @param {*} type 事件類型
    */
   element["on"+type] = null;
   例如：
   element.onclick = null; 　

2. 第二種事件綁定方式的解綁

   /**
    * 為元素綁定事件
    * @param {*} element 元素
    * @param {*} type    事件類型
    * @param {*} fn      事件處理函數
    */
   element.removeEventListener(type,fn,false);
   例如：
      element.removeEventListener("click",function(){
           console.log("我是第二種事件綁定方式的解綁");
       },false);　　

3. 第三中事件綁定方式的解綁

   /**
    * 為元素解綁事件
    * @param {*} element 元素
    * @param {*} type    事件類型
    * @param {*} fn      事件處理函數
    */
   element.detachEvent(type,fn);
   例如：
   element.detachEvent("onclick",function(){
       console.log("我是第三種事件綁定方式的解綁事件");
   });

　　注意：

1. 用什么方式綁定事件，就用什么方式解綁事件；
2. element.removeEventListener(type,fn,false) ====> element.addEventListener(type,fn,false)
   fn必須是命名函數，不能是匿名函數
   IE8不支持
   type是沒有on的事件類型
   第三個參數是用來控制事件階段的，false代表是冒泡階段，true代表是捕獲階段
3. element.detachEvent(type,fn) ====> element.attachEvent(type,fn)

   fn必須是命名函數，不能是匿名函數

   谷歌火狐不支持，IE8支持

   type是有on的事件類型　

　　

三、綁定事件的區別

　　addEventListener() 與 attachEvent() 

　　

　　 相同點：

　　　　都可以為元素綁定事件

　　 不同點：

　　　　1.方法名不一樣

　　　　2.參數不一樣,addEventListener接收三個參數，attachEvent接收兩個參數

　　　　3.addEventListener 谷歌，火狐，IE11支持，IE8不支持

　　　　   attachEvent 谷歌，火狐，IE11不支持，IE8支持

　　　　4.this不同，addEventListener 中this是當前綁定事件的對象，attachEvent 中的this是window

　　　　5.addEventListener 中事件的類型（事件的名字）沒有on

　　　　   attachEvent 中時間的類型（事件的名字）有on