這篇文章主要介紹了jquery中常用的事件，比如$(document).ready()、bind、hover、toggle、click等等，并有示例，易于學(xué)習(xí)。
1.$(document).ready()
$(document).ready()是jQuery中響應(yīng)JavaScript內(nèi)置的onload事件并執(zhí)行任務(wù)的一種典型方式。它和onload具有類似的效果。但是也有一些差異：
當(dāng)一個文檔完全下載到瀏覽器中時，會觸發(fā)window.onload事件。而使用$(document).ready()注冊的事件處理程序會在html下載完成并解析為Dom樹之后，代碼就可以運行，但并不意味著所有關(guān)聯(lián)文件都已經(jīng)下載完畢。
一個頁面中一般只有一個onload事件處理程序，而且只能一次保存對一個函數(shù)的引用；而$(document).ready()是可以有多個。
一般來說$(document).ready()都要優(yōu)于使用onload事件處理程序。但是如果關(guān)聯(lián)文件還沒有加載完成，則類似圖像高度、寬度的屬性的調(diào)用就會有問題，因此需要在不同的時候選擇合適的方法。
$(document).ready()有三種寫法，分別是：
$(document).ready(function(){
//thisis the coding...
});
$().ready(function(){
//thisis the coding...
});
$(function(){
//thisis the coding...
});
2.事件綁定
語法
$(selector).bind(event,data,function)
參數(shù)和描述：
event：必需。規(guī)定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)。
對應(yīng)的有unbind()：移除事件
Eg: $(‘#idchoose').unbind(“click”,Function_Name)
簡寫綁定事件：一般比較喜歡偏向簡寫
$("#dividelement").bind("click",function(){//do something})改寫為：
$("#dividelement").click(function(){//do something }
jQuery通過使用.bind()方法為元素進(jìn)行事件綁定，通過使用.unbind()方法為元素進(jìn)行解除綁定。而且.bind()方法是可以執(zhí)行多次綁定的，如果沒有綁定，在進(jìn)行解除綁定的時候，這都是安全的。
很多時候某一個事件只需要觸發(fā)一次，隨后就要立即解除綁定，按照傳統(tǒng)的做法，我們可能會先進(jìn)行事件綁定，然后在事件執(zhí)行完畢后進(jìn)行解除綁定。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的代碼編寫，示例如下：
$(document).ready(function(){
$('#swotcjer').one('click',toggleStyleSwitcher);
});
附帶說下，用bind綁定事件的好處是可以定義自定義的事件，而且可以一次綁定多個事件。
3.合成事件
在進(jìn)行事件捕獲的時候，常常需要捕獲組合的用戶操作，并且以多個函數(shù)作為響應(yīng)，這些事件我們稱為復(fù)合事件。
jQuery提供的.ready()方法就是最常用的符合事件方法之一，除此之外，還有進(jìn)行交互處理的時候用到的兩個函數(shù)：
.hover(enter,leave) 一個模仿懸停事件（鼠標(biāo)移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
$(function(){
$("#panelh5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
.toggle(fn1,fn2,..fnN) 每次點擊時切換要調(diào)用的函數(shù)。用于模擬鼠標(biāo)連續(xù)單擊事件。示例:
$(function(){
$("#panelh5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
4.事件對象與事件冒泡
事件對象：在程序中使用事件對象非常簡單，只需要為函數(shù)添加一個參數(shù)，eg:
$(“element”).click(function(event){
//event:事件對象
})
當(dāng)點擊“element”元素時候，事件對象就被創(chuàng)建了。這個對象只有事件處理函數(shù)能訪問。當(dāng)事件處理函數(shù)執(zhí)行完畢，事件對象就被銷毀了。
事件捕獲： 允許多個元素響應(yīng)事件的一種策略。在事件捕獲的過程中，事件首先會交給最外層的元素，接著再交給更具體的元素。 (body->div->span)
事件冒泡：另外一種相反的策略叫時間冒泡，當(dāng)事件發(fā)生時，會首先發(fā)送給最具體的元素，在這個元素獲得響應(yīng)機會之后，事件會向上冒泡到更一般的元素。事件冒泡有時候會產(chǎn)生副作用，導(dǎo)致始料不及的行為。 (span->div->body)
阻止事件冒泡的三種方法
通過調(diào)用.preventDefault()方法可以在出發(fā)默認(rèn)操作之前終止事件。
調(diào)用event.stopPropagation()停止事件傳播
jQuery提供了一個.stopPropagation()方法，使用該方法可以完全阻止事件冒泡。
5.使用event.tatget屬性明確事件對象
事件處理程序中event保存著事件對象。而event.tatget屬性保存著發(fā)生事件的目標(biāo)元素。這個屬性是DOMAPI中規(guī)定的，但是沒有被所有瀏覽器實現(xiàn)。jQuery對這個事件對象進(jìn)行了必要的擴(kuò)展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性 明確事件對象阻止事件冒泡的代碼如下：
$(document).ready(function(){
$('switcher').click(function(event){
if(event.target== this)
{
$('switcher.button').toggleClass('hidden');
}
};)
});
其他事件對象屬性可以參考w3c上的介紹。
更多信息請查看IT技術(shù)專欄
版權(quán)所有:易賢網(wǎng)
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試