Jquery中的常用事件總結

1.$(document).ready()

$(document).ready()是jQuery中響應JavaScript內建的onload事件並執行任務的一種典型方式。它和onload具有類似的效果。但是也有一些差異：

當一個文件完全下載到瀏覽器中時，會觸發window.onload事件。而使用$(document).ready()註冊的事件處理程式會在html下載完成並解析為Dom樹之後，程式碼就可以執行，但並不意味著所有關聯檔案都已經下載完畢。

一個頁面中一般只有一個onload事件處理程式，而且只能一次儲存對一個函式的引用；而$(document).ready()是可以有多個。

一般來說$(document).ready()都要優於使用onload事件處理程式。但是如果關聯檔案還沒有載入完成，則類似影象高度、寬度的屬性的呼叫就會有問題，因此需要在不同的時候選擇合適的方法。

複製程式碼 程式碼如下:

$(document).ready()有三種寫法，分別是：

$(document).ready(function(){

//thisis the coding...

});

$().ready(function(){

//thisis the coding...

});

$(function(){

//thisis the coding...

});

2.事件繫結

語法

$(selector).bind(event,data,function)

引數和描述：

event：必需。規定新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。

data 可選。規定傳遞到函式的額外資料。

function  必需。規定當事件發生時執行的函式。

對應的有unbind()：移除事件

Eg:  $(‘#idchoose’).unbind(“click”,Function_Name)

簡寫繫結事件：一般比較喜歡偏向簡寫

$("#dividelement").bind("click",function(){//do something})改寫為：

$("#dividelement").click(function(){//do something }

jQuery通過使用.bind()方法為元素進行事件繫結，通過使用.unbind()方法為元素進行解除繫結。而且.bind()方法是可以執行多次繫結的，如果沒有繫結，在進行解除繫結的時候，這都是安全的。

很多時候某一個事件只需要觸發一次，隨後就要立即解除繫結，按照傳統的做法，我們可能會先進行事件繫結，然後在事件執行完畢後進行解除繫結。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的程式碼編寫，示例如下：

複製程式碼 程式碼如下:

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

附帶說下，用bind繫結事件的好處是可以定義自定義的事件，而且可以一次繫結多個事件。

3.合成事件

在進行事件捕獲的時候，常常需要捕獲組合的使用者操作，並且以多個函式作為響應，這些事件我們稱為複合事件。

jQuery提供的.ready()方法就是最常用的符合事件方法之一，除此之外，還有進行互動處理的時候用到的兩個函式：

.hover(enter,leave) 一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。

$(function(){

    $("#panelh5.head").hover(function(){

          $(this).next().show();

       },function(){

          $(this).next().hide();  

       })

})

.toggle(fn1,fn2,..fnN) 每次點選時切換要呼叫的函式。用於模擬滑鼠連續單擊事件。示例:

$(function(){

    $("#panelh5.head").toggle(function(){

                     $(this).addClass("highlight");

                     $(this).next().show();

       },function(){

                     $(this).removeClass("highlight");

                     $(this).next().hide();

       });

})

4.事件物件與事件冒泡

事件物件：在程式中使用事件物件非常簡單，只需要為函式新增一個引數，eg:

$(“element”).click(function(event){

//event:事件物件

})

當點選“element”元素時候，事件物件就被建立了。這個物件只有事件處理函式能訪問。當事件處理函式執行完畢，事件物件就被銷燬了。

事件捕獲： 允許多個元素響應事件的一種策略。在事件捕獲的過程中，事件首先會交給最外層的元素，接著再交給更具體的元素。 (body->div->span)

事件冒泡：另外一種相反的策略叫時間冒泡，當事件發生時，會首先發送給最具體的元素，在這個元素獲得響應機會之後，事件會向上冒泡到更一般的元素。事件冒泡有時候會產生副作用，導致始料不及的行為。 (span->div->body)

阻止事件冒泡的三種方法:

通過呼叫.preventDefault()方法可以在出發預設操作之前終止事件。

呼叫event.stopPropagation()停止事件傳播

jQuery提供了一個.stopPropagation()方法，使用該方法可以完全阻止事件冒泡。

5.使用event.tatget屬性明確事件物件

事件處理程式中event儲存著事件物件。而event.tatget屬性儲存著發生事件的目標元素。這個屬性是DOMAPI中規定的，但是沒有被所有瀏覽器實現。jQuery對這個事件物件進行了必要的擴充套件，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。

使用event.tatget屬性 明確事件物件阻止事件冒泡的程式碼如下：

複製程式碼 程式碼如下:

$(document).ready(function(){

$('switcher').click(function(event){

if(event.target== this)

{

$('switcher.button').toggleClass('hidden');

}

};)

});

其他事件物件屬性可以參考w3c上的介紹。