title: Best way to handle clicks on buttons in JavaScript (vanilla)
body: <p>Edit: My question might have been overly broad (still learning), but I nevertheless received very useful answers. So thank you all very much for your input. I've also corrected my code to incorporate passing on 'event'.</p>
  
  <hr>
  
  <p>This is my first question asked here, so I'm a bit nervous...</p>
  
  <p>Here we go: What are the best ways (regarding best practise, speed, compatibility and so on) to manage clicks on buttons and let them trigger different functions?</p>
  
  <p>When researching this question, I found an example on <a href="https://eloquentjavascript.net/14_event.html#h_NEhx0cDpml" rel="nofollow noreferrer">Eloquent JavaScript</a> and took this as a basis.</p>
  
  <p>Then I extended it, by using a “mapper” (is this the correct term?) to find the right function, depending on the id of the button who is triggering the event.</p>
  
  <p>Here’s the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// functions I want to trigger
  function one(e) {
    alert("You clicked " + e.textContent);
  }
  
  function two(e) {
    alert("You clicked " + e.textContent);
  }
  
  // mapper object to hold my functions
  var buttonMap = {
    b_one: function(event) {
      one(event.target)
    },
    b_two: function(event) {
      two(event.target)
    }
  }
  
  // Event Listener
  var buttonClick = document.body.addEventListener('click', function(event) {
    if (event.target.nodeName == "BUTTON") {
      var tar = event.target.id;
      buttonMap[tar](event)
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="b_one" type="button"&gt;Button One&lt;/button&gt;
  &lt;button id="b_two" type="button"&gt;Button Two&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is this solution ok? How can it be improved? Are there any problems I could run into? </p>
  
  <p>Little bonus question: Additionally, I thought about wrapping the whole thing inside <code>document.addEventListener("DOMContentLoaded", function() {})</code>.</p>
  
  <p>Is this a good idea or even needed? In what cases should I check if the DOM content is loaded and when can I omit this check?</p>