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

Question

I want to use addEventListener() on the clicked order button. What is the most efficient way of doing it? Here's how I'm doing it now:

 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's answered what I was looking for:

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

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

Answer 1

Why not bind the event handler directly to the buttons? That way you don't need to check the class in the event handler at all:

 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>