jQuery： on()特别的几种用法

jQuery大家肯定用得非常的熟练了，没什么好讲的，今天为什么要写关于on这个事件绑定的API？主要还是因为看了大神的博文：web移动端浮层滚动阻止window窗体滚动JS/CSS处理;其中对于on用于事件绑定的写法，本人没有使用过，所以就去查询了一下关于on的一些特别的用法，分为以下几类：

$(selector).on(event,childSelector,data,function,map)

1. 常用类型：

   $("#div1").on("click",function(){
       $(this).css("background-color","pink");
   });
   

2. 一个元素绑定同功能的多种事件：

   $("p").on("mouseover mouseout",function(){
     $("p").toggleClass("intro");
   
   });
   

3. 多元素绑定同一事件（同事件委托）

   $(document).on('click', '.test', function() {
     $(this).addClass('active');
   })
   当提供selector参数时，事件处理程序是指为委派事件（代理事件或事件委托）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。最好将脚本放在元素的HTML标记的后面或者在 document 的 ready 事件中进行事件绑定。
   

委托事件 有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。

```

1. 绑定多个不同功能的事件，这种写法之前没接触过，多多学习；

   $( "div.test" ).on({
     click: function() {
       $( this ).toggleClass( "active" );
     },
     mouseenter: function() {
       $( this ).addClass( "inside" );
     },
     mouseleave: function() {
       $( this ).removeClass( "inside" );
     }
   });
   

2. 将数据传递到处理函数中；

   $( "button" ).on( "click", {name: "Karl"},function greet( event ) {
     alert( "Hello " + event.data.name );
   });
   
   注意：data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。
   
   jQuery的1.4 ，相同的事件处理程序可以多次绑定到一个元素。这对于使用 event.data 功能，或者在闭包中使用唯一的数据时是特别有用的。
   

参考文章：

jquery中文文档