jQuery 事件

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

　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});


若是你須要移除on()所綁定的方法，可使用off()方法處理。
$(document).ready(function(){

　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

tip:若是你的事件只須要一次的操做，可使用one()這個方法

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

trigger()綁定

$(selector).trigger(event,eventObj,param1,param2,...)

$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

多個事件綁定同一個函數

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

多個事件綁定不一樣函數

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

綁定自定義事件

$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});

傳遞數據到函數

function handlerName(event) 
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

適用於未建立的元素

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

http://www.cnblogs.com/leejersey/p/3545372.html



one()爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。

trigger()

triggerHandler()

一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它爲頻繁使用的任務提供了一種「保持在其中」的狀態。

當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。並且，會伴隨着對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），若是是，則會繼續保持「懸停」狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

toggle()

用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。

[speed], [easing ], [fn ] 

speed: 隱藏/顯示 效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"

fn:在動畫完成時執行的函數，每一個元素執行一次。

 

$('td).toggle();  對錶格切換顯示/隱藏

對錶格的切換一個類

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

$("p").toggle("slow");用600毫秒的時間將段落緩慢的切換顯示狀態

用200毫秒將段落迅速切換顯示狀態，以後彈出一個對話框。

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

$("p").blur( function () { alert("Hello World!"); } );

$("input[type='text']").change( function() {
  // 這裏能夠寫些驗證代碼
});

$("p").click( function () { $(this).hide(); });

$("p").dblclick( function () { alert("Hello World!"); });

$("#login").focus();

$("input[type=text]").focus(function(){
  this.blur();
});

focusin()
當 <div> 元素或其任意子元素得到焦點時，設置 <div> 元素的背景顏色：
http://www.runoob.com/try/try.php?filename=tryjquery_event_focusout

focusout()

keydown()
當按下按鍵時，改變文本域的顏色：


keypress()

keypress 事件與 keydown 事件相似。當按鈕被按下時，會發生該事件。它發生在當前得到焦點的元素上。

不過，與 keydown 事件不一樣，每插入一個字符，就會發生 keypress 事件。

keypress() 方法觸發 keypress 事件，或規定當發生 keypress 事件時運行的函數。

keyup()

mousedown()

mouseenter()

定義和用法

當鼠標指針穿過元素時，會發生 mouseenter 事件。

該事件大多數時候會與 mouseleave 事件一塊兒使用。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數。

註釋：與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件

mouseleave()

mousemove()

mouseout()

mouseover()

$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });
});

定義和用法

當鼠標指針位於元素上方時，會發生 mouseover 事件。

該事件大多數時候會與 mouseout 事件一塊兒使用。

mouseover() 方法觸發 mouseover 事件，或規定當發生 mouseover 事件時運行的函數。

註釋：與 mouseenter 事件不一樣，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。請看下面例子的演示。

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_over_out_trigger

mouseup()

定義和用法

當在元素上放鬆鼠標按鈕時，會發生 mouseup 事件。

與 click 事件不一樣，mouseup 事件僅須要放鬆按鈕。當鼠標指針位於元素上方時，放鬆鼠標按鈕就會觸發該事件。

mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數。

當鬆開鼠標按鈕時，隱藏或顯示元素：

一、$(document).ready(function(){
$("button").mouseup(function(){
$("p").slideToggle();
});
});



二、$(document).ready(function(){
$("button").mouseup(function(){
$("div").slideToggle();
});
$("#mousePara").mouseover(function(){
$("button").mouseup();
});
});

　　

resize()

當調整瀏覽器窗口的大小時，發生 resize 事件。

x=0;
$(document).ready(function(){
$(window).resize(function() {
$("span").text(x+=1);
});

<span>0</span>

$(window).resize( function(){
    alert("不建議調整窗口大小!");
} );

// 觸發window對象的resize事件
// $(window).resize( );

var minSize = { width: 800, height: 600 };

$(window).resize( minSize, function(event){
    var min = event.data;
    var $dom = $(this);
    if( $dom.width() < min.width ){
        $("body").append("<br>窗口寬度不要小於" + min.width );
    }else if( $dom.height() < min.height ){
        $("body").append("<br>窗口高度不要小於" + min.height);
    }
} );

scroll()

當用戶滾動指定的元素時，會發生 scroll 事件。

scroll 事件適用於全部可滾動的元素和 window 對象（瀏覽器窗口）。

$("div").scroll(function() {
  $("span").text(x+=1);
});

select()

描述:

觸發全部input元素的select事件:

jQuery 代碼:

$("input").select();

描述:

當文本框中文本被選中時執行的函數:

jQuery 代碼:

$(":text").select( function () { /* ...do something... */ } );

submit()

當提交表單時，會發生 submit 事件。

該事件只適用於表單元素。

描述:

提交本頁的第一個表單:

jQuery 代碼:

$("form:first").submit();

描述:

若是你要阻止表單提交:

jQuery 代碼:

$("form").submit( function () {
  return false;
} );

unload()

在當用戶離開頁面時，會發生 unload 事件。

具體來講，當發生如下狀況時，會發出 unload 事件：

• 點擊某個離開頁面的連接
• 在地址欄中鍵入了新的 URL
• 使用前進或後退按鈕
• 關閉瀏覽器
• 從新加載頁面 

• $(window).unload( function () { alert("Bye now!"); } );