Search code examples
event-listenercustom-element

Common Event Listener for multiple instances of custom element

I am creating a dropdown-multi-select custom element.

When user clicks outside the dropdown, I would like to close the dropdown, therefore I am attaching an event listener to the window to detect outside-click.

My Problem is when multiple instance of this component is created, there will be multiple event listeners doing the same job.

I intend to put this component in every row of a table with 1000 rows

I would like to know

  • Is there a better way to do it.
  • Having 1000s of event listener, should I be concerned about it
Solution

  • Even if you have 1000s of drop-down custom element, only one is active at a given time.

    Therefore you should attach on window the event listener for the active (and expended) drop-down list...

    ...and detach it when the drop-down list has collapsed.