jQuery中.on()参数的实现示例
作者：学以智用
.on()是jQuery通用事件绑定方法,支持普通绑定、事件委托、传参、命名空间等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
.on() 是 jQuery 通用事件绑定方法，支持普通绑定、事件委托、传参、命名空间等，下面分标准语法、参数、重载形式、示例、解绑逐一说明。
一、完整语法格式
1. 基础通用语法
$(selector).on( events [, selector ] [, data ] , handler );
参数按顺序：事件名、子选择器、自定义数据、回调函数，后三个都是可选。
二、逐个参数详解
1.events（必选）
字符串，指定要绑定的事件名称，多个事件用空格分隔。
- 支持原生事件：click、dblclick、mouseover、mouseout、keydown、change、submit 等
- 支持自定义事件
- 支持事件命名空间（用于精准解绑）
示例：
// 单个事件
$(".box").on("click", function(){});
// 多个事件（空格分隔）
$(".box").on("click mouseover", function(){});
// 事件 + 命名空间（click.my）
$(".box").on("click.my", function(){});
2.selector（可选，核心：事件委托）
字符串，CSS 选择器。
- 不填：普通绑定，仅对当前已存在的元素生效
- 填写：开启事件委托，绑定在父元素，兼容动态新增的子元素
原理
利用事件冒泡：事件实际绑定在父元素，触发时判断来源是否匹配该选择器。
示例
<div id="parent"> <!-- 静态/动态 button 都能触发 --> </div>
// 父元素 #parent 绑定，委托给子元素 button
$("#parent").on("click", "button", function(){
console.log("按钮被点击");
});
// 后续动态创建的按钮依然有效
$("#parent").append("<button>动态按钮</button>");
关键点：委托写法是 父元素.on(事件, 子选择器, 回调)
3.data（可选，事件传参）
任意类型（字符串/对象/数组），绑定事件时预先传入数据，在回调中通过 event.data 获取。
语法：
.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
});
4.handler（必选，回调函数）
事件触发时执行的函数。
- 函数第一个参数：事件对象 event
- this 指向触发事件的 DOM 原生元素（不是 jQuery 对象）
- 可通过 $(this) 转为 jQuery 对象使用
示例：
$(".btn").on("click", function(e){
console.log(e.type); // 事件类型：click
$(this).css("color","red"); // 当前点击元素变色
});
三、四种常用重载形式（按使用场景分类）
形式1：最简绑定（无委托、无传参）
适用于静态元素
// 语法：on( events, handler )
$(".btn").on("click", function(){});
形式2：带传参（无委托）
// 语法：on( events, data, handler )
$(".btn").on("click", {tip:"提示"}, function(e){});
形式3：事件委托（最常用，动态元素必备）
// 语法：on( events, selector, handler )
$("#parent").on("click", ".child", function(){});
形式4：委托 + 传参（完整全参数）
// 语法：on( events, selector, data, handler )
$("#parent").on("click", ".child", {id:1}, function(e){});
四、高级用法
1. 事件命名空间（精准解绑）
给事件加命名空间，解绑时只删指定命名空间事件，不影响其他同类型事件。
// 绑定命名空间 click.a
$(".btn").on("click.a", function(){ alert("A事件"); });
$(".btn").on("click.b", function(){ alert("B事件"); });
// 只解绑 click.a，click.b 保留
$(".btn").off("click.a");
2. 绑定自定义事件
可以手动触发自定义事件：
// 绑定自定义事件 myEvent
$(".box").on("myEvent", function(){
alert("自定义事件触发");
});
// 手动触发
$(".box").trigger("myEvent");
3. 一次性 事件（执行一次后自动解绑）
搭配 .one()，语法和 .on() 一致，只触发 1 次：
$(".btn").one("click", function(){
alert("只弹一次");
});
五、配套：.off()解绑（和.on()成对使用）
1. 解绑所有事件
$(".btn").off();
2. 解绑指定事件
// 解绑所有 click 事件
$(".btn").off("click");
3. 解绑委托事件
// 解绑父元素上委托给 .child 的 click
$("#parent").off("click", ".child");
4. 解绑命名空间事件
$(".btn").off("click.a");
六、关键总结 & 避坑
- 参数顺序不能乱 固定顺序：事件名 → 子选择器(委托) → 自定义数据 → 回调
- 动态 DOM 必用委托 页面后添加的元素，直接绑 $(".动态元素").on() 会失效，必须绑父元素 + 子选择器。
- this 指向 回调里 this 是原生 DOM，要用 jQuery 方法必须写 $(this)。
- 多事件绑定 多个事件空格隔开，共享同一个回调。
- 传参取值 外部传入的数据，统一从 event.data 获取。
七、速查卡片
| 写法 | 适用场景 |
|---|---|
| .on("click", fn) | 静态元素单击 |
| .on("click mouseover", fn) | 多个事件共用回调 |
| 父.on("click", "子", fn) | 动态元素、事件委托（项目高频） |
| .on("click", data, fn) | 事件需要外部传参 |
| .on("click.xxx", fn) | 需要精准解绑，使用命名空间 |
到此这篇关于jQuery中.on()参数的实现示例的文章就介绍到这了,更多相关jQuery .on()参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！