jQuery之on/off/one支援的處理程式
jQuery之on/off/one支援的處理程式
定義
在jQuery中，on/off/one的定義如下。
|
方法 |
描述 |
|
on() |
向元素新增事件處理程式 |
|
off（） |
移除通過on（）新增的事件處理程式 |
|
one() |
向被選元素新增一個或多個事件處理程式。該處理程式只能被每個元素觸發一次 |
語法格式如下：
1 $(selector).on(event,childSelector,data,function) 2 $(selector).off(event,childSelector,data,function) 3 $(selector).one(event,childSelector,data,function)
|
引數 |
描述 |
|
event |
必需。規定要從被選元素新增的一個或多個事件或名稱空間。 由空格分隔多個事件值，也可以是陣列。必須是有效的事件。 |
|
childSelector |
可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。 |
|
data |
可選。規定傳遞到函式的額外資料。 |
|
function |
可選。規定當事件發生時執行的函式。 |
這裡的event表示的是事件，那麼他們支援哪些事件呢？在此，我簡單標記一下。
|
方法 |
描述 |
|
blur() |
新增/觸發失去焦點事件 |
|
change() |
新增/觸發change事件 |
|
click() |
新增/觸發click事件 |
|
focus() |
新增/觸發獲取焦點事件 |
|
focusin() |
當元素（或在其內的任意元素）獲得焦點時發生 |
|
focusout（） |
當元素（或在其內的任意元素）獲得失去時發生 |
|
keydown（） |
當鍵盤按下時執行事件 |
|
keypress（） |
當鍵盤按下後執行事件 |
|
keyup（） |
當鍵盤松開時執行事件 |
|
mousedown（） |
滑鼠按下時執行 |
|
mouseenter（） |
滑鼠進入時執行 |
|
mouseleave（） |
滑鼠離開時執行 |
|
mousemove（） |
滑鼠在指定元素移動時執行 |
|
mouseup（） |
滑鼠釋放時執行 |
|
mouseover（） |
當指標位於元素上方時觸發 |
|
mouseout（） |
滑鼠離開被選元素時觸發 |
|
ready（） |
元素載入後執行事件 |
|
resize（） |
對視窗進行調節時執行方法 |
|
scroll（） |
當滾動指定元素時，觸發該方法 |
|
select（） |
當textarea或文字型別的input元素的文字被選擇時觸發 |
|
submit（） |
表單提交時觸發 |
|
contextmenu() |
滑鼠右擊元素時執行 |
注：與keypress事件相關的事件順序：
- keydown – 鍵按下的過程
- keypress – 鍵按下
- keyup -鍵鬆開
注：mouseenter/mouseleaver 和 mouseover/mouseout 的區別和聯絡
- mouseenter/mouseleaver 和 mouseover/mouseout在滑鼠進入或離開被選元素時觸發。
- mouseover當滑鼠進入被選元素或者任意子元素都會觸發，通常與mouseout配套使用。所以，被選元素如果內部包含多個子元素，滑鼠在元素內移動可能會觸發多次。
- mouseenter事件只在滑鼠進入被選元素時觸發，通常與mouseleave配套使用。所以，進入一次備選元素，只會觸發一次。
總結
jQuery支援繫結大部分處理程式。不支援的包括以下處理程式：
- 廢除或棄用的bind()、delegate()、die()、error()、live()、load()、toggle()、unbind()、undelegate()、unload()。
- 用於繫結或移除處理程式的事件bind()、delegate()、die()、live()、load()、off()、on()、one()、unbind()、undelegate()、unload()。
- 引數不一致的事件hover()、trigger()、triggerHandler()。
- 其他：如$.proxy、$.holdReady()。
|
方法 |
描述 |
|
hover() |
滑鼠懸停時，執行方法，等價於mouseenter + mouseleave |
|
$.proxy |
接受一個已有的函式，並返回特定上下文的新函式 |
|
trigger() |
觸發被選定元素指定的事件以及事件的預設行為（例如提交表單） |
|
triggerHandler() |
觸發被選定元素的指定事件 |
|
$.holdReady() |
暫停或恢復ready()事件執行 |
參考網址
- jQuery事件方法：https://www.runoob.com/jquery/jquery-ref-events.html
- jQuery keypress（）方法：https://www.runoob.com/jquery/event-keypress.html