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

Question

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

这里是增加/减少数量和从购物车中移除商品的事件监听器。

//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 部分的父元素。 现在，如何在上述代码中添加两个事件监听器。
请帮忙！

Answer 1

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);
        }
    });
}