DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery中的常用事件bind、hover、toggle等示例介紹
jquery中的常用事件bind、hover、toggle等示例介紹
編輯: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上的介紹。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved