jQuery .on()是常用的方法,它類似于JavaScript 的addEventListener方法,可以監聽處理所有的事件。
一. 使用方法
步驟1:使用選擇器建立 jQuery 選取集合;
步驟2:使用on()指定事件名稱和處理函數。
例如:$(“li”).on(“click”,function(){
$(this).addClass(“completed”);
});
二.例子
.on(events[,seletor][,data],function(e){…})
例子:
$(“ul”).on(“click mouseover”,”:not(#four)”,{status:”import”},function(e) {
let listItem = “Item:” + e.target.textContent ;
Let itemStatus = “Status:” + e.data.status;
Let eventType = “Event:” + e.type;
Console.log(`${listItem}${itemStatus}${eventType}`)
});
- 參數event : 事件名稱, 例如:
輸入控件:click,focus,blur,change,
鍵盤:inpt,keydown,keyup,keypress
鼠標:click,dbclick,mouseup,mousedown,mouseover,mousemove,mouseout,hover
表單:submit,selecdt,change
Document: ready,load,unload
window: error,raize,scroll
如果同時為多個事件,用空格符隔開
.on(“mouseover click”,function(){…})
2. 選擇器集合的再次篩選條件: 例如 “:not(#four)”
3. data數據 : 例如 {name:“Jacky”} , 用 e.data 獲取
4. e 事件對象
有以下屬性:
e.type : 事件類型(例如:click …)
e.which:被接下的是鼠標按鈕還是鍵盤按鈕
e.data : data 參數的數據
e.target : 引發事件的DOM元件。
e.timestamp: 事件觸發的時間
方法:
e.preventDefault() : 取取預設的行為(例如送出表單,到鏈接目標)
e.stopPropagation():停止事件冒泡到祖先節點。