为什么 jQuery 的 .on() 可以工作，而原生 JavaScript 的 .addEventListener() 却不行？答案

【问题标题】：Why does jQuery's .on() work but native JavaScript's .addEventListener() doesn't?为什么 jQuery 的 .on() 可以工作，而原生 JavaScript 的 .addEventListener() 却不行？
【发布时间】：2021-01-08 18:39:46
【问题描述】：

我需要收听 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!");
});

有没有人知道为什么本地监听器不工作？

【问题讨论】：

标签： javascript jquery woocommerce event-handling dom-events

【解决方案1】：

不同之处在于addEventListener() 不监听由jQuery 触发的事件。要引发该事件处理程序，您需要在 document.body 上使用 dispatchEvent。

下面是一个例子。请注意，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'));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：