Using loops in Javascript event delegation

Question

I have the following piece of code:

var page = document.getElementById("contentWrapper");
page.addEventListener("click", function (e) {
   var target, clickTarget, propagationFlag;      
   target = e.target || e.srcElement;
   while (target !== page) {
      clickTarget = target.getAttribute("data-clickTarget");
      if (clickTarget) {
          clickHandler[clickTarget](e);
          propagationFlag = target.getAttribute("data-propagationFlag");
      }
      if (propagationFlag === "true") {
          break;
      }
      target = target.parentNode;
   }
});

I'm using a single event handler in my whole project (single page application). Event handlers are identified using attribute "data-clickTarget" and to prevent event propagation "data-propagationFlag" is used.

If the DOM tree is large, should I go with looping approach or conventional event handlers?

Answer 1

Delegated event handlers can be slow if the document is large and if the selected element is far from the element that triggers the event... from JQuery documentation:

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

As the documentation says for a "click" event probably this is not going to be a serious issue (because users won't click like crazy on a page) but for events like mouse motion or scroll slow response can become quite annoying.

The specific feature of delegated handlers is that even new elements added later to the DOM will use the handler, but do you really need this? If you are not writing a library but just an application then you control when new elements are added and thus you can factor out the even handler attachment into the element creation (in other words instead of having a function that just creates the new element, make it so that it creates the element and also automatically registers the standard event handler).