DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery中的事件總結
jQuery中的事件總結
編輯:關於JavaScript     
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.阻止事件冒泡的三種方法 #MySignature { BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #e5e5e5 1px solid; PADDING-LEFT: 60px; BACKGROUND: url(http://wlb.cnblogs.com/images/cnblogs_com/wlb/1.jpg) #fffefe no-repeat 1% 50%; PADDING-BOTTOM: 10px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #e5e5e5 1px solid } #MySignature A:link { COLOR: #f60 } #MySignature A:visited { COLOR: #f60 } #MySignature A:active { COLOR: #f60 } #MySignature A:hover { COLOR: #f60; TEXT-DECORATION: underline }


指定默認操作

通過調用.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)    每次點擊時切換要調用的函數。
#MySignature { BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #e5e5e5 1px solid; PADDING-LEFT: 60px; BACKGROUND: url(http://wlb.cnblogs.com/images/cnblogs_com/wlb/1.jpg) #fffefe no-repeat 1% 50%; PADDING-BOTTOM: 10px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #e5e5e5 1px solid } #MySignature A:link { COLOR: #f60 } #MySignature A:visited { COLOR: #f60 } #MySignature A:active { COLOR: #f60 } #MySignature A:hover { COLOR: #f60; TEXT-DECORATION: underline } 作者:深山老林
出處:http://wlb.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved