jquery中的事件

標籤：

1.$(document).ready()方法和window.onload方法，有相似的功能，但是在執行時機方面是有區別的，window.onload方法是在網頁中所有的元素（包括所有的關聯檔案）完全載入到瀏覽器後才執行，即JavaScript此時才可以訪問網頁中的元素，而通過jquery中的$(document).ready()方法註冊的處理常式，在dom完全就緒時就可以調用。舉個例子，一個大型的圖庫網站，為網頁中所有圖片添加行為，單擊圖片讓他隱藏或顯示，如果使用window.onload來處理，那麼使用者必須等待每一張圖片載入完畢後，才可以進行操作，如果用jquery中的$(document).ready()來處理，只要dom就緒時就可以操作了，不需要所有圖片載入完畢。

2.多次使用，假設網頁中倆個函數：

function one(){alert("one");}function two(){alert("two");}window.onload=one;window.onload=two;

運行後只會彈出"two",原因是JavaScript中的onload事件一次只能儲存對一個函數的引用，他會自動用後面的函數覆蓋前面的函數。為了達到倆個函數順序觸發的效果，只能建立一個新的JavaScript方法來實現：

window.onload=function(){one();tow();}

這樣確實能解決某些問題，但還是不能滿足某些需求，例如有多個JavaScript檔案，每個檔案都要用到window.onload方法，這種情況用上面提到的方法會非常麻煩，而jquery中的$(document).ready()方法能很好處理類似情況：

function one(){alert("one");}function two(){alert("two");}$(document).ready(function(){one();})$(document).ready(function(){two();})

運行後，先彈"one",後彈"two"。

3.簡寫方式：

