有什么更好的性能：立即设置所有dom事件还是逐步设置？

Question

Is it better to add events listeners once and for all? Or just before an event is likely to happen?

An example: imagine you have a menu in your HTML, which opens on click. You have also a close button in this menu, which closes the menu on click. The event listener on the close button should be set: at page load or only when the menu opens?

In other words, is this:

function open() {
  closeButton.addEventListener('click', close);
  // ...
}
function close() {
  closeButton.removeEventListener('click', close);
  // ...
}
openButton.addEventListener('click', open);

better/faster than just this?

function open() {
  // ...
}
function close() {
  // ...
}
openButton.addEventListener('click', open);
closeButton.addEventListener('click', close);

I always prefer to choose simplicity over performance, but does it make a difference at all? Especially when there are lots of events in the UI?

Answer 1

When we know that a event is unlikely to happen untile a certain dependent event, we should defer the event binding. That way the DOM is less heavy

As for the simplicity part, we can have simplified version of code even for he deferred binding of events

Answer 2

Thank you all for your opinion on that matter!

I'm settling to this: bind directly for click and other obvious actions, and bind later for keyboard and mouse events.

In the example, if we want to close the menu when the user press Escape, then we add the event listener on the keydown event to test e.key === "Escape" only when the menu is open. And we remove that listener when the menu is closed.