WooCommerce event works in jQuery but not in JavaScript

I’m using WooCommerce hook added_to_cart which works perfectly in jQuery, but doesn’t work in vanilla Javascript. Both functions are running on document loaded. Here is my code reference:

JavaScript

  ajaxAddToCart: function () {
    document.body.addEventListener("click", function (e) {
        if (!e.target.classList.contains("add_to_cart_button")) return;
        
        // This event doesn't work
        document.body.addEventListener("added_to_cart", function () {
            console.log("added");
            setTimeout(function () {
                added.classList.add("button");
                added.innerHTML = `<span class="text">${wc_cart_fragments_params.i18n_view_cart}</span>
                        <span class="icon">check</span>`;
            }, 100);
        });
    });
},

jQuery

$(document).on("click", ".add_to_cart_button", function (e) {

    // This event works
    $("body").on("added_to_cart", function () {
      console.log("added");
      setTimeout(function () {
        _this.next(".added_to_cart").addClass("button");
        _this.next(".added_to_cart").html('<span class="text"></span><span class="icon">Check</span>');
      }, 100);
    });
  });