CODEWITHSUNDEEP
javascripthtmlweb
OuzKagan
OuzKagan

Reputation: 489

Click event for each element or one click event on the document for all?

Let's say I have bunch of click events. Also one/few of them is for document object.
Which one is better for performance? Click event for each element or :

document.addEventListener('click', (e)=>{
  if(e.target == firstObject){ firstFunction(e) }
  if(e.target == secondObject){ secondFunction(e) }
  if(e.target == ThirdObject){ thirdFunction(e) }
})

Upvotes: 1

Views: 150

Answers (3)

ehab
ehab

Reputation: 8054

I think event listener for each element is better if possible, and makes sense in terms of code quality. There are some cases though where a document event listener will be needed ( for example to emulate a click outside behaviour)

That being said here are some of reasons that makes event listener for each element a better solution

  • event propagation is handled for you by the browser, if you decide to have only one event handler for the whole document, and u want to have event listeners for elements that are contained in each other, then you will need to handle propagation your self. That is to say you need to handle the order in which functions run yourself, and then you will have some either complex generic solution, or a specific imperative verbose code with a lot of if else statements.

  • Easier to read code, this is even more true for recent frameworks for web like react, angular, etc..., so for example assume you want to have a listener for clicks on the document, where that code should reside, in which file, and which component should own the code.

  • Removal of event listeners is handled for you by the browser apis, the browser gives you a way to remove event listeners. If you decide to go with a global event listener then you should handle removing event listeners yourself.

  • Your code will be hard to refactor and easier to break later, because you are coupling your document (or container ) event listener to your components internals. That is if you decide to change the structure of these components later, your document based event listener will probably break. This will depend a lot on how you identify the target of clicks, for example if you were identifying them by class names or other attributes, then these attributes might change later for reasons like styling.

    and if you depend on ids for example you might eventually have unexpected results. because what happens for example if you added a listener for an element that has id, removed that element, and then later added another element with same id.

  • You miss on the development tooling provided for you by browsers, browsers can show you attached listeners for elements, with a document based event listener you wont be able to do that

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074495

Neither is "better." They each have their place in your toolkit.

A single delegated handler is more complex in that you have to do the kind of dispatch you're doing in your example (often using closest or matches), but has the advantage that if you're adding/removing elements you want to act on, you don't have to juggle event handlers.

Directly-assigned handlers are simpler (at least on elements that aren't added/removed), can prevent propagation, and let you keep your code more modular, more in keeping with the single responsibility principle.

Use the one that makes the most sense in a given context.

Upvotes: 1

mgm793
mgm793

Reputation: 2066

It's better if you add one by one, because then you can remove event whenever it finish. Moreover you have more control about this event.

Upvotes: 0

Related Questions