时间戳

首页 > 解决方案 > 如何在此处添加事件委托？

javascript - 如何在此处添加事件委托？

问题描述

我正在使用纯 JavaScript 制作披萨订购应用程序。在购物车部分，我有两个点击操作 - 增加/减少商品数量并从购物车中删除商品。对于这两个操作，我有两个事件侦听器。我想在这里使用事件委托。DOM 结构如下所示。这里的类cart-items是所有动态添加到卡片中的项目的父类。购物车中的每个商品都有一个 div，并且与所选披萨商品关联的 ID 被分配为该商品的 ID。例如，我在我的购物车中添加了 ID 为 4 的披萨商品，因此<div>在 DOM 中添加了一个 ID 为 4 的披萨。:- DOM 结构

这是数量增加/减少和从购物车中删除项目的事件侦听器。

//event listener attached when remove button is clicked on
  let removeCartItemButtons = document.getElementsByClassName("btn-danger");
  for (let i = 0; i < removeCartItemButtons.length; i++) {
    let button = removeCartItemButtons[i];
    button.addEventListener("click", removeCartItem);
  }

  //event listener attatched when quantity is increased or decreased
  let quantityInputs = document.getElementsByClassName("cart-quantity-input");
  for (let i = 0; i < quantityInputs.length; i++) {
    let input = quantityInputs[i];
    input.addEventListener("change", quantityChanged);
  }

我的看法：

document
    .getElementsByClassName("cart-items")
    .addEventListener()
    );

我想利用事件委托，不想创建多个事件监听器。所以，我正在获取cart-items基本上是 CART 部分的父元素。现在，我如何在上面的代码中添加两个事件监听器。
请帮忙！

标签： javascript

解决方案

for(const el of document.querySelectorAll(".cart-items")){
    el.addEventListener('click', function(e){
        if(e.target.matches('.btn-danger')){
            removeCartItem(e.target);
        }
    });
    el.addEventListener('change', function(e){
        if(e.target.matches('.cart-quantity-input')){
            quantityChanged(e.target);
        }
    });
}

推荐阅读