jQuery中的常用事件總結(jié)

更新時(shí)間：2009年12月27日 03:04:47 作者：

jquery中一些事件函數(shù)使用小結(jié)，需要的朋友可以參考下。

1.$(document).ready()
$(document).ready()是jQuery中響應(yīng)JavaScript內(nèi)置的onload事件并執(zhí)行任務(wù)的一種典型方式。它和onload具有類似的效果。但是也有一些差異：
當(dāng)一個(gè)文檔完全下載到瀏覽器中時(shí)，會(huì)觸發(fā)window.onload事件。而使用$(document).ready()注冊(cè)的事件處理程序會(huì)在html下載完成并解析為Dom樹之后，代碼就可以運(yùn)行，但并不意味著所有關(guān)聯(lián)文件都已經(jīng)下載完畢。
一個(gè)頁面中一般只有一個(gè)onload事件處理程序，而且只能一次保存對(duì)一個(gè)函數(shù)的引用；而$(document).ready()是可以有多個(gè)。
一般來說$(document).ready()都要優(yōu)于使用onload事件處理程序。但是如果關(guān)聯(lián)文件還沒有加載完成，則類似圖像高度、寬度的屬性的調(diào)用就會(huì)有問題，因此需要在不同的時(shí)候選擇合適的方法。

復(fù)制代碼代碼如下:

 
$(document).ready()有三種寫法，分別是： 
> $(document).ready(function() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
}); 

2. 事件捕獲與事件冒泡
事件捕獲：允許多個(gè)元素響應(yīng)事件的一種策略。在事件捕獲的過程中，事件首先會(huì)交給最外層的元素，接著再交給更具體的元素。
事件冒泡：另外一種相反的策略叫時(shí)間冒泡，當(dāng)事件發(fā)生時(shí)，會(huì)首先發(fā)送給最具體的元素，在這個(gè)元素獲得響應(yīng)機(jī)會(huì)之后，事件會(huì)向上冒泡到更一般的元素。事件冒泡有時(shí)候會(huì)產(chǎn)生副作用，導(dǎo)致始料不及的行為。
3.阻止事件冒泡的三種方法
指定默認(rèn)操作
通過調(diào)用.preventDefault()方法可以在出發(fā)默認(rèn)操作之前終止事件。
調(diào)用 event.stopPropagation()停止事件傳播
jQuery提供了一個(gè).stopPropagation()方法，使用該方法可以完全阻止事件冒泡。實(shí)例代碼如下：
使用stopPropagation()方法阻止事件冒泡

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$('switcher').click(function(event){ 
if(this.id == 'switcher-narrow'){ 
$('body').addClass('narrow'); 
} 
else if(this.id == 'switcher-large'){ 
$('body').addClass('large'); 
} 
$('switcher .button').romoveClass('selected'); 
$(this).addClass('selected'); 
event.stopPropagation(); 
};) 
}); 

使用event.tatget屬性明確事件對(duì)象
事件處理程序中的變量event保存著事件對(duì)象。而event.tatget屬性保存著發(fā)生事件的目標(biāo)元素。這個(gè)屬性是DOM API中規(guī)定的，但是沒有被所有瀏覽器實(shí)現(xiàn)。jQuery對(duì)這個(gè)事件對(duì)象進(jìn)行了必要的擴(kuò)展，從而在任何瀏覽器中都能夠使用這個(gè)屬性。通過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性明確事件對(duì)象阻止事件冒泡的代碼如下：

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$('switcher').click(function(event){ 
if(event.target == this) 
{ 
$('switcher .button').toggleClass('hidden'); 
} 
};) 
}); 

4.常用的事件綁定
jQuery通過使用.bind()方法為元素進(jìn)行事件綁定，通過使用.unbind()方法為元素進(jìn)行解除綁定。而且.bind()方法是可以執(zhí)行多次綁定的，如果沒有綁定，在進(jìn)行解除綁定的時(shí)候，這都是安全的。
很多時(shí)候某一個(gè)事件只需要觸發(fā)一次，隨后就要立即解除綁定，按照傳統(tǒng)的做法，我們可能會(huì)先進(jìn)行事件綁定，然后在事件執(zhí)行完畢后進(jìn)行解除綁定。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的代碼編寫，示例如下：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$('#swotcjer').one('click',toggleStyleSwitcher); 
}); 

5.復(fù)合事件
在進(jìn)行事件捕獲的時(shí)候，常常需要捕獲組合的用戶操作，并且以多個(gè)函數(shù)作為響應(yīng)，這些事件我們稱為復(fù)合事件。
jQuery提供的.read()方法就是最常用的符合事件方法之一，除此之外，還有進(jìn)行交互處理的時(shí)候用到的兩個(gè)函數(shù)：
.hover(over,out) 一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
.toggle(fn,fn) 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。

您可能感興趣的文章: