第四章 jQuery中的事件和動畫

一、jQuery中的事件

• 加載DOM

在JS中等待頁面加載完成通常使用window.onload方法，而在jQuery中則使用$(document).ready()方法來替代傳統的window.onload方法。這兩者有很大的不同：

1. 執行時機

window.onload方法是在網頁所有的元素（包括元素關聯的文件）完全加載到瀏覽器后才能執行。而Query中的$(document).ready()方法，在DOM載入就緒就可以對其操縱并調用它綁定的函數，此時網頁中的所有元素可能并沒有下載完畢。

有時我們需要的圖片沒有加載完畢，我們需要的圖片寬高可能不一定有效。這種情況可以使用jQuery的load()方法。load()方法會在元素的onload中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容加載完畢后觸發。如果處理函數綁定在元素上，則會在元素內容加載完畢后觸發。

$(window).load(function({}))等價于js的window.onload=function(){}

2. 多次使用

window.onload方法只能使用一次，否則后面的window.onload會覆蓋前面的。這點在引入多個·js時尤其困擾，但是jQuery中的$(document).ready()方法每次調用都會在現有的行為上追加新的行為，并按照注冊順序依次執行。

3.簡寫方式

$(document).ready()方法可以簡寫為$(function(){})或者$().ready()，這點在jQuery源碼中已經進行過處理，他們的功能是一樣的。

• 事件綁定

使用bind()方法給匹配元素進行特定事件的綁定。

格式為bind(type [.data] fn);

第一個參數是事件類型，包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouSEOver、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyPRess、keyup、error等。也可以自定義名稱。

第二個參數為可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象。

