javascript - 为什么 jQuery 的 .on() 可以工作,而原生 JavaScript 的 .addEventListener() 却不行?
问题描述
我需要收听 WooCommerce 的自定义事件,例如wc_fragment_refresched
或added_to_cart
。但是,当通过本机为这些事件创建侦听器时,addEventListener
什么也没有发生。但是 jQuery 的.on()
工作正常。
在职的:
jQuery(document.body).on('wc_fragments_refreshed', function() {
console.log("hehey!");
});
不工作:
document.body.addEventListener('wc_fragments_refreshed', function() {
console.log("hoho!");
});
有谁知道为什么本地监听器不起作用?
解决方案
不同之处在于addEventListener()
不监听由 jQuery 触发的事件。要引发该事件处理程序,您需要使用dispatchEvent
on document.body
。
下面是一个例子。请注意,jQuery 会触发两次,因为它确实处理了两个事件触发器。
// jQuery
$(document.body).on('wc_fragments_refreshed', function() {
console.log("jQuery handled the event");
}).trigger('wc_fragments_refreshed');
// Native
document.body.addEventListener('wc_fragments_refreshed', function() {
console.log("POJS handled the event");
});
document.body.dispatchEvent(new Event('wc_fragments_refreshed'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
推荐阅读
- node.js - npm install 在 Mac OS 上失败
- angular - 是否可以在 Firebase 托管和功能上预渲染 Angular Universal 和托管?
- javascript - 动态添加/显示选择选项的最佳实践 JS/jquery/PHP
- r - 如何重命名数据集的每个变量?
- typescript - 路径模块 - 无法读取未定义的“加入”属性
- javascript - 未在已部署站点上加载外部文本文件
- reactjs - React-raphael 组件的渲染顺序(如 z-index)
- macos - SwiftUI connect CoreDate to settings window (macOS)
- flutter - 为什么飞镖只想关闭我的一个集团?
- c# - 如何给用户一组特定的变量可供选择?