本篇文章主要是介绍一下DOM操作时候，经常会用到的元素事件的绑定与解绑方式，以及不同事件绑定方法的区别

一、元素事件的绑定

  1. 第一种方式 
/**
*  @param {*} element 元素
*  @param {*} type    事件类型
 * @param {*} fn      事件处理函数
*/
element["on"+type]=fn;

例如：
    element.onclick = function(){
          console.log("我是element元素的点击事件");  
    }
  1. 第二种方式 
/**
 * 为任意元素绑定任意事件
 * @param {*} element 元素
 * @param {*} type    事件类型
 * @param {*} fn      事件处理函数
 */
element.addEventListener(type,fn,false);
例如：
    element.addEventListener('click',function(){
            console.log("我是element元素的点击事件");
    },false);
  1. 第三种方式 
/**
 * 为任意元素绑定任意事件
 * @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;
  1. 第二种事件绑定方式的解绑 
/**
 * 为元素绑定事件
 * @param {*} element 元素
 * @param {*} type    事件类型
 * @param {*} fn      事件处理函数
 */
element.removeEventListener(type,fn,false);
例如：
   element.removeEventListener("click",function(){
        console.log("我是第二种事件绑定方式的解绑");
    },false);
  1. 第三中事件绑定方式的解绑 
/**
 * 为元素解绑事件
 * @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