第三個參數是用來綁定事件的處理函數。

 1 $(function () { 2     $(".head").bind("click",function(){  //給.head元素添加一個點擊事件 3         var $content=$(this).next();     //定義一個局部變量保存$(this).next 4         if($content.is(":visible")){        //實現點擊顯示再點擊隱藏的切換 5             $content.hide(); 6         }else{ 7             $content.show(); 8         } 9     })10 });

像blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、 mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、 keydown、keypress、keyup、error等常用事件jQuery提供了簡寫，eg: $(".head").mouseover(function(){}).mouseout(function(){});

PS: bind()方法的其他用法

1. 綁定多個事件類型

1 $(function(){2     $("div").bind("mouseover mouseout",function(){3         $(this).toggleClass("over");4     });5 });

2.添加事件命名空間便于管理

 1 $(function(){ 2     $("div").bind("mouseover.plugin",function(){ 3         $("body").append("<p>mouseover事件</p>"); 4     }); 5     $("div").bind("click.plugin",function(){ 6         $("body").append("<p>click事件</p>"); 7     }); 8     $("div").click(function(){ 9         $("div").unbind(".plugin");10     });11 });

3.相同事件名稱，不同命名空間執行方法

 1 $(function(){ 2     $("div").bind("click",function(){ 3         $("body").append("<p>click事件</p>"); 4     }); 5     $("div").bind("click.plugin",function(){ 6         $("body").append("<p>click.plugin事件</p>"); 7     }); 8     $("button").click(function(){ 9         $("div").trigger(".click!");    //!作用是匹配所有不包含在命名空間中的click方法10     });11 });

• 合成事件

1. hover()

hover()方法用于模擬光標懸停效果，鼠標移上觸發第一個函數，鼠標移除觸發第二個函數。用來替代jQuery中的bind("mouseenter")和bind("mouseleave")。

格式： hover(enter,leave);

以上代碼通過hover()事件就可以簡寫為：

1 $(function () {2     $(".head").hover(function(){3         $(this).next().show();4     },function(){5         $(this).next().hide();6     });7 });

PS:hover()方法必須傳入2個function，即時有一個操作函數沒有也要寫上。

2. toggle()

toggle()方法用于模擬鼠標的連續單擊事件。第一次單擊觸發第一個函數，第二次單擊觸發第二個函數。如果有更多函數則依次觸發，然后每次單擊都重復對這幾個函數的輪番調用。

PS：toggle()方法還可以實現切換元素的可見狀態。

1 $(function () {2     $(".head").toggle(function(){3          $(this).next().toggle();4      },function(){5          $(this).next().toggle();6      });7  });

• 事件冒泡與事件捕獲

當頁面元素觸發事件的時候，該元素的容器以及頁面都會按照特定順序響應該元素的觸發事件，事件的傳播順序就叫事件的流程。事件流分為冒泡型和捕獲型。冒泡型事件流所有瀏覽器都支持，它是從明確的事件源到不明確的事件源依次向上觸發。由于事件流的存在，我們有必要對時間的作用范圍進行限制。捕獲型事件流不是所有主流瀏覽器都支持，它是從不明確的事件源到明確的事件源依次向下觸發，這種缺陷無法通過JS解決，因此jQuery不支持事件捕獲。

1. 事件對象

jQuery事件對象創建只需要為函數添加一個參數即可。創建的事件對象只有事件處理函數才能訪問到。事件執行完畢后，事件對象就被銷毀。

1 $("element").bind("click",function(e){    //e：事件對象2       //...3 });

2.停止事件冒泡

使用stopPropagation()方法停止事件冒泡。

1 $("span").bind("click",function(e){                     //e是事件對象2     var txt=$("#msg").html()+"<p>內層span元素被單擊</p>";3     $("#msg").html(txt);4     e.stopPropagation();                                  //停止事件冒泡5 });

3.阻止默認行為

通過preventDefault()阻止元素的默認行為。

1 $("input").bind("click",function(e){                     //e是事件對象2     var txt=$("#msg").html()+"<p>內層span元素被單擊</p>";3     $("#msg").html(txt);4     e.preventDefault();                                  //阻止事件默認行為5 });

如果想同時對事件對象停止冒泡和默認行為，可以在事件處理函數中返回false。這是對在事件對象上同時調用stopPrapagation()方法和preventDefault()方法的簡寫方式。e.preventDefault()可以改為return false;

• 事件對象屬性

1. e.type  獲取事件的類型。
2. e.preventDefault()方法   阻止瀏覽器默認行為。
3. e.stopPropagation()方法  阻止事件的冒泡。
4. e.target  獲取觸發事件的元素。
5. e.relatedTarget  獲取相關元素。
6. e.pageX和pageY  獲取光標相對于頁面的x坐標和y坐標。
7. e.which  單擊事件中獲取鼠標的左、中、右鍵；鍵盤事件獲取鍵盤的按鍵。
8. e.metaKey 鍵盤事件中獲取ctrl鍵。

• 移除事件

通過unbind()方法移除事件。

unbind([type],[data]);

第一個參數是事件類型，第二個參數是將要移除的函數。如果沒有參數，則刪除所有綁定的事件。如果提供了事件類型作為參數，則只刪除該類型的綁定事件。如果把綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。

1 $("p").click(function(){2      $("#btn").unbind();3 });

只需要觸發一次隨后就立即刪除綁定的情況，可以使用one()方法。one()方法可以為元素綁定處理函數。當處理函數觸發一次后，立即被刪除。

• 模擬操作

1. 常用模擬

使用trigger()方法完成模擬操作。 eg:   $("#btn").trigger("click"); 也可以簡寫為$("#btn").click();

2. 觸發自定義事件

1 $(function(){2     $("div").bind("myclick",function(){3         $("body").append("<p>我的自定義事件</p>");4     });5     $("div").trigger("myclick");6 });

3. 傳遞數據

trigger(type,[data])方法有兩個參數，第一個參數是觸發的事件類型，第二次參數是要傳遞給事件處理函數的附加數據，以數組形式傳遞。

4. 執行默認操作

trigger()方法觸發事件后，會執行瀏覽器默認操作。如果只想觸發綁定事件，而不想執行瀏覽器默認操作，使用triggerHandler()方法。

二、jQuery中的動畫

• 動畫類型

•  停止動畫

如果需要在某處停止動畫，需要使用stop()方法。

stop([clearQueue],[gotoEnd]);

clearQueue和gotoEnd都是可選參數，為Boolean值。clearQueue是是否要清空未執行完的動畫隊列，gotoEnd是是否直接將正在執行的動畫跳轉至末狀態。

• 判斷元素是否處于動畫狀態

為避免動畫累積造成的動畫與用戶行為不一致，首先判斷元素是否處于動畫狀態，如果元素不處于動畫狀態，才為元素添加新的動畫，否則不添加。

1 if($(element).is(":animated")){   //判斷元素是否處于動畫狀態2           //如果沒有進行動畫，則添加新的動畫3 }

• 延遲動畫

使用delay()方法對動畫進行延遲操作。delay()方法既可以推遲動畫隊列中函數的執行，也可以用于自定義隊列。

$(this).animate({left:"400px"},3000)          .delay(1000);

• 動畫隊列

當一個animate()方法中應用多個屬性時，動畫是同時發生的。當鏈式的寫法應0用動畫方法時，動畫是按順序發生的（除非queue選項值為false）。