5-1 on()的多事件绑定
本节编程练习不计算学习进度，请电脑登录imooc.com操作

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事件
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 100%;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.  
  18.     .left div {
  19.         background: #bbffaa;
  20.     }
  21.  
  22.     .right div {
  23.         background: yellow;
  24.     }
  25.     </style>
  26.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <h2>on绑定多事件</h2>
  31.  
  32.     <h4>测试一</h4>
  33.     <div class="left">
  34.         点击触发：on('click',fn)
  35.         <div id="test1"></div>
  36.     </div>
  37.     <script type="text/javascript">
  38.     //事件绑定一
  39.     $("#test1").？('click', function(e) {
  40.         $(this).text('触发事件：' + e.type)
  41.     })
  42.     </script>
  43.  
  44.  
  45.     <h4>测试二</h4>
  46.     <div class="left">
  47.         点击触发：on('mousedown mouseup')
  48.         <div id="test2"></div>
  49.     </div>
  50.     <script type="text/javascript">
  51.     //多事件绑定一
  52.     $("#test2").on('mousedown mouseup', function(e) {
  53.         $(this).text('触发事件：' + e.type)
  54.     })
  55.     </script>
  56.  
  57.  
  58.     <h4>测试三</h4>
  59.     <div class="right">
  60.         点击触发：on(mousedown:fn1,mouseup:fn2)
  61.         <div id="test3"></div>
  62.     </div>
  63.     <script type="text/javascript">
  64.     //多事件绑定二
  65.     $("#test3").on({
  66.         mousedown: function(e) {
  67.             $(this).text('触发事件：' + e.type)
  68.         },
  69.         mouseup: function(e) {
  70.             $(this).text('触发事件：' + e.type)
  71.         }
  72.     })
  73.     </script>
  74. </body>
  75.  
  76. </html>
  77.  
下一节