JavaScript 自定义事件与回调函数传递参数示例

作者:青柠

时间:2026-10-27

浏览:438

本文通过具体代码示例,演示如何在 JavaScript 中使用 jQuery 实现自定义事件绑定。重点讲解如何在触发事件时传递 JSON 格式对象,并在回调函数中访问对象属性及执行嵌套的回调逻辑,适用于需要灵活处理事件交互的场景。

文章目录

HTML 结构定义

HTML 结构如下:


具体代码实现如下:

 
<select id="select">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>

JavaScript 事件绑定与回调逻辑

JavaScript 逻辑部分:


具体代码实现如下:

 
$(document).ready(function(){
首先移除 select 元素上绑定的 clickMe 事件:
此处传递一个 JSON 格式的对象,该对象包含 name、age 和 callback 属性,可通过 objJSON.属性名的方式在回调函数中访问这些值。
绑定自定义事件 clickMe,接收 event 和 objJSON 两个参数:
弹出显示 objJSON.name 的值;
弹出显示 objJSON.age 的值;
执行 objJSON 中定义的 callback 函数;
}); 
解除 select 元素上的 change 事件绑定:
重新绑定 change 事件处理函数:
在事件触发器中传递一个 JSON 格式的对象作为参数:
调用 trigger 方法触发 clickMe 事件,并传入以下参数对象:
name 属性设置为 'xxc';
age 属性设置为 20;
定义一个匿名函数作为 callback 属性:
在回调函数内部弹出提示 '回调函数';
} 
}); 
}); 
}); 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章