javascript - 对象包含的元素上的事件侦听器

Question

我正在建立一个电子商务网站并采用 OOP 方法。我遇到了两难境地，我不太确定我能做些什么来解决这个问题..

所以我有一个类负责渲染购物车的视图，我们称之为 this CartView，它还具有允许您从该购物车中添加和删除项目的功能，事件侦听器附加到添加/删除按钮。每次添加或删除时，购物车都会重新呈现并创建一个新的购物车。但是，与此同时，事件侦听器会再次添加到其中。所以每次，购物车都会重新渲染，另一个事件监听器会以越来越多的方式添加。因此，在购物车的第 5 次重新渲染时，每次点击都会触发 5 个事件。

我的代码示例： Store.js

Store.prototype.onUpdate = function(itemName) {
    console.log('onUpdate');
    console.log(this);
    if (itemName) {
        var cart = document.getElementById("modal-content");
        var itemId = "product-" + itemName;
        var container = document.getElementById("productView");
        /*
            Below program crashes if our productView does not contain the item, we need
            a seperate communication with the server.
        */
        if (!document.getElementById(itemId)) {
            console.log(itemId + " does not exist in productView");
        } else {
            var currentItem = new ProductView(document.getElementById(itemId), this, itemName); 
            if (!nodeTraversal.findNode(container, document.getElementById(itemId))) {
                console.log('element does not exist');
                container.appendChild(currentItem);             
            } else {
                console.log('element does exist');
                var nodeToBeReplaced = document.getElementById("product-" + itemName);
                nodeTraversal.findReplacedNode(container, document.getElementById(itemId), nodeToBeReplaced);
            }           
        }

        console.log('cart', cart.childNodes);
        var cartView = new CartView(cart, this);
        cartView.initEvents(cart, this);
    } else {
        var stock = Object.keys(this.stock)
        var productsList = new ProductsView(document.getElementById("productView"), stock, this);
    }       
};

CartView.js

CartView.prototype.registerAddClickEventListeners = function(parent, storeInstance) {
    console.log(parent);
    console.log(parent.getAttribute('cartAddEvent'));
    if (parent.getAttribute('cartAddEvent') !== 'true') {
        console.log('Adding event for cart modal - add');
        parent.addEventListener("click", addClickEventListener(storeInstance), {once : true});
    }
}

function addClickEventListener(storeInstance) {
    return function(e) {
        if (e.target !== e.currentTarget && e.target.classList.contains("btn-add")) {
            var product = e.target.parentNode.classList.item(0);
            var elementClicked = e.target;
            elementClicked.setAttribute('cartAddEvent', 'true');
            storeInstance.addItemToCart(product);
            storeInstance.timer.resetTimer();
        }
        e.stopPropagation();        
    }
}

我怎样才能使事件只添加一次？理想情况下，我希望使用纯 JavaScript 获得反馈。谢谢！

标签： javascripthtml