慕课网

on()的多事件绑定

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

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

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

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

最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看

多个事件绑定同一个函数

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

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

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

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

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

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

以上都是on方法基本用法，具体可以参考下右边的代码的一些使用

在代码39行处，填入任务代码

给 id="test1"的元素绑定一个click事件

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求