以下 jQuery 代码片段的 JavaScript 等效项是什么？

Question

下面的代码适用于 jquery，但是，当我尝试使用 addEventListener 将其转换为 javascript 时，我没有得到相同的 output。 这是 jQuery 代码片段：

    (function($){ 

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

    })(jQuery);

Answer 1

这将起作用。 只需使用脚本部分创建空html文件并将此代码放在那里。

// Equivalent of (function($) {})
document.addEventListener('DOMContentLoaded', function(){

    // Equivalent of $(document.body).on('added_to_cart')
    document.body.addEventListener('added_to_cart', function() {
        console.log('EVENT: added_to_cart');
    });
});

// dispatching part
setTimeout(function() {
    document.body.dispatchEvent(new CustomEvent('added_to_cart'));
}, 3000);

Answer 2

在 JS 中更短：

 document.body.addEventListener('added_to_cart', function() { console.log('EVENT: added_to_cart'); }); setTimeout(function() { document.body.dispatchEvent(new CustomEvent('added_to_cart')); }, 3000);