jquery on()方法 off()方法

on() 使用场景最多

1. 最简单的写法

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

   • 1
   • 2
   • 3

2. 同时给多个元素绑定一样的事件

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

   • 1
   • 2
   • 3

3. 同时给元素绑定多个事件

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

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8

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");
   

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13

off() 解绑事件

1. 最简单的写法

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

   • 1

2. 同时给多个元素解绑一样的事件

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

   • 1

3. 同时给元素解绑多个事件

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

   • 1

4. 实现事件委托的解绑 
   父元素ul li 给目标元素.demostrate移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。 
   只需要考虑一个父元素就可以，给父元素移除委托事件，不用考虑子元素的数量什么的。

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