为什么jQuery的.on()可以工作,而本机JavaScript的.addEventListener()却不能工作?

科技游牧

我需要听WooCommerce的自定义事件,例如wc_fragment_refreschedadded_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!");
});

有谁知道为什么本地监听器不起作用?

罗里·麦克罗森(Rory McCrossan)

区别在于,addEventListener()它不侦听jQuery触发的事件。要引发该事件处理程序,您需要使用dispatchEventon 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我的扬声器可以工作,但耳机却不能工作?

为什么bash test.sh可以工作,而./test.sh却不能工作?

为什么对于同一Backbone集合,fetch()可以工作,而sync()却不能工作?

为什么iptables NAT可以在mininet中工作,而iptables日志记录却不能工作?

为什么退出窗口按钮可以工作,但游戏中的退出按钮却不能工作?

为什么端口3000可以工作,而其他端口却不能工作?

为什么foldr可以在Haskell中的无限列表上工作,而foldl却不能呢?

为什么相同的Scala代码在命令行中可以正常工作而在Intellij中却不能正常工作?

为什么Spring Security在Tomcat中可以工作,而在部署到Weblogic时却不能工作?

为什么作为功能的Angular控制器可以工作,而封装中的控制器却不能工作呢?

为什么DocumentBuilder Parse在Eclipse中可以正常工作,而在IntelliJ IDEA中却不能工作?

为什么php脚本可以在免费托管上工作,而在我的vps上却不能工作?

多线程-为什么在引用上正常工作却不能更改引用

为什么float类型在Keil上不能很好地工作,而在Eclipse(gcc)上却不能工作

为什么一种字体可以在IE中工作,而另一种却不能

为什么在React JSX中三元运算符可以工作而其他却不能

创建新列时,为什么它可以与函数一起工作,而没有它却不能?

为什么 zsh 中只有某些插件可以工作,而其他插件却不能?

为什么我的 bash 脚本可以在终端中工作,而在使用 crontab 时却不能?

为什么在打印值时循环工作,但在将它们添加到列表时却不能工作?

有时jQuery Datatable可以正常工作,有时却不能正常工作吗?

为什么我可以进场却不能进场?

SCP工作正常,但rsync却不能

为什么我的宏在工作簿中起作用,但在PERSONAL.XLSB中却不能起作用?

为什么从外部访问类的成员会给出准确的结果,而从成员函数访问它却不能正常工作?

在Laravel中,为什么在应用程序事件之前,Request :: segment()方法可以正常工作,而Route :: currentRouteName()却不能正常工作?

为什么在单元测试中使用RESTful Web服务(使用javax.ws.rs。*和Jsersey)可以工作,但是提交给Spark时却不能工作?

为什么chvt可以在虚拟终端上以普通用户的身份正常工作,但在X之下却不能正常工作?

Jquery-ui在Firefox中的localhost上可以正常工作,但在服务器上却不能?