Global click event

Hello I’ve made global click event handler in order to create dynamic modals, drop downs, navigations etc.

Code:

document.addEventListener('click', (e) => {
    if (e.target.dataset.toggle === 'modal') {
        // modal stuff
    }

    if (e.target.dataset.toggle === 'dropdown') {
        // dropdown suff
    }

    if (e.target.dataset.toggle === 'navigation') {
        // navigation suff
    }
});

Is this bad practice?

  • Your conditions are nicely specific.
  • The event is targeted at the click event so it’s not as bad as if it were a mousemove event.
  • addEventListener is used instead of using onclick properties, so your addEventListener is not going to get overwritten by other events.

That’s all looking good there.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.