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 事件中進行事件綁定。 
   

委托事件 有一個優勢，他們能在后代元素添加到文檔后，可以處理這些事件。在確保所選擇的元素已經存在的情況下，進行事件綁定時，您可以使用委派的事件，以避免頻繁的綁定事件及解除綁定事件。
```

4. 綁定多個不同功能的事件，這種寫法之前沒接觸過，多多學習；

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

5. 將數據傳遞到處理函數中；

   $( "button" ).on( "click", {name: "Karl"},function greet( event ) {
     alert( "Hello " + event.data.name );
   });
   
   注意：data參數可以是任何類型，但如果是字符串類型時，那么selector參數必須提供，或明確地傳遞null，這樣的 data 參數不會誤認為是選擇器。最好是使用一個對象（鍵值對） ，所以可以作為屬性傳遞多個值。
   
   jQuery的1.4 ，相同的事件處理程序可以多次綁定到一個元素。這對於使用 event.data 功能，或者在閉包中使用唯一的數據時是特別有用的。
   

參考文章：

jquery中文文檔