jQuery 的事件方法 .on()

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}`)
});

1. 參數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():停止事件冒泡到祖先節點。

三、注意事項
以防止事件被多次綁定造成同一事件觸發多次，可在.on 前加上.unbind(),例如：

$("ul").unbind().on("click","li",function()
{
  alert("click event.");
 }
);