jQuery中.on()参数的实现示例

$(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">
  <!-- 静态/动态 button 都能触发 -->
</div>

// 父元素 #parent 绑定，委托给子元素 button
$("#parent").on("click", "button", function(){
  console.log("按钮被点击");
});

// 后续动态创建的按钮依然有效
$("#parent").append("<button>动态按钮</button>");

.on(events, selector, data, handler)
// 无委托时：.on(events, data, handler)

// 传对象参数
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"); // 当前点击元素变色
});

// 语法：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("自定义事件触发");
});

// 手动触发
$(".box").trigger("myEvent");

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

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

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

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

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