jquery中事件詳解

由於jquery本身就是web客戶端的有力幫手，所以事件對於它來說就顯得尤爲重要了，事件是腳本編程的靈魂. 所以此內容也是jQuery學習的重點。

       在傳統的javascript中，註冊一個事件也是非常簡單的事情，下面我們具體看一下一個簡單的示例：

document.getElementById("testDiv2").onclick = showMsg;

等效於:

<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>

注意兩者的區別了嗎? 我們常用的修改元素屬性添加事件的方式, 實際上是建立了一個匿名函數:

document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};

這個匿名函數的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.

這種方式的弊端是:

1. 只能爲一個事件綁定一個事件處理函數. 使用"="賦值會把前面爲此時間綁定的所有事件處理函數沖掉.

2. 在事件函數(無論是匿名函數還是綁定的函數)中獲取事件對象的方式在不同瀏覽器中要特殊處理:

3. 添加多播委託的函數在不同瀏覽器中是不一樣的.

      所以我們首先應該摒棄<div οnclick="..."></div>這種通過修改元素屬性添加事件的方式. 儘量使用添加多播事件委託的方式爲一個事件綁定多個事件處理函數, 比如爲document對象的單擊事件添加一個關閉彈出層的方法, 使用多播就不會影響document對象原有的事件處理函數.

Jquery事件：

從上面我們看到了javascript中註冊事件的弊端了，這些弊端真正避免起來也挺麻煩的，所以jquery想到了這一點，他幾乎把javascript中的事件弊端解決到了極點，我們可以很簡單的實現我們在javascript中很麻煩才能實現的功能。正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:

$("#testDiv").bind("click", showMsg);

我們爲id是testDiv4的元素, 添加列click事件的事件處理函數showMsg.

使用jQuery事件處理函數的好處:

1. 添加的是多播事件委託. 也就是爲click事件又添加了一個方法, 不會覆蓋對象的click事件原有的事件處理函數.

           

$("#testDiv").bind("click", function(event) { alert("one"); });
           $("#testDiv").bind("click", function(event) { alert("two"); });

單擊testDiv對象時, 依次提示"one"和"two".

2. 統一了事件名稱.
添加多播事件委託時, ie中是事件名稱前面有"on". 但是使用bind()函數我們不用區分ie和dom , 因爲內部jQuery已經幫我們統一了事件的名稱.

3. 可以將對象行爲全部用腳本控制.
讓HTML代碼部分只注意"顯示"邏輯. 現在的趨勢是將HTML的行爲, 內容與樣式切分乾淨. 其中用腳本控制元素行爲, 用HTML標籤控制元素內容, 用CSS控制元素樣式. 使用jQuery事件處理函數可以避免在HTML標籤上直接添加事件.

Jquery常用事件函數：

雖然我們可以使用事件處理函數完成對象事件的幾乎所有操作, 但是jQuery提供了對常用事件的封裝. 比如單擊事件對應的兩個方法click()和click(fn)分別用來觸發單擊事件和設置單擊事件.

設置單擊事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效於:

$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

觸發單擊事件:

$("#testDiv").click();

等效於

$("#testDiv").trigger("click");

注意這裏等效的是trigger而不是triggerHandler.

下面我們來看一下這些常用的事件函數

方法	描述
bind()	向匹配元素附加一個或更多事件處理器
blur()	觸發、或將函數綁定到指定元素的 blur 事件
change()	觸發、或將函數綁定到指定元素的 change 事件
click()	觸發、或將函數綁定到指定元素的 click 事件
dblclick()	觸發、或將函數綁定到指定元素的 double click 事件
delegate()	向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die()	移除所有通過 live() 函數添加的事件處理程序。
error()	觸發、或將函數綁定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 對象上是否調用了 event.preventDefault()。
event.pageX	相對於文檔左邊緣的鼠標位置。
event.pageY	相對於文檔上邊緣的鼠標位置。
event.preventDefault()	阻止事件的默認動作。
event.result	包含由被指定事件觸發的事件處理器返回的最後一個值。
event.target	觸發事件的 DOM 元素。
event.timeStamp	該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type	描述事件的類型。
event.which	指示按了哪個鍵或按鈕。
focus()	觸發、或將函數綁定到指定元素的 focus 事件
keydown()	觸發、或將函數綁定到指定元素的 key down 事件
keypress()	觸發、或將函數綁定到指定元素的 key press 事件
keyup()	觸發、或將函數綁定到指定元素的 key up 事件
live()	觸發、或將函數綁定到指定元素的 load 事件
load()	觸發、或將函數綁定到指定元素的 load 事件
mousedown()	觸發、或將函數綁定到指定元素的 mouse down 事件
mouseenter()	觸發、或將函數綁定到指定元素的 mouse enter 事件
mouseleave()	觸發、或將函數綁定到指定元素的 mouse leave 事件
mousemove()	觸發、或將函數綁定到指定元素的 mouse move 事件
mouseout()	觸發、或將函數綁定到指定元素的 mouse out 事件
mouseover()	觸發、或將函數綁定到指定元素的 mouse over 事件
mouseup()	觸發、或將函數綁定到指定元素的 mouse up 事件
one()	向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready()	文檔就緒事件（當 HTML 文檔就緒可用時）
resize()	觸發、或將函數綁定到指定元素的 resize 事件
scroll()	觸發、或將函數綁定到指定元素的 scroll 事件
select()	觸發、或將函數綁定到指定元素的 select 事件
submit()	觸發、或將函數綁定到指定元素的 submit 事件
toggle()	綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一個被匹配元素的指定事件
unbind()	從匹配元素移除一個被添加的事件處理器
undelegate()	從匹配元素移除一個被添加的事件處理器，現在或將來
unload()	觸發、或將函數綁定到指定元素的 unload 事件

交互幫助方法：

除了基本的實踐, jQuery提供了兩個和事件相關的幫助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )

hover函數主要解決在原始javascript中mouseover和mouseout函數存在的問題, 看下面這個示例:

有兩個div(紅色區域), 裏面分別嵌套了一個div(黃色區域). HTML代碼如下:

    

<div class="outer" id="outer1">
      Outer 1
      <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
      Outer 2
      <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>

綁定如下事件:

   

<script type="text/javascript">
     function report(event) {
       $('#console').append('<div>'+event.type+'</div>');
     }
     $(function(){
       $('#outer1')
        .bind('mouseover',report)
        .bind('mouseout',report);
       $('#outer2').hover(report,report);
     });
   </script>

Outer1我們使用了mouseover和mouseout事件, 當鼠標從Outer1的紅色區域移動到黃色區域時, 會發現雖然都是在outer1的內部移動, 但是卻觸發了mouseout事件:

很多時候我們不希望出現上圖的結果, 而是希望只有鼠標在Outer1內部移動時不觸發事件, Outer2使用Hover()函數實現了這個效果:

注意這裏的事件名稱進入叫做"mouseenter", 離開叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.

有經驗的開發人員會立刻想到在製作彈出菜單時, 經常遇到這個問題: 爲彈出菜單設置了mouseout事件自動關閉, 但是鼠標在彈出菜單內移動時常常莫名其妙觸發mouseout事件讓菜單關閉. hover()函數幫助我們很好的解決了這個問題.

2. toggle( fn, fn2, fn3,fn4,... )

toggle函數可以爲對象添加click事件綁定函數, 但是設置每次點擊後依次的調用函數。

如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數，如果有更多函數，則再次觸發，直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。

可以使用unbind("click")來刪除。

下面的示例演示如何使用toggle函數:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>toggle example</title>
    <link rel="stylesheet" type="text/css" href="css/hover.css">
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("li").toggle(
              function()
              {
                  $(this).css({ "list-style-type": "disc", "color": "blue" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "square", "color": "red" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "none", "color": "" });
              }
            );
        })
    </script>
</head>
<body>
    <ul>
        <li style="cursor:pointer">click me</li>
    </ul>
</body>
</html>

結果是每點擊一次"click me"變換一次列表符號和文字顏色.

使用jQuery事件對象

使用事件自然少不了事件對象. 因爲不同瀏覽器之間事件對象的獲取, 以及事件對象的屬性都有差異, 導致我們很難跨瀏覽器使用事件對象.

jQuery中統一了事件對象, 當綁定事件處理函數時, 會將jQuery格式化後的事件對象作爲唯一參數傳入:

$("#testDiv").bind("click", function(event) {  });

關於event對象的詳細說明, 可以參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event

jQuery事件對象將不同瀏覽器的差異進行了合併, 比如可以在所有瀏覽器中通過 event.target 屬性來獲取事件的觸發者(在IE中使用原生的事件對象, 需要訪問event.srcElement).

下面是jQuery事件對象可以在擴瀏覽器支持的屬性:

屬性名稱	描述	舉例
type	事件類型.如果使用一個事件處理函數來處理多個事件, 可以使用此屬性獲得事件類型,比如click.	$("a").click(function(event) {   alert(event.type); });
target	獲取事件觸發者DOM對象	$("a[href=http://google.com]").click(function(event) {   alert(event.target.href); });
data	事件調用時傳入額外參數.	$("a").each(function(i) {   $(this).bind('click', {index:i}, function(e){      alert('my index is ' + e.data.index);   }); });
relatedTarget	對於鼠標事件, 標示觸發事件時離開或者進入的DOM元素	$("a").mouseout(function(event) {   alert(event.relatedTarget); });
currentTarget	冒泡前的當前觸發事件的DOM對象, 等同於this.	$("p").click(function(event) {   alert( event.currentTarget.nodeName ); }); 結果:P
pageX/Y	鼠標事件中, 事件相對於頁面原點的水平/垂直座標.	$("a").click(function(event) {   alert("Current mouse position: " + event.pageX + ", " + event.pageY ); });
result	上一個事件處理函數返回的值	$("p").click(function(event) {   return "hey" }); $("p").click(function(event) {   alert( event.result ); }); 結果:"hey"
timeStamp	事件發生時的時間戳.	var last; $("p").click(function(event) {    if( last )       alert( "time since last event " + event.timeStamp - last );    last = event.timeStamp; });

上面是jQuery官方文檔中提供的event對象的屬性. 在"jQuery實戰"一書中還提供了下面的多瀏覽器支持的屬性, 時間關係我沒有嘗試每一個屬性, 大家可以幫忙驗證是否在所有瀏覽器下可用:

屬性名稱	描述	舉例
altKey	Alt鍵是否被按下. 按下返回true
ctrlKey	ctrl鍵是否被按下, 按下返回true
metaKey	Meta鍵是否被按下, 按下返回true. meta鍵就是PC機器的Ctrl鍵,或者Mac機器上面的Command鍵
shiftKey	Shift鍵是否被按下, 按下返回true
keyCode	對於keyup和keydown事件返回被按下的鍵. 不區分大小寫, a和A都返回65. 對於keypress事件請使用which屬性, 因爲which屬性跨瀏覽時依然可靠.
which	對於鍵盤事件, 返回觸發事件的鍵的數字編碼. 對於鼠標事件, 返回鼠標按鍵號(1左,2中,3右).
screenX/Y	對於鼠標事件, 獲取事件相對於屏幕原點的水平/垂直座標

事件對象除了擁有屬性, 還擁有事件. 有一些是一定會用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件對象的函數列表:

名稱	說明	舉例
preventDefault()	取消可能引起任何語意操作的事件. 比如<a>元素的href鏈接加載, 表單提交以及click引起復選框的狀態切換.	$("a").click(function(event){   event.preventDefault();   // do something });
isDefaultPrevented()	是否調用過  preventDefault() 方法	$("a").click(function(event){   alert( event.isDefaultPrevented() );   event.preventDefault();   alert( event.isDefaultPrevented() ); });
stopPropagation()	取消事件冒泡	$("p").click(function(event){   event.stopPropagation();   // do something });
isPropagationStopped()	是否調用過  stopPropagation() 方法	$("p").click(function(event){   alert( event.isPropagationStopped() );   event.stopPropagation();   alert( event.isPropagationStopped() ); });
stopImmediatePropagation()	取消執行其他的事件處理函數並取消事件冒泡. 如果同一個事件綁定了多個事件處理函數, 在其中一個事件處理函數中調用此方法後將不會繼續調用其他的事件處理函數.	$("p").click(function(event){   event.stopImmediatePropagation(); }); $("p").click(function(event){   // This function won't be executed });
isImmediatePropagationStopped()	是否調用過  stopImmediatePropagation() 方法	$("p").click(function(event){   alert( event.isImmediatePropagationStopped() );   event.stopImmediatePropagation();   alert( event.isImmediatePropagationStopped() ); });

這些函數中 stopPropagation() 是我們最長用的也是一定會用到的函數. 相當於操作原始event對象的event.cancelBubble=true來取消冒泡.