本文通过具体代码示例,演示如何在 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 属性:
在回调函数内部弹出提示 '回调函数';
}
});
});
});