jQuery 事件方法
事件方法觸發器或添加一個函數到被選元素的事件處理程序。
下面的表格列出了所有用於處理事件的 jQuery 方法。
方法 | 描述 |
---|---|
bind() | 向元素添加事件處理程序 bind() 方法向被選元素添加一個或多個事件處理程序,以及當事件發生時運行的函數。 自 jQuery 版本 1.7 起,on() 方法是向被選元素添加事件處理程序的首選方法。 |
blur() | 添加/觸發 blur 事件 |
change() | 添加/觸發 change 事件 當元素的值改變時發生 change 事件(僅適用於表單字段)。 |
click() | 添加/觸發 click 事件 當單擊元素時,發生 click 事件。 |
dblclick() | 添加/觸發 double click 事件 當雙擊元素時,會發生 dblclick 事件。 dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時運行的函數 提示:dblclick 事件也會產生 click 事件。如果這兩個事件都被應用於同一個元素,則會產生問題。 |
delegate() | 向匹配元素的當前或未來的子元素添加處理程序 delegate() 方法爲指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。 使用 delegate() 方法的事件處理程序適用於當前或未來的元素(比如由腳本創建的新元素)。 自 jQuery 版本 1.7 起,on() 方法是向被選元素添加事件處理程序的首選方法。 |
die() | 在版本 1.9 中被移除。移除所有通過 live() 方法添加的事件處理程序 die() 方法在 jQuery 版本 1.7 中被廢棄,在版本 1.9 中被移除。請使用 off() 方法代替。 die() 方法移除通過 live() 方法向被選元素添加的一個或多個事件處理程序。 |
error() | 在版本 1.8 中被廢棄。添加/觸發 error 事件 當元素遇到錯誤時(當元素沒有正確載入時),發生 error 事件。 提示:該方法是 bind('error', handler) 的簡寫方式。 |
event.currentTarget | 在事件冒泡階段內的當前 DOM 元素,通常等於 this。 |
event.data | 包含當前執行的處理程序被綁定時傳遞到事件方法的可選數據 |
event.delegateTarget | 返回當前調用的 jQuery 事件處理程序所添加的元素 該屬性對於由 on() 方法添加的委託事件非常有用,事件處理程序是在元素的祖先被處理時添加的。 提示:如果事件直接綁定到元素且沒有委託發生,則 event.delegateTarget 等同於 event.currentTarget. 可以參考 delegateTarget 和帶委託的 currentTarget 之間的不同 對於直接綁定事件,delegateTarget 和 currentTarget 是相等的 |
event.isDefaultPrevented() | 返回指定的 event 對象上是否調用了 event.preventDefault() |
event.isImmediatePropagationStopped() | 返回指定的 event 對象上是否調用了 event.stopImmediatePropagation() |
event.isPropagationStopped() | 返回指定的 event 對象上是否調用了 event.stopPropagation() |
event.namespace | 返回當事件被觸發時指定的命名空間 該屬性可被插件作者用來根據所使用的命名空間以不同的方式處理任務。 提示:對於 jQuery 而言,以下劃線開始的命名空間會被保留。 |
event.pageX | 返回相對於文檔左邊緣的鼠標位置 提示:該事件屬性通常與 event.pageY 屬性一起使用。 |
event.pageY | 返回相對於文檔上邊緣的鼠標位置 |
event.preventDefault() | 阻止事件的默認行爲 |
event.relatedTarget | 返回當鼠標移動時哪個元素進入或退出 |
event.result | 包含由被指定事件觸發的事件處理程序返回的最後一個值 |
event.stopImmediatePropagation() | 阻止其他事件處理程序被調用 |
event.stopPropagation() | 阻止事件向上冒泡到 DOM 樹,阻止任何父處理程序被事件通知 |
event.target | 返回哪個 DOM 元素觸發事件 這對比較 event.target 和 this 是非常有用的,以便判斷事件是否因事件冒泡被處理。 |
event.timeStamp | 返回從 1970 年 1 月 1 日到事件被觸發時的毫秒數 |
event.type | 返回哪種事件類型被觸發 |
event.which | 返回指定事件上哪個鍵盤鍵或鼠標按鈕被按下 |
focus() | 添加/觸發 focus 事件 當元素獲得焦點時,發生 focus 事件。 當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。 |
focusin() | 添加事件處理程序到 focusin 事件 當元素(或在其內的任意元素)獲得焦點時發生 focusin 事件。 當在元素或在其內的任意元素上發生 focus 事件時,focusin() 方法添加要運行的函數。 與 focus() 方法不同的是,focusin() 方法在任意子元素獲得焦點時也會觸發。 提示:當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。 提示:該方法通常與 focusout() 方法一起使用。 |
focusout() | 添加事件處理程序到 focusout 事件 當元素(或在其內的任意元素)失去焦點時發生 focusout 事件。 當在元素或在其內的任意元素上發生 focusout 事件時,focusout() 方法添加要運行的函數。 與 blur() 方法不同的是,focusout() 方法在任意子元素失去焦點時也會觸發。 提示:該方法通常與 focusin() 方法一起使用。 |
hover() | 添加兩個事件處理程序到 hover 事件 hover()方法用於模擬光標懸停事件。 當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter); 當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。 |
keydown() | 添加/觸發 keydown 事件 在鍵盤上按下某鍵時發生,一直按着則會不斷觸發(opera瀏覽器除外),它返回的是鍵盤代碼 |
keypress() | 添加/觸發 keypress 事件 在鍵盤上按下一個按鍵,併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符,所以監聽無效,換句話說,只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。 |
keyup() | 添加/觸發 keyup 事件 用戶鬆開某一個按鍵時觸發,與keydown相對,返回鍵盤代碼. |
live() | 在版本 1.9 中被移除。添加一個或多個事件處理程序到當前或未來的被選元素 live() 方法在 jQuery 版本 1.7 中被廢棄,在版本 1.9 中被移除。請使用 on() 方法代替。 live() 方法爲被選元素添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。 通過 live() 方法添加的事件處理程序適用於匹配選擇器的當前及未來的元素(比如由腳本創建的新元素)。 提示:如需移除事件處理程序,請使用 die() 方法。 |
load() | 在版本 1.8 中被廢棄。添加一個事件處理程序到 load 事件
load() 方法添加事件處理程序到 load 事件。 當指定的元素已加載時,會發生 load 事件。 該事件適用於任何帶有 URL 的元素(比如圖像、腳本、框架、內聯框架)以及 window 對象。 根據不同的瀏覽器(Firefox 和 IE),如果圖像已被緩存,則也許不會觸發 load 事件。 注意:還存在一個名爲 load() 的 jQuery AJAX 方法。根據不同的參數決定調用哪個方法。 |
mousedown() | 添加/觸發 mousedown 事件 當鼠標指針移動到元素上方,並按下鼠標按鍵時,會發生 mousedown 事件。 提示:該方法通常與 mouseup() 方法一起使用。 |
mouseenter() | 添加/觸發 mouseenter 事件 當鼠標指針穿過元素時,會發生 mouseenter 事件。 |
mouseleave() | 添加/觸發 mouseleave 事件 當鼠標指針離開元素時,會發生 mouseleave 事件。 |
mousemove() | 添加/觸發 mousemove 事件 當鼠標指針在指定的元素中移動時,就會發生 mousemove 事件。 注意:用戶把鼠標移動一個像素,就會發生一次 mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。 |
mouseout() | 添加/觸發 mouseout 事件 當鼠標指針離開被選元素時,會發生 mouseout 事件。 注意:與 mouseleave 事件不同,mouseout 事件在鼠標指針離開被選元素或任意子元素時都會被觸發,mouseleave 事件只有在鼠標指針離開被選元素時被觸發。 提示:該事件通常與 mouseover 事件一起使用。 可以參考實例 mouseout() 與 mouseleave() 之間的不同 演示 mouseout() 與 mouseleave() 之間的不同。 |
mouseover() | 添加/觸發 mouseover 事件 當鼠標指針位於元素上方時,會發生 mouseover 事件。 注意:與 mouseenter 事件不同,mouseover 事件在鼠標指針進入被選元素或任意子元素時都會被觸發,mouseenter 事件只有在鼠標指針進入被選元素時被觸發。 提示:該事件通常與 mouseout 事件一起使用。 可以參考實例 mouseover() 與 mouseenter() 之間的不同 |
mouseup() | 添加/觸發 mouseup 事件 當在元素上鬆開鼠標按鈕時,會發生 mouseup 事件。 提示:該方法通常與 mousedown() 方法一起使用。 |
off() | 移除通過 on() 方法添加的事件處理程序 |
on() | 向元素添加事件處理程序 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利,我們推薦使用該方法,它簡化了 jQuery 代碼庫。 注意:使用 on() 方法添加的事件處理程序適用於當前及未來的元素(比如由腳本創建的新元素)。 提示:如需移除事件處理程序,請使用 off() 方法。 提示:如需添加只運行一次的事件然後移除,請使用 one() 方法。 |
one() | 向被選元素添加一個或多個事件處理程序。該處理程序只能被每個元素觸發一次 |
$.proxy() | 接受一個已有的函數,並返回一個帶特定上下文的新的函數 該方法通常用於向上下文指向不同對象的元素添加事件。 提示:如果您綁定從 $.proxy 返回的函數,jQuery 仍然可以通過傳遞的原先的函數取消綁定正確的函數。 |
ready() | 規定當 DOM 完全加載時要執行的函數 |
resize() | 添加/觸發 resize 事件 當調整瀏覽器窗口大小時,發生 resize 事件。 |
scroll() | 添加/觸發 scroll 事件 當用戶滾動指定的元素時,會發生 scroll 事件。 scroll 事件適用於所有可滾動的元素和 window 對象(瀏覽器窗口)。 |
select() | 添加/觸發 select 事件 當 textarea 或文本類型的 input 元素中的文本被選擇(標記)時,會發生 select 事件。 |
submit() | 添加/觸發 submit 事件 當提交表單時,會發生 submit 事件。 該事件只適用於 <form> 元素。 如何使用 event.preventDefault() 方法阻止表單被提交。參考以下實例: |
toggle() | 在版本 1.9 中被移除。添加 click 事件之間要切換的兩個或多個函數
當在元素上點擊時調用第一個指定函數,當再次點擊時調用第二個函數,以此類推。 注意:還存在一個名爲 toggle() 的 jQuery 效果方法。根據不同的參數決定調用哪個方法。 |
trigger() | 觸發綁定到被選元素的所有事件 trigger() 方法觸發被選元素上指定的事件以及事件的默認行爲(比如表單提交)。 該方法與 triggerHandler() 方法類似,不同的是 triggerHandler() 不觸發事件的默認行爲。 |
triggerHandler() | 觸發綁定到被選元素的指定事件上的所有函數 triggerHandler() 方法觸發被選元素上指定的事件。 該方法與 trigger() 方法類似,不同的是 trigger() 也觸發事件的默認行爲(比如表單提交)。 |
unbind() | 從被選元素上移除添加的事件處理程序 該方法能夠移除所有的或被選的事件處理程序,或者當事件發生時終止指定函數的運行。 該方法也可以通過 event 對象取消綁定的事件處理程序。該方法也用於對自身內部的事件取消綁定(比如當事件已被觸發一定次數之後,刪除事件處理程序)。 注意:如果未規定參數,則 unbind() 方法會刪除指定元素的所有事件處理程序。 注意:unbind() 方法適用於任意由 jQuery 添加的事件處理程序。 |
undelegate() | 從現在或未來的被選元素上移除事件處理程序 undelegate() 方法移除一個或多個由 delegate() 方法添加的事件處理程序。 |
unload() | 在版本 1.8 中被廢棄。添加事件處理程序到 unload 事件
當用戶離開頁面時,會發生 unload 事件。 當發生以下情況下,會觸發 unload 事件:
unload() 方法規定當 unload 事件發生時會發生什麼。 unload() 方法只應用於 window 對象。 注意:unload 事件在不同瀏覽器中效果不一樣,請確保使用前在所有瀏覽器測試該方法。 |
常見 DOM 事件:
鼠標事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |