Handling multiple listeners on a global event

Question

What's the best way to implement this:

I have multiple elements that will need to do some sort of calculations whenever a global event happens (ex. resize, scroll).

I can either

1. Add each element to an array then have a single listener for the event and whenever it happens, run a handler that takes the array and loop through each to perform its calc

or

2. Have each element listen to the single global event

Is there any methods I'm missing?

Answer 1

Add each element to an array then have a single listener for the event and whenever it happens, run a handler that takes the array and loop through each to perform its calc

- this; attach a single event handler to a document/body element and do whatever you want in it.

Why: because it has less memory/performance overhead and is a lot more maintainable (which is, in case of JavaScript, often overweights everything else).