How to add one event listener for all buttons

by

You don’t really need to add listeners to all the buttons. There is such thing in JS as Bubbling and capturing so you can wrap all your buttons with a div and catch all the events there. But make sure you check that the click was on a button and not on the div.

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }

  console.dir(event.target.id);
})
div {
  padding: 20px;
  border: 1px solid black;
}
<div id='wrapper'>
  <button id='but1'>
  Button1
  </button>
  <button id='but2'>
  Button2
  </button>
  <button id='but3'>
  Button3
  </button>
  <button id='but4'>
  Button4
  </button>
</div>

More Related Contents:

  1. How to count string occurrence in string?
  2. Understanding Meteor Publish / Subscribe
  3. Update style of a component onScroll in React.js
  4. JavaScript parser in Python [closed]
  5. Javascript: Cancel/Stop Image Requests
  6. Get Selected HTML in browser via Javascript
  7. Injecting JS functions into the page from a Greasemonkey script on Chrome
  8. unique object identifier in javascript
  9. Invoke method in objective c code from HTML code using UIWebView
  10. Pdf.js and viewer.js. Pass a stream or blob to the viewer
  11. How to assign refs to multiple components
  12. How to bundle vendor scripts separately and require them as needed with Webpack?
  13. Access Control Origin Header error using Axios
  14. Alter and Assign Object Without Side Effects
  15. Javascript closures – variable scope question
  16. Good Example of JavaScript’s Prototype-Based Inheritance
  17. Angular url plus sign converting to space
  18. Is there any way to ‘watch’ for localstorage in Vuejs?
  19. How to start an animated SVG on entering viewport?
  20. How JS hoisting works within functions?
  21. Export HTML table to CSV using vanilla javascript
  22. AJAX: Submitting a form without refreshing the page
  23. How does GitHub change the URL but not the reload? [duplicate]
  24. Running a command in a Grunt Task
  25. Getting setting cookies on different domains, with JavaScript or other
  26. Jquery/Javascript Opacity animation with scroll
  27. JavaScript EventSource SSE not firing in browser
  28. How do I interpolate a variable as a key in a JavaScript object?
  29. How is Google Meet able to show CPU usage?
  30. How could I change window’s location without reloading and # hack?

Leave a Comment