首頁 > web前端 > js教程 > jQuery中一些常用事件函數用法實例總結

jQuery中一些常用事件函數用法實例總結

伊谢尔伦
發布: 2017-06-19 11:13:21
原創
1116 人瀏覽過

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() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
});
登入後複製

2. 事件擷取與事件冒泡
事件擷取: 允許多個元素回應事件的一種策略。在事件捕獲的過程中,事件會先交給最外層的元素,接著再交給更具體的元素。
事件冒泡:另一個相反的策略叫時間冒泡,當事件發生時,會先發送給最具體的元素,在這個元素獲得回應機會之後,事件會向上冒泡到更一般的元素。事件冒泡有時候會產生副作用,導致始料不及的行為。
3.阻止事件冒泡的三種方法
指定預設動作
透過呼叫.preventDefault()方法可以在出發預設操作之前終止事件。
呼叫 event.stopPropagation()停止事件傳播
jQuery提供了一個.stopPropagation()方法,使用該方法可以完全阻止事件冒泡。實例程式碼如下:
使用stopPropagation()方法阻止事件冒泡 

$(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屬性明確事件物件##事件處理程序中的變數event保存事件物件。而event.tatget屬性則保存著發生事件的目標元素。這個屬性是DOM API中規定的,但是沒有被所有瀏覽器實作。 jQuery對這個事件物件進行了必要的擴展,從而在任何瀏覽器中都能夠使用這個屬性。透過.target,可以確定DOM中首先接收到事件的元素。而且,我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性明確事件物件阻止事件冒泡的程式碼如下: 

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

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

$(document).ready(function(){ 
$('#swotcjer').one('click',toggleStyleSwitcher); 
});
登入後複製

5.複合事件
在進行事件捕捉的時候,常常需要捕捉組合的使用者操作,並且以多個函數作為回應,這些事件我們稱為複合事件。
jQuery提供的.read()方法就是最常用的符合事件方法之一,除此之外,還有進行交互處理的時候用到的兩個函數:
.hover(over,out)模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。這是一個自訂的方法,它為頻繁使用的任務提供了一種「保持在其中」的狀態。
.toggle(fn,fn) 每次點擊時切換要呼叫的函數。

以上是jQuery中一些常用事件函數用法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板