如何实现与下述jQuery代码等效的JavaScript代码？

你的问题核心在于：jQuery的自定义事件系统和原生JS的事件系统是相互独立的——如果added_to_cart事件是用jQuery的trigger()方法触发的，原生addEventListener根本监听不到这个事件。

下面给你两种可行的解决思路：

思路一：改用原生方式触发事件（如果能修改触发逻辑的话） #

如果是你自己控制事件的触发，把jQuery的触发代码换成原生写法：

// 替换原来的 $(document.body).trigger('added_to_cart');
document.body.dispatchEvent(new CustomEvent('added_to_cart', { bubbles: true }));

之后直接用原生监听就能正常工作：

document.body.addEventListener('added_to_cart', function() {
    console.log('EVENT: added_to_cart');
});

思路二：给jQuery事件加“桥接”（无法修改触发逻辑时用） #

如果事件是第三方代码（比如WooCommerce）用jQuery触发的，没法改触发逻辑，就重写jQuery的trigger方法，让它触发原生事件：

// 先备份jQuery原有的trigger方法
const oldTrigger = jQuery.fn.trigger;

// 重写trigger，触发jQuery事件的同时触发对应的原生事件
jQuery.fn.trigger = function(eventName, args) {
    // 先执行原来的jQuery触发逻辑
    oldTrigger.apply(this, arguments);
    
    // 只针对added_to_cart事件做桥接
    if (eventName === 'added_to_cart') {
        this.each(function() {
            this.dispatchEvent(new CustomEvent(eventName, {
                bubbles: true,
                cancelable: true,
                detail: args // 把jQuery事件的参数传给原生事件
            }));
        });
    }
};

// 现在原生监听就能捕获到事件了
document.body.addEventListener('added_to_cart', function(e) {
    console.log('EVENT: added_to_cart', e.detail);
});

另外要注意：不管用哪种方法，都要确保你的监听代码在事件触发前执行——比如把代码放在DOMContentLoaded回调里，避免代码加载太晚错过事件：

document.addEventListener('DOMContentLoaded', function() {
    // 这里放你的监听代码
});

内容的提问来源于stack exchange，提问作者Neeraj Malwal