1. on()的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同：

$("#elem").click(function(){})  //快捷方式

$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名。

 

多个事件绑定同一个函数

 $("#elem").on("mouseovermouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件。

 

多个事件绑定不同函数

$("#elem").on({

   mouseover:function(){}, 

    mouseout:function(){},

});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法。

 

将数据传递到处理程序

function greet( event ) {

  alert( "Hello " +event.data.name ); //Hello 慕课网

}

$( "button" ).on( "click", {

  name: "慕课网"

}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的。

 

2. on()的高级用法

针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法，delegate方法等等。这些方法的底层实现部分还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的。

委托机制

.on( events ,[selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器，简单的来描述下。

参考下面3层结构：

<div class="left">

    <pclass="aaron">

        <a>目标节点</a>//点击在这个元素上

    </p>

</div>

给出如下代码：

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡到div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。

 

3. 卸载事件off()方法

（1）通过.on()绑定的事件处理程序

（2）通过off() 方法移除该绑定

 

根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

绑定2个事件

$("elem").on("mousedownmouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedownmouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

附：以上内容整理自慕课网