title: Using loops in Javascript event delegation
body: <p>I have the following piece of code:</p>
  <pre><code>var page = document.getElementById(&quot;contentWrapper&quot;);
  page.addEventListener(&quot;click&quot;, function (e) {
     var target, clickTarget, propagationFlag;      
     target = e.target || e.srcElement;
     while (target !== page) {
        clickTarget = target.getAttribute(&quot;data-clickTarget&quot;);
        if (clickTarget) {
            clickHandler[clickTarget](e);
            propagationFlag = target.getAttribute(&quot;data-propagationFlag&quot;);
        }
        if (propagationFlag === &quot;true&quot;) {
            break;
        }
        target = target.parentNode;
     }
  });
  </code></pre>
  <p>I'm using a single event handler in my whole project (single page application). Event handlers are identified using attribute &quot;data-clickTarget&quot; and to prevent event propagation &quot;data-propagationFlag&quot; is used.</p>
  <p>If the DOM tree is large, should I go with looping approach or conventional event handlers?</p>