$(selector).on( events [, selector ] [, data ] , handler );

// 單個事件
$(".box").on("click", function(){});

// 多個事件（空格分隔）
$(".box").on("click mouseover", function(){});

// 事件 + 命名空間（click.my）
$(".box").on("click.my", function(){});

<div id="parent">
  <!-- 靜態(tài)/動態(tài) button 都能觸發(fā) -->
</div>

// 父元素 #parent 綁定，委托給子元素 button
$("#parent").on("click", "button", function(){
  console.log("按鈕被點(diǎn)擊");
});

// 后續(xù)動態(tài)創(chuàng)建的按鈕依然有效
$("#parent").append("<button>動態(tài)按鈕</button>");

.on(events, selector, data, handler)
// 無委托時：.on(events, data, handler)

// 傳對象參數(shù)
let msg = { name: "測試", id: 1001 };

$(".btn").on("click", msg, function(e){
  console.log(e.data.name);  // 測試
  console.log(e.data.id);    // 1001
});

$(".btn").on("click", function(e){
  console.log(e.type); // 事件類型：click
  $(this).css("color","red"); // 當(dāng)前點(diǎn)擊元素變色
});

// 語法：on( events, handler )
$(".btn").on("click", function(){});

// 語法：on( events, data, handler )
$(".btn").on("click", {tip:"提示"}, function(e){});

// 語法：on( events, selector, handler )
$("#parent").on("click", ".child", function(){});

// 語法：on( events, selector, data, handler )
$("#parent").on("click", ".child", {id:1}, function(e){});

// 綁定命名空間 click.a
$(".btn").on("click.a", function(){ alert("A事件"); });
$(".btn").on("click.b", function(){ alert("B事件"); });

// 只解綁 click.a，click.b 保留
$(".btn").off("click.a");

// 綁定自定義事件 myEvent
$(".box").on("myEvent", function(){
  alert("自定義事件觸發(fā)");
});

// 手動觸發(fā)
$(".box").trigger("myEvent");

$(".btn").one("click", function(){
  alert("只彈一次");
});

$(".btn").off();

// 解綁所有 click 事件
$(".btn").off("click");

// 解綁父元素上委托給 .child 的 click
$("#parent").off("click", ".child");

$(".btn").off("click.a");