jQuery 事件

目錄

什麼是事件

頁面對不一樣訪問者的響應叫作事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

常見 DOM 事件：

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

 

事件綁定

文檔裝載完成後，若是打算爲元素綁定事件來完成某些操做，則能夠使用on()方法來對被選元素及子元素上添加一個或多個事件處理程序。

注意：自 jQuery 版本  1.7 起，on() 方法是  bind()、 live() 和  delegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

提示：如需移除事件處理程序，請使用Off()方法。

提示：如需添加只運行一次的事件而後移除，請使用one()方法。

語法

$(selector).on(event,childSelector,data,function,map)

 

參數	描述
event	必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件。
childSelector	可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器自己，好比已廢棄的 delegate() 方法）。
data	可選。規定傳遞到函數的額外數據。
function	可選。規定當事件發生時運行的函數。
map	規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

範例代碼

 View Code

 

移除事件

off() 方法一般用於移除經過 on() 方法添加的事件處理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

注意：如需移除指定的事件處理程序，當事件處理程序被添加時，選擇器字符串必須匹配 on() 方法傳遞的參數。

提示：如需添加只運行一次的事件而後移除，請使用 one() 方法。

$(selector).off(event,selector,function(eventObj),map)

 

事件對象的屬性和方法

 

方法	描述
event.currentTarget	在事件冒泡階段內的當前 DOM 元素
event.data	包含當前執行的處理程序被綁定時傳遞到事件方法的可選數據
event.delegateTarget	返回當前調用的 jQuery 事件處理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 對象上是否調用了   event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 對象上是否調用了   event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 對象上是否調用了   event.stopPropagation()
event.namespace	返回當事件被觸發時指定的命名空間
event.pageX	返回相對於文檔左邊緣的鼠標位置
event.pageY	返回相對於文檔上邊緣的鼠標位置
event.preventDefault()	阻止事件的默認行爲
event.relatedTarget	返回當鼠標移動時哪一個元素進入或退出
event.result	包含由被指定事件觸發的事件處理程序返回的最後一個值
event.stopImmediatePropagation()	阻止其餘事件處理程序被調用
event.stopPropagation()	阻止事件向上冒泡到 DOM 樹，阻止任何父處理程序被事件通知
event.target	返回哪一個 DOM 元素觸發事件
event.timeStamp	返回從 1970 年 1 月 1 日到事件被觸發時的毫秒數
event.type	返回哪一種事件類型被觸發
event.which	返回指定事件上哪一個鍵盤鍵或鼠標按鈕被按下

 

經常使用jQuery事件的範例代碼

View Code

 

做者：靜默虛空歡迎任何形式的轉載，但請務必註明出處。限於本人水平，若是文章和代碼有表述不當之處，還請不吝賜教。