如何理解JavaScript的自定义事件?如何触发CustomEvent?
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
回归本源,本文讨论javascript
的自定义事件的问题,测试的范围限于浏览器环境。纯node
环境情况下,目前不做考虑范围内。使用的是new CustomEvent()
对象,具体来说,演示了事件名称e.type
和事件数据e.detail
两个属性。
大家好,这里是苏南大叔的“程序如此灵动”博客,记录苏南大叔和计算机代码的故事。本文测试环境:chrome@130.0.6723.92
。
jquery版本事件
最容易接受的自定义事件的写法方式,就是jquery
的.on()
和.bind()
绑定事件写法,解除绑定使用的是.unbind()
。触发事件使用的是.trigger()
。
测试代码:
<button onclick="javascript:call_trigger()">触发</button>
<button onclick="javascript:call_trigger2()">触发2</button>
<button onclick="javascript:call_unbind()">解绑</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(window).on("myevent", function (event, param1, param2) {
console.log("自定义事件");
console.log(event.type, param1, param2);
});
$(window).bind("myevent2", function (event, param1, param2) {
console.log("自定义事件2");
console.log(event.type, param1, param2);
});
function call_trigger() {
$(window).trigger("myevent", ["param1", "param2"]);
}
function call_trigger2() {
$(window).trigger("myevent2", ["param1", "param2"]);
}
function call_unbind() {
$(window).unbind("myevent");
$(window).unbind("myevent2");
}
</script>
参考文章:
原生版本事件CustomEvent
原生的浏览器事件里面,使用的是.addEventListener()
进行事件绑定,然后使用.removeEventListener()
解除绑定。事件的触发使用的是:.dispatchEvent()
。这里使用了一个CustomEvent()
类是事件对象进行了包装。
测试代码:
<button onclick="javascript:call_trigger()">触发</button>
<button onclick="javascript:call_unbind()">解绑</button>
<script>
let myevent_func = function (e) {
console.log("自定义事件");
console.log(e.type, e.detail.p1, e.detail.p2);
};
window.addEventListener("myevent", myevent_func);
function call_trigger() {
var event = new CustomEvent("myevent", {
detail: { p1: "param1", p2: "param2" },
});
window.dispatchEvent(event);
}
function call_unbind() {
window.removeEventListener("myevent", myevent_func);
}
</script>
注意这里的所有的自定义数据,都只能放在.detail
属性里面。放在别的名字的属性的话,会无法识别出来。就是说,只有一个.detail
是预留的槽位!
参考文章:
- https://newsn.net/say/js-event-listener.html
- https://newsn.net/say/js-event-order.html
- https://newsn.net/say/js-event-target.html
表格总结对比
方案 | 绑定 | 解绑 | 触发事件 | 事件对象 |
---|---|---|---|---|
jquery | .on()/.bind() | .unbind() | .trigger() | {type,[data]} |
原生 | .addEventListener() | .removeEventListener() | .dispatchEvent() | new CustomEvent(type, {detail:data}) |
可见,在jquery
版本的自定义事件中,事件本身就是个普通的{}
。而原版的浏览器支持的自定义事件当中,存在一个CustomEvent()
类,并且参数数据,也被隐藏到了.detail
属性里面。
结束语
本文引入了一个新的对象CustomEvent()
,本文仅仅使用了其事件名称和事件数据两个功能。其实有更多的参数,待以后发掘。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。