0

I have a timeline chart with hundreds of bars displayed on the screen. For each bar I want to show a personalized tooltip when hovering, display a personalized context menu on right-click, select the bar on click and there are other events that need to be handled.

I am wondering what is the correct approach in handling the events, especially keeping in mind performance of the app.

  1. If I have handlers for each bar (mouseover, mouse leave, mouse click, context menu, etc.) it is easier to implement the logic but I am not sure if there is a performance hit of having subscribed to thousands of events. Obviously I'll be using one mouseover callback function for all mouseover events, one mouse leave callback for all mouse leave events and so on.
  2. If I have handlers for the chart (mouseover, mouse leave, mouse click, context menu, etc.) and find out in these handlers which is the target bar, it is a more complex implementation, more chances of introducing bugs, but only a few (less than 10) event subscriptions in the app.

I think that the browser triggers the events on any element regardless if there is a subscription for it or not. If that is the case, having a ton of event handlers that might never be invoked should not affect the app's performance.

Nicolae Daian
  • 1,065
  • 3
  • 18
  • 39
  • _"...especially keeping in mind performance of the app"_ - Only a profiler can tell you the impact – Andreas Mar 17 '21 at 15:40
  • This is going to be a judgement call based on your specific situation, there is no one-size-fits-all answer. Side note: *"...and find out in these handlers which is the target bar, it is a more complex implementation..."* Not very much more complicated. Basically you start with `const target = event.target.closest("selector-for-element-you-would-have-hooked-directly"); if (!target || !this.contains(target)) { return; } /*...use target...*/`. See [`closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest). (**But**: That's direct DOM, not Angular.) – T.J. Crowder Mar 17 '21 at 15:43
  • Why not simply use event delegation? [What is DOM Event delegation?](https://stackoverflow.com/q/1687296) | [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198) – VLAZ Mar 17 '21 at 15:43
  • @VLAZ - Isn't event delegation option 2 above? – T.J. Crowder Mar 17 '21 at 15:43
  • @T.J.Crowder I assumed it's a different thing altogether. As in, instead of binding handlers to each child, bind *different* handlers (non-delegated) to the parents – VLAZ Mar 17 '21 at 15:44
  • If it's indeed evend delegation, then you can make a decorator to handle it for you. [Here is a sample implementation](https://stackoverflow.com/a/66659531/). – VLAZ Mar 17 '21 at 15:47
  • the superior performance of event delegation over local event listener is overrated, in may opinion the most performant scenario is to have event listeners on root `chart` element an implement a lookup hash table of targeted elements, then select them with `event.target` – n-- Mar 17 '21 at 16:00
  • @syduki Which is also known as... Event delegation O.o – Andreas Mar 17 '21 at 16:25
  • @Andreas agree, this is the name for it, I meant the how it is implemented in wild, i.e. you should do your own delegation handler not to rely on some library – n-- Mar 17 '21 at 16:35

0 Answers0