一、JS中事件的绑定

1.1 on事件类型方式：

  常见的比如onclick、onmouseover等，这类绑定方式缺点在于无法为同一事件绑定多个函数：

对象.onclick = function (){
  console.log(this.nodeType);
};
对象.onclick = function (){
  console.log(this.nodeName);
}

  上述代码中点击事件触发时，只会输出节点的名称，不会输出节点的类型，即会发生覆盖

1.2 addEventListener&attachEvent：

  为了解决on事件类型方式的缺点，DOM中又提供了addEventListener&attachEvent方法。其实两种方法实现的功能相同，不过是因为兼容问题，导致在不同浏览器中的使用方式不同：

//Chrome和火狐浏览器中使用
对象.addEventListener(事件类型，执行函数，true/false);
//IE8使用attachEvent
对象.attachEvent(on事件类型,执行函数)；

  在addEventListener中第三个参数为true时，表示在函数绑定在事件捕获阶段；而为false时表示函数绑定在事件冒泡阶段。在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要），所以此处一般取值为false。

二、JS中事件的解绑

  JS中事件的解绑一般遵循“用什么方式绑定，就用什么方式解绑”，不过需要注意的是，addEventListener和attachEvent方法绑定的函数不能是匿名函数，若是匿名函数将无法解绑：

//on事件类型
对象.onclick = funciton(){...};
对象.onclick = null;

//addEventListener
对象.addEventListener('click',f1,false);
对象.removeEventListener(‘click’,f1,false);

//attachEvent
对象.attachEvent('click',f1);
对象.detachEvent(‘click’,f1);

三、jQuery事件的绑定

3.1 .事件()方式：

对象.click(f1);
对象.click(f2);

  该方式绑定事件函数，不会发生覆盖的问题

3.2 .bind()方式：

  bind方式在简单事件注册方式上进行了优化，即可以同时注册多个事件：

$('p').bind('click mouseenter', function(){
});

3.3 delegate()方式：

  无论是简单的的事件注册方式还是bind方法都不支持动态事件绑定，也就是说上述两种两种只能对已存在的元素进行事件的绑定，之后生成的元素就无法绑定。故jQuery中就有了delegate方法：

$('.parentBox').delegate('p', 'click', function(){
    // 为 .parentBox下面的所有的p标签绑定事件
});

  delegate只能注册委托事件,即需要先获取元素的父级元素，再通过父级元素绑定。

3.4 on()方式：

  jQuery1.7之后，jQuery用on统一了所有事件的处理方法，所以强烈建议使用on方法:

//on注册简单事件
$(selector).on( 'click', function() {});

//on注册事件委托
$(selector).on( 'click','span', function() {});

四、jQuery事件的解绑

  可直接用off方式解绑事件：

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');