title: Javascript on click event for multiple buttons with same class
body: <p>I have a few buttons across a site I am building, certain buttons have one class while others have another. What I am trying to do is find the best way to find the clicked button without having an event listener for each individual button. I have come up with the below 2 for loops to find all the buttons with class button-1 and class button-2. Being fairly new to javascript i just don't want to get into bad habits so would appreciate any advice on the best way to achieve this.</p>
  
  <pre><code>&lt;section&gt;
    &lt;div class="button--1"&gt;&lt;/div&gt;
    &lt;div class="button--1"&gt;&lt;/div&gt;
    &lt;div class="button--2"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
    &lt;div class="button--2"&gt;&lt;/div&gt;
    &lt;div class="button--1"&gt;&lt;/div&gt;
    &lt;div class="button--2"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
   var button1 = document.querySelectorAll('.button--1');
      var button2 = document.querySelectorAll('.button--2');
  
      for (var a = 0; a &lt; button1.length; a++) {    
          button1[a].addEventListener('click',function(){
              //do something
          });
      }
  
      for (var b = 0; b &lt; button2.length; b++) {
          button1[b].addEventListener('click',function(){
              //do something
          });
      }
  </code></pre>