title: Best practices for where to add event listeners
body: <p>On my page, the user clicks on an element in order to edit it. To facilitate this, I assign the class <code>editable</code> to all such elements.</p>
  <p>How should I listen for clicks on all these elements? Currently, I'm doing this:</p>
  <pre><code>document.body.addEventListener(&quot;click&quot;, (event) =&gt; {
    if (event.target.classList.contains(&quot;editable&quot;)) {
      // do stuff
    }
  });
  </code></pre>
  <p>The alternative would be to set a listener on every element, like this:</p>
  <pre><code>const editables = document.getElementsByClassName(&quot;editable&quot;);
  for (const editable of editables) {
      editable.addEventListener(&quot;click&quot;, editElement);
  }
  </code></pre>
  <p>It seems to me that the first way must be better for performance, since it's only one element being listened on, but is it possible to degrade performance by attaching all such events to the body element? Are there any other considerations (e.g. browser implementations of event handling) that I'm neglecting which would suggest doing it the second way?</p>