1. 程式人生 > >jquery 深入學習筆記之中的一個 (事件綁定)

jquery 深入學習筆記之中的一個 (事件綁定)

color 動態 name his pan mouseover this pre con

【jquery 事件綁定】


1、加入元素事件綁定

(1) 加入事件為當前元素

$(‘p‘).on(‘click‘,function(){
    //code here ...
});

(2) 加入事件為未來元素(動態加入元素)

$(document父).on(‘click‘,‘p子‘,function(){
    //code here...
})

註意前後倆者對象是父子關系(僅僅要是父子均可)

(3) 多個事件同一時候綁定


$(document).ready(function(){
  $("p").on({
    mouseover:function(){$(this).css("background-color","lightgray");},  
    mouseout:function(){$(this).css("background-color","lightblue");}, 
    click:function(){$(this).css("background-color","yellow");}  
  });
});



2、移除元素事件綁定



(1) 移除全部的事件

$( "p" ).off();

(2) 移除全部點擊事件

$( "p" ).off( "click", "**" );

(3) 移除某個特定的綁定程序

$( "body" ).off( "click", "p", foo );

(4) 解綁某個類相關的全部事件處理程序

$(document).off(".someclass");

3. 加入元素一次事件綁定

一次觸發,事件自己主動解除
$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

等價於:
$("#foo").on("click", function(event){
  alert("This will be displayed only once.");
  $(this).off(event);
});











jquery 深入學習筆記之中的一個 (事件綁定)