自從jquery1.7以來，on事件新增到這個版本，使得事件的繫結變的十分簡單，用過jquery的人都說好，相信對off，on方法愛不釋手。下面是我總結出來的on,off的使用語法，希望對小夥伴有幫助。

on() 使用場景最多

1. 最簡單的寫法

    $("ul li").on("click",function(){  
     alert("不響應事件!");  
    })  
   

2. 同時給多個元素繫結一樣的事件

    $("ul li,div").on("click",function(){  
     alert("不響應事件!");  
    }) 
   

3. 同時給元素繫結多個事件

   $(".demonstrate").on({  
     mouseover:function(){  
     $(this).addClass("over");  
     },  
     mouseout:function(){  
     $(this).removeClass("over");  
     }  
   },"ul li")  
    
   

4. 實現事件委託
   父元素ul li 給目標元素.demostrate新增事件,事件委託的好處是,目標元素可以是之前頁面不存在到,後來加上去的也可以。
   只需要考慮一個父元素就可以，給父元素新增委託事件，不用考慮子元素的數量什麼的。

    $("ul li").on({
           click:function(){
               console.log('click','1111');
           },
           mouseover: function () {
               console.log('mouseover','1111');
               $(this).addClass("over");
           },
           mouseout: function () {
               $(this).removeClass("over");
           }
       },".demostrate");
   
    
   

off() 解綁事件

1. 最簡單的寫法

    $("ul li").off("click")  
   

2. 同時給多個元素解綁一樣的事件

    $("ul li,div").off("click") 
   

3. 同時給元素解綁多個事件

   $(".demonstrate").off("mouseover mouseout","ul li")  
   

4. 實現事件委託的解綁
   父元素ul li 給目標元素.demostrate移除事件,事件委託的好處是,目標元素可以是之前頁面不存在到,後來加上去的也可以。
   只需要考慮一個父元素就可以，給父元素移除委託事件，不用考慮子元素的數量什麼的。

    $("ul li").off("click mouseover mouseout",".demostrate");