$(document).ready(function(){      //編寫代碼     })可以簡寫為：$(function(){     //編寫代碼})也可以簡寫為：$().ready(function(){     //編寫代碼})

第三種方法因為$(document)可以寫為$(),$()不帶參數時，預設參數就是document。

4.1.事件綁定，在文檔裝載完成後，如果打算為元素繫結事件來完成某些操作，可以使用bind方法，格式為bind(type [, data],fn);

type就是事件的類型，常見有

blur(元素失去焦點)、focus(元素得到焦點)、load(元素已載入)、resize(調整瀏覽器視窗大小)、scroll(滾動指定元素)、unload(使用者離開頁面)、click(單擊)、dblclick(雙擊)、mousedown(按下滑鼠)、mouseup(鬆開滑鼠)、mouseover(滑鼠指標位於元素上方)、mouseout(滑鼠指標離開元素)、mouseenter(滑鼠指標穿過元素)、mouseleave(滑鼠指標離開元素)、change(元素的值發生改變)、select(textarea 或文本類型的 input 元素中的文本被選擇)、submit(提交表單)、keydown(按下按鍵)、keypress(keypress 事件與 keydown 事件類別似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。不過，與 keydown 事件不同，每插入一個字元，就會發生 keypress 事件)、keyup(按鈕被鬆開)、error)()。

簡單的例子：

$(".btn").bind(click,function(){       alert("點擊啦~"); })也可以簡寫：$(.btn).click(function(){       alert("點擊啦~");})        

4.2合成事件hover：文法結構是hover(enter,leave);游標移動到元素上時，觸發指定的第一個函數（enter）,游標移出這個元素時，觸發第二個函數（leave）,繼續例子：

$(".btn").hover(function(){      alert("移動到上面了~"); },function(){      alert("離開了~"); })

5.事件冒泡：

<div class="content">        外層元素        <span>內層元素</span></div><div class="msg"></div>以上是結構，下面添加點擊行為；$(document).ready(function(){     $(".content").click(function(){           var txt=$(".msg").html()+"<p>外層元素被單擊</p>";           $(".msg").html(txt);     })     $("span").click(function(){             var txt=$(".msg").html()+"<p>內層元素被單擊</p>";             $(".msg").html(txt);          })     $("body").click(function(){             var txt=$(".msg").html()+"<p>body元素被單擊</p>";             $(".msg").html(txt);          })      })     

當點擊內層元素時，一下輸出三條，而我們原本是想輸出"內層元素被單擊"

引發的問題：事件冒泡可能會引起預料之外的效果，上例中，本來只想觸發span元素的click事件，然而div元素和body元素的click事件也同時被觸發了，因此，有必要對事件的作用範圍作出限制，

停止事件冒泡：stoPropagation();代碼如下：

$("span").click(function(event){       var txt=$(".msg").html()+"<p>內層元素被單擊</p>";       $(".msg").html(txt);       event.stopPropagation();          //停止事件冒泡})   

6.阻止預設行為：網頁中的元素有自己預設的行為，單擊超連結會跳轉，單擊提交按鈕後表單會提交，有時需要阻止表單的預設行為，jquery中用preventDefault()方法，以下例子驗證輸入框文字是否為空白；

$(function(){     $("#btn").click(function(event){         var username=$("#username").val();         if(username==""){            alert("輸入框不可為空值~");              event.preventDefault();           //阻止預設行為——表單提交           }     })})<form>        <input type="text" id="username" /><br>        <input type="submit" id="btn" /> </form>

如果想同時阻止冒泡，和阻止預設行為，可以書寫：return false,一種簡寫方式。

7、事件對象的屬性。

7.1、event.type();擷取到事件的類型。

7.2、event.preventDefault();阻止預設事件行為。

7.3、event.stopPropagation();阻止事件的冒泡。

7.4、event.target();擷取到觸發事件的元素。

7.5、event.relatedTarget();mouseover和mouseout所發生的元素是可以通過event.target()來擷取，相關元素是通過event.relatedTarget();

7.6、event.pageX()和event.pageY()方法，作用是擷取到游標相對於頁面的x座標和y座標。

7.7、event.which();在按一下滑鼠事件中擷取到滑鼠的左中右鍵;1等於滑鼠左鍵，2等於滑鼠中鍵，3等於滑鼠右鍵。

8、移除事件：unbind();例子說明

<script type="text/javascript">$(function(){     $(".btn").click(function(){          $("#text").append("<p>我的綁定函數一</p>");     }).click(function(){               $("#text").append("<p>我的綁定函數二</p>");          }).click(function(){                      $("#text").append("<p>我的綁定函數三</p>");                  });})</script><button class="btn">單擊我</button><div id="text"></div>

單擊後，出現三個p段落，下面新建立一個按鈕，單擊移除單擊事件。

<button id="delAll">移除</button>      //新的移除按鈕$("#delAll").click(function(){     $(".btn").unbind("click");                 //移除單擊事件    })由於此按鈕只有click事件，可以不加參數，$("#delAll").click(function(){     $(".btn").unbind();                          //移除所有事件    })unbind()文法為unbind([type][,data]);   //第一參數是類型，第二個參數時要移除的函數，具體說明如下：1.如果沒有參數，移除所有事件。2.如果提供了事件類型作為參數，則移除該類型的綁定事件。3.如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的處理函數會被移除。

如果我們想刪除同一個元素上綁定的同種類型函數其中一個呢，如下方法解決，為各個函數起一個變數：

<script type="text/javascript">$(function(){     $(".btn").click(myFun1=function(){          $("#text").append("<p>我的綁定函數一</p>");     }).click(myFun2=function(){               $("#text").append("<p>我的綁定函數二</p>");          }).click(myFun3=function(){                      $("#text").append("<p>我的綁定函數三</p>");                  });     $("#delAll").click(function(){           $(".btn").unbind("click",myFun2);    //移除變數為myFun2的     })})</script><button class="btn">單擊我</button><div id="text"></div><button id="delAll">移除事件</button>

one()方法，只觸發一次，隨後立即解除綁定。

$(document).ready(function(){  $("p").one("click",function(){    $(this).animate({fontSize:"+=6px"});  });

9.類比操作：以上的例子是使用者單擊後觸發事件，有時，需要通過類比使用者操作，來達到單擊的效果，例如使用者進入頁面後，就發生單擊事件，而不需要使用者去主動單擊。

$(".btn").trigger("click");       //trigger()方法完成類比操作可以簡寫為：$(".btn").click();

trigger()方法可以觸發自訂事件：

$(".btn").bind("myclick",function(){     $("#test").append("<p>我的自訂事件</p>");})想要觸發這個事件，可以$(".btn").trigger("myclick");

 

jquery中的事件