2

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Joseph
  • 91
  • 1
  • 7
  • If the dom tree is large, don't weigh it down with jQ. – bjb568 Jan 01 '14 at 08:41
  • @Dude That's a nonsensical statement. And it does not help the OP. – Tomalak Jan 01 '14 at 08:48
  • You are using jQuery then why are you making the coding so complex. simplify using `this` keyword and `.data()` – Praveen Jan 01 '14 at 08:49
  • @Tomalak Why? I'm offering advice that can benefit the OP and anybody who sees it, should I stop? – bjb568 Jan 01 '14 at 16:36
  • @Dude I think the statement comes off as overly broad and simplified. I'm missing a bit of substantiation/reflection for that claim. – Tomalak Jan 01 '14 at 21:46
  • @Tomalak I usually don't write 10 page essays concepts that can be explained with a sentence when there is a character limit. – bjb568 Jan 01 '14 at 21:51
  • @Dude Answers were not length-limited, last time I checked. When you can't be bothered to explain a recommendation, don't make it. – Tomalak Jan 01 '14 at 21:52
  • @Tomalak It wasn't an answer. – bjb568 Jan 01 '14 at 22:18
  • @Dude There we go. It wasn't a useful comment, either. Quote *"concepts that can be explained with a sentence"* just that you forgot to actually *explain* anything. EOD. – Tomalak Jan 02 '14 at 05:34
  • @Tomalak Please point me to an authoritative posting that says that comments have to be helpful. – bjb568 Jan 02 '14 at 05:59
  • @Dude I'm pretty sure you want to read your previous comment again and think about it for a bit. – Tomalak Jan 02 '14 at 06:16
  • @Tomalak I've read it. Comments are "a verbal or written remark expressing an opinion or reaction" if the community likes the "expression of opinion or reaction" (for whatever reason: usefulness, humor, etc.), then it should stay. My comment isn't particularly useful, but it is good advice, which the community should like. – bjb568 Jan 02 '14 at 06:58

1 Answers1

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).

6502
  • 112,025
  • 15
  • 165
  • 265