Review the registration of event listeners

[dvago]

👋🏻 Zach

I randomly found your project via the Frontend Focus newsletter and playing around with your demos I realised you are generating X event listeners for each component within the page.

You might want to review the way your web component registers event listeners and perhaps check if the listener already exists to avoid bloating the whatever interface uses this component:

[zachleat]

Finally had a look, I’m assuming this is the demo page right?

Just to take stock, the component binds the following events for each <details-utils> element:

• document-level mousedown (click out to close)
• keypress (click out to close)
• document-level keydown (esc to close)

And then for each <details> inside of <details-utils>:

• toggle (toggle document class)
• click (animate)

2 events for click to close, 1 event for esc to close, 1 event for toggle class, and 1 for animate. If you don’t use these features, the event listeners are not assigned. There doesn’t seem to be any duplicate event listeners or re-initialization happening here?

Seems okay to me, but happy to listen to more feedback!