如果你翻过一些老旧的 jQuery 代码，可能会看到 bind()、live()、delegate() 这些方法，它们都曾经承担着绑定事件的职责。但从 jQuery 1.7 版本开始，官方推出了 on() 方法，把前面这些方法的功能全部整合了进来，成为事件绑定的推荐统一入口。用 on() 来写事件相关代码，库的整体体积更小，逻辑也更清晰。想要移除通过 on() 绑定的事件，对应的用 off() 方法即可。
完整语法结构
on() 方法的完整形式如下：
$(selector).on(event, childSelector, data, function, map)
这五个参数里只有 event 是必填项，其余都是可选的。event 用来指定一个或多个事件类型，如果要同时绑定多个事件，用空格隔开就行，比如 "click mouseover"。childSelector 是事件委托的关键，它能让你把事件处理器绑定在父元素上，却能响应来自内部指定子元素的事件触发，这对于动态添加到页面上的元素来说是不可或缺的能力。data 用来传递额外的数据给事件处理函数。function 就是事件触发时要执行的回调函数，它会接收一个事件对象作为参数。map 则是事件映射，可以传入一个对象来一次性绑定多种事件。
我个人曾经在一个旧项目维护中，被页面上 bind() 和 live() 混用的代码搞得头晕，不同的事件绑定方式行为模式还有细微差异，调试起来很费劲。后来统一改成 on() 之后，代码的可预测性明显提升了，新同事接手也更容易理解。所以只要你的 jQuery 版本不低于 1.7，就没理由不用 on()。
示例一：基础的单击事件绑定
先从最简单的用法开始。页面上有一个 h3 标题元素，用 on() 给它挂上一个 click 事件，点击后弹出提示框。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("h3").on("click",function(){
alert("你刚刚点击了标题");
});
});
</script>
</head>
<body>
<h2> 代码号学习编程：on() 方法基础用法 </h2>
<p> 点击下方标题查看效果。 </p>
<h3> 点我试试 </h3>
</body>
</html>
这种写法和老式的 $("h3").click() 效果类似，但 on() 的结构为后续添加更多参数留出了余地，扩展性要好不少。
示例二：同时绑定多个事件
on() 支持在一个调用里同时绑定多个事件，处理函数共用同一个逻辑。下面这个例子中，给一个 div 元素同时绑定了 mouseover、mouseout 和 click 三个事件。当鼠标移到元素上、移出元素或者点击元素时，都会触发同一个处理函数，切换样式类并改变文字内容。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("div").on("mouseover mouseout click",function(){
$("div").text("点我呀").toggleClass("myDiv");
});
$("div").click(function(){
alert(" 你点击了这个 div 元素。 ");
});
});
</script>
<style>
.myDiv {
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h2> 代码号学习编程：多事件绑定 </h2>
<p> 将光标移到下方文字上查看效果。 </p>
<div> 这是一个 div 元素。 </div>
</body>
</html>
多个事件用空格分隔写在第一个参数里，处理函数就会对每一个事件都做出响应，这种写法比分别写三次绑定要简洁得多。
示例三：自定义事件与参数传递
on() 不止能处理浏览器内置的标准事件，还可以和自定义事件配合使用。自定义事件需要由 trigger() 方法来触发。下面这个例子中，先用 on() 绑定了一个叫 customEvent 的自定义事件，处理函数接收额外参数，并用它来拼接待显示的文字内容。点击按钮后，用 trigger() 触发这个自定义事件，同时把参数传递过去。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("div").on("customEvent", function(e, show){
$(this).text("欢迎来到 " + show).show();
});
$("button").click(function(){
$("div").trigger("customEvent", ["代码号学习平台"]);
});
});
</script>
</head>
<body>
<h2> 代码号学习编程：自定义事件处理 </h2>
<div> 这是一个 div 元素。 </div>
<p> 点击下方按钮触发自定义事件。 </p>
<button> 点我触发 </button>
</body>
</html>
这种自定义事件模式在组件化开发中很有用处，不同模块之间可以通过自定义事件来解耦通信，而 on() 就是接收方绑定的核心方法。
本节课程知识要点
利用好事件委托是 on() 方法的一大优势。当页面上有大量子元素或者数据是动态渲染的时候，给父容器绑一个 on()，通过 childSelector 参数指定目标子元素，这样即便是后来才添加到页面上的新节点，也能自动拥有事件响应能力，不需要反复绑定。用了 on() 绑的事件，要记得在不需要的时候用 off() 及时清除，避免内存泄漏。在 2026 年的 jQuery 开发中，on() 几乎是事件处理的标准起手式，把它的参数组合运用熟练，能应对大多数交互需求。
