Javascript Listeners - memory usage / resources / efficiency

Hello,

I was reading your post: https://www.kirupa.com/html5/handling_events_for_many_elements.htm

Comments were closed but I had a question I’m hoping the community can help me with.

When someone wants to implement analytics tracking on their site, you implement something like Google Tag Manager. For each item that you listen for you configure it separately and it launches a listener. In some cases, there are dozens of listeners being fired on the page. So my question is:

Can anyone validate the fact that having multiple listeners uses up more resources/memory or present any issues that should not be? ( performance issues? )

If you launch a single listener that listens for a single event, such as “click” and then passes the event.target through a series of conditionals in order to take action if the item clicked is something identified as a “trackable” item, would this solution introduce any issues? is it better than firing independent listeners?

Yes, I’ve seen slowdowns related to this before. [quote=“Olaf_Calderon, post:1, topic:634857”]
would this solution introduce any issues? is it better than firing independent listeners?
[/quote]

It’s better, but requires you to take of a bit more logic in your one single handler than you would in your larger group of homogenous handlers.

Thank you for your reply. Yes, I can deal with more logic, what I’m wondering is about performance.

I have a javascript listener but I push the event.target into a jQuery object so I can do simple checks like element.is(’#someId’) or element.data(‘someDataAttribute’) == “some value”. I have an if else chain so as soon is a condition is matched it drops the rest.

Do you think it would be wise to add an event.stopPropagation() and the end of the conditional chain? how does having it stopPropagation compare to not stopping it? I mean what’s the harm? is it performance or memory?

It is event delegation and improves performance.