0
175
ViewsHow to manage event listeners that affects many elements in javascript
I'm new to JavaScript and was working through this tutorial: https://www.youtube.com/watch?v=i37KVt_IcXw
In it, a delete button is added to a list list elements, and an event listener is used to remove list elements when clicked (~10:30).
When setting up the event that removes list elements, it seems to me like there are two options:
- Add an event listener to each button
- Add an event listener to the list, track what is clicked, set up a rule for check the item, then remove it if the delete button is pressed.
Option 1 is very explicit, which I like. However, there might be a ton of event listeners that have to be managed, which isn't fun.
Option 2 is very concise, but we now have to be careful managing our conditions for selecting elements. If there are a lot of things we can click, the conditional could get out of hand, which isn't fun to maintain.
In the tutorial, they went with option 2 but didn't say way. Any are there any rules to consider for when to use each option? Are there any 3rd cleaner options I'm missing?
1 answers
Answer question0
I go with option 1 for decades. Had no problem and I think it is more managable. Once you added event to delete you probably you won't need to remove it. Browser will handle memory and garbage collection job for you after a DOM element removed.
const deleteItem=function(event){
if(!confirm('Are you sure ?')) return;
//some business logic, requests etc...;
//then remove DOM element
this.parentElement.remove()
}
deleteBtn.addEventListener('click',deleteItem)
You can also use removeEventListener to remove the deleteItem event if ever needed.