從上面我們看到了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”, { alert(“test div clicked!”);});

觸發單擊事件:

$(“#testDiv”).click();

等效于

$(“#testDiv”).trigger(“click”);

注意這里等效的是trigger而不是triggerHandler.下面我們來看一下這些常用的事件函數

方法

描述

bind()

向匹配元素附加一個或更多事件處理器

blur()

function(event)觸發、或將函數綁定到指定元素的blur事件

change()

觸發、或將函數綁定到指定元素的change事件

click()

觸發、或將函數綁定到指定元素的click事件

dblclick()

觸發、或將函數綁定到指定元素的doubleclick事件

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()

觸發、或將函數綁定到指定元素的keydown事件

keypress()

觸發、或將函數綁定到指定元素的keypress事件

keyup()

觸發、或將函數綁定到指定元素的keyup事件

live()

觸發、或將函數綁定到指定元素的load事件

load()

觸發、或將函數綁定到指定元素的load事件

mousedown()觸發、或將函數綁定到指定元素的mousedown事件

mouseenter()

觸發、或將函數綁定到指定元素的mouseenter事件

mouseleave()

觸發、或將函數綁定到指定元素的mouseleave事件

mousemove()

觸發、或將函數綁定到指定元素的mousemove事件

mouseout()

觸發、或將函數綁定到指定元素的mouseout事件

mouseover()

觸發、或將函數綁定到指定元素的mouseover事件

mouseup()

觸發、或將函數綁定到指定元素的mouseup事件

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代碼如下:

綁定如下事件:

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函數:

• click me

結果是每點擊一次”clickme“變換一次列表符號和文字顏色.使用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('myindexis'+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(”Currentmouseposition:“+event.pageX+”,“+event.pageY);});

result

上一個事件處理函數返回的值

$(”p“).click(function(event){ return”hey“ });$(”p“).click(function(event){ alert(event.result);});

結果:”hey“

timeStamp

事件發生時的時間戳.varlast;$(”p“).click(function(event){ if(last)alert(”timesincelastevent“+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()

取消可能引起任何語意操作的事件.比如元素的href鏈接加載,表單提交以及click引起復選框的狀態切換.$(”a“).click(function(event){ event.preventDefault();//dosomething });

isDefaultPrevented()

是否調用過

preventDefault()方法

$(”a“).click(function(event){ alert(event.isDefaultPrevented());event.preventDefault();alert(event.isDefaultPrevented());});

stopPropagation()

取消事件冒泡

$(”p“).click(function(event){ event.stopPropagation();//dosomething });

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){ //Thisfunctionwon'tbeexecuted });

isImmediatePropagationStopped()

是否調用過

stopImmediatePropagation()方法

$(”p").click(function(event){ alert(event.isImmediatePropagationStopped());event.stopImmediatePropagation();alert(event.isImmediatePropagationStopped());});

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