javascript - 如何在特定单击的按钮上添加 addEventListener？

Question

我想在单击的订单按钮上使用addEventListener()。最有效的方法是什么？这是我现在的做法:

const executeUpdateSummary = (e) => {
  const classNameOfTargetedEl = event.target.className;
  
  if (classNameOfTargetedEl === ('order-button button')) {
    updateOrderSummary(e);
  }
};

const pizzasElement = document.querySelector('.pizzas');
pizzasElement.addEventListener('click', executeUpdateSummary, false);

<div class="pizzas">
  <div class="menu-item">
    <div class="name">
      Margherita
    </div>
    <div class="price">Price: $5</div>
    <div class="toppings">Toppings:
      tomato
      mozzarella
    </div>
    <button class="order-button button" type="button">Add to order</button>
  </div>
  <div class="menu-item">
    <!-- There are multiple menu-items -->
  </div>
</div>

@MTCoster 回答了我正在寻找的内容:

const pizzaButtons = document.querySelectorAll('.order-button');

pizzaButtons.forEach(button => button.addEventListener('click', event => {
    updateOrderSummary(event);
}));

Answer 1

为什么不将事件处理程序直接绑定(bind)到按钮？这样您就根本不需要检查事件处理程序中的类:

const pizzaButtons = Array.from(document.querySelectorAll('.pizzas .order-button'));

pizzaButtons.forEach(btn => btn.addEventListener('click', event => {
  console.log('Updating order summary...');
  console.log('Clicked button:', event.target);
}));

<div class="pizzas">
  <div class="menu-item">
    <div class="name">
      Margherita
    </div>
    <div class="price">Price: $5</div>
    <div class="toppings">Toppings:
      tomato
      mozzarella
    </div>
    <button class="order-button button" type="button">Add to order</button>
  </div><div class="menu-item">
    <div class="name">
      Pepperoni
    </div>
    <div class="price">Price: $7</div>
    <div class="toppings">Toppings:
      tomato
      mozzarella
      pepperoni
    </div>
    <button class="order-button button" type="button">Add to order</button>
  </div>
</div>