jQuery的事件處理

一、頁面加載響應事件

$（document）.ready（）方法，獲取文檔就緒的時候。他極大地提高了Web相應速度。雖然該方法可以代替傳統的window.onload（）方法，但是兩者之間仍然有差別。

（1）在頁面中可以無限制次數的使用$（document）.ready（）方法，各個方法之間不會沖突，會按照代碼的順序依次執行。但是一個頁面中只能有一個window.onload（）方法。

（2）在一個文檔完全下載到瀏覽器時（包括有關聯的文件、圖片等），就會相應window.onload（）方法。而$（document）.ready（）方法是在所有的DOM元素完全就緒后才可以使用，不包括關聯的文件。比如，頁面上還有圖片沒有加載完成，但是DOM元素已經准備就緒，$（document）.ready（）方法就能執行，在相同條件下，window.onload（）方法是不會執行的，他會等待圖片加載，直到圖片都下載完畢后才會執行。所以，$（document）.ready（）方法優於window.onload（）方法。

 

二、jQuery中的事件

以下fn為處理函數，可以有，也可以沒有。

【blur（fn）】：失去焦點事件。元素失去焦點時觸發。

【change（fn）】：在元素值改變並失去焦點時觸發。

【focus（fn）】：元素獲得焦點時觸發。

【mousemove（fn）】：鼠標在元素移動時觸發。

【mouseout（fn）】：鼠標從元素上離開時觸發。

【mouseover（fn）】：鼠標移入對象時觸發。

【mouseup（fn）】：鼠標單擊對象釋放時觸發。

例題：橫向導航菜單欄，使用的就是mouseover與mouseout事件，js核心代碼塊如下：

// 通過mouserover事件讓其他子菜單隱藏，並且顯示本菜單。
$(document).ready(function(){ 
    // 先通過類選擇器找到大的div   
    $(".menubar").mouseover(function(){ 
        // 在該div下面找到小的菜單，也就是.menu       
        $(this).find(".menu").show();        
    });
    $(".menubar").mouseout(function(){        
        $(this).find(".menu").hide();
    });
})

 

在樣式表中，首先將.menu類的設置為隱藏，也就是  .menu{display:none}

 

三、事件綁定

在頁面加載完畢時，通過為元素綁定事件完成相應的操作。

1、綁定事件——bind(type,[data],fn)

type為事件類型，比如點擊、鼠標移入等；data是可選項，作為event.data屬性值傳遞給時間對象的額外數據對象，多數情況下不使用；fn為綁定的事件處理程序。

例題：單擊按鈕，彈出提示對話框，就是利用綁定事件實現。js核心代碼如下，注意事件type是“click”，而不是“onclick”。

$(document).ready(function(){
    $("input:button").bind("click",function(){alert("您點擊了按鈕。")});
})

 

例題：通過在下拉框中選擇選項，實現換膚的功能，就是利用事件綁定實現的。

 

 

 

 

2、移除綁定——unbind([type],[data])

3、綁定一次性事件處理——one(type,[data],fn)

 

四、模擬用戶操作

1、模擬用戶的操作觸發事件

2、模仿懸停事件

3、模擬鼠標連續點擊事件