jQuery事件

jQuery JavaScript 動態操做dom,事件 操做的是誰 選擇器 ID class 元素

JQuery的特色

1.化繁爲簡

2.兼容性

jQuery對象和dom對象之間的相互轉換

dom對象

var userid = document.getElementById("userid")；

dom對象==》jQuery對象

var userid = $(dom2);

jQuery對象==》dom對象

var userid =$("input[name'userid']")[1];

-----------------------------------------------------------------------------------------

添加、刪除一(多)個事件

1.bind() 方法爲被選元素 添加一個或多個事件處理程序，並規定事件發生時運行的函數。

$("button").bind("click",function(){ $("p").slideToggle();});

unbind() 方法移除被選元素的事件處理程序。

該方法可以移除全部的或被選的事件處理程序，或者當事件發生時終止指定函數的運行。

ubind() 適用於任何經過 jQuery 附加的事件處理程序。

移除全部 p 元素的事件處理器：

$("button").click(function(){ $("p").unbind();});

2.delegate() 方法爲指定的元素 （屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

 

-----------------------------------------------------------------------------------------

使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）

當點擊鼠標時，隱藏或顯示 p 元素：

$("div").delegate("button","click",function(){ $("p").slideToggle();});

 

undelegate() 方法刪除由 delegate() 方法添加的一個或多個事件處理程序。

從全部元素刪除由 delegate() 方法添加的全部事件處理器：

$("body").undelegate();

 

3.live() 方法爲被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

經過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。

$("button").live("click",function(){ $("p").slideToggle();});

4.die() 方法移除全部經過 live() 方法向指定元素添加的一個或多個事件處理程序。

移除全部經過 live() 方法向 p 元素添加的事件處理程序：

$("p").die();

-----------------------------------------------------------------------------------------

得到失去焦點

1.當元素得到焦點時，發生 focus 事件。

當經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點。

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

$("input").focus(function(){ $("input").css("background-color","#FFFFCC");});

 

2.當元素失去焦點時發生 blur 事件。

blur() 函數觸發 blur 事件，或者若是設置了  function 參數，該函數也可規定當發生 blur 事件時執行的代碼。

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

$("input").blur(function(){ $("input").css("background-color","#D6D6FF");});

 

3.當元素的值發生改變時，會發生 change 事件。

該事件僅適用於文本域（text field），以及 textarea 和 select 元素。

change() 函數觸發 change 事件，或規定當發生 change 事件時運行的函數。此事件是在改變後失去焦點時觸發

$(".field").change(function(){ $(this).css("background-color","#FFFFCC");});

-------------------------------------------------------------------------------------------

 

mouse事件

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

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

當鼠標指針位於元素上方時時，改變元素的背景色：

$("p").mouseover(function(){ $("p").css("background-color","yellow");});

2.當鼠標指針從元素上移開時，發生 mouseout 事件。

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

當鼠標從元素上移開時，改變元素的背景色：

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

mouseover與mouseenter的區別

mouseover與mouseenter

不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。

只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

mouseout與mouseleave

不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。

只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。

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

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

當鼠標指針進入（穿過）元素時，改變元素的背景色：

$("p").mouseenter(function(){ $("p").css("background-color","yellow");});

4.當鼠標指針離開元素時，會發生 mouseleave 事件。

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

當鼠標指針離開元素時，改變元素的背景色：

$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});

 

-------------------------------------------------------------------------------------------

 

key事件

 

2.完整的 key press 過程分爲兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。

當按鈕被按下時，發生 keydown 事件。

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

$("input").keydown(function(){ $("input").css("background-color","#FFFFCC");});

3.當按鈕被鬆開時，發生 keyup 事件。它發生在當前得到焦點的元素上。

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

$("input").keyup(function(){ $("input").css("background-color","#D6D6FF");});

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

不過，與 keydown 事件不一樣，每插入一個字符，就會發生 keypress 事件。 不接受漢字 只接受 字母數字 符號

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

$("input").keydown(function(){ $("span").text(i+=1);});

 

-------------------------------------------------------------------------------------------

加載 離開頁面

當指定的元素（及子元素）已加載時，會發生 load() 事件。

該事件適用於任何帶有 URL 的元素（好比圖像、腳本、框架、內聯框架）。

根據不一樣的瀏覽器（Firefox 和 IE），若是圖像已被緩存，則也許不會觸發 load 事件。

當圖像加載時，改變 div 元素的文本：

$("img").load(function(){ $("div").text("Image loaded");});

 

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

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

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

unload() 方法將事件0處理程序綁定到 unload 事件。

unload() 方法只應用於 window 對象。

 

當用戶點擊連接離開本頁時，彈出一個消息框：

$(window).unload(function(){ alert("Goodbye!");});