0

I am currently working on a comment feature. There can be many comments > 100. Each comment has several functions (Delete, Edit, Flag) that the user can click on. If I assume there are 100 comments with three 3 functions. There are 300 event listeners that I have initialised.

Problem Now I wonder if this has a negative impact on the performance of the browser? I suppose so.

Question Is there a more performance approach that can be used? A pattern that was designed for exactly such cases?

Max Pattern
  • 1,430
  • 7
  • 18
  • 3
    Event Delegation – mplungjan Jan 19 '23 at 10:41
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=javascript+event+delegation+many+eventlisteners+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Jan 19 '23 at 10:42
  • 3
    https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation – Teemu Jan 19 '23 at 10:43
  • 1
    Wrap each comment in a container. Add the ID of the comment to that container as a data-attribute. Wrap all comments in one container and use delegation from that to intercept clicks. Use `const parent = e.target.closest('div.comment') as parent and get the id from there. You can the do parent.remove() if the e.target is delete and parent.dataset.commentid to get the id of the comment if needed – mplungjan Jan 19 '23 at 10:45
  • 1
    @mplungjan Your comment (event delegation) was helpful and it make sense. I will try out. Thank you – Max Pattern Jan 19 '23 at 10:45
  • For example https://stackoverflow.com/a/33015903/295783 and do not forget to use the tweak added to it – mplungjan Jan 19 '23 at 10:46
  • @mplungjan What do you mean with tweak? – Max Pattern Jan 19 '23 at 10:47
  • @mplungjan Would you mean that I assign each comment as a container to an event or the whole comment list? In the first approach I would have 100 EventListeners and in the second approach only one. Which would be super super :-) I would say that the second approach would work but I don't know the side effects that could occur. – Max Pattern Jan 19 '23 at 10:51
  • 1
    Event Delegation is the way to go indeed. But instead of `id's` I prefer using data-attributes. Like ``. Then point the eventhandler to the right function trough `dataset.function` and the right messsage trough `dataset.message` – Michel Jan 19 '23 at 10:51
  • @Michel That sound very! good :-) I will try. Can you take a look to my comment above and give me your opinion, please? `Would you mean that I assign each comment as a container to an event or the whole comment list? In the first approach I would have 100 EventListeners and in the second approach only one. Which would be super super :-) I would say that the second approach would work but I don't know the side effects that could occur.` – Max Pattern Jan 19 '23 at 10:53
  • 1
    Only *one* eventlistener attached to the entire document. And from there just let the data-attributes tell the eventlistener what to do, and on what message. The fun part is if you have a menu or something else, you can add those to the same eventlistener: `
    `
     – Michel Jan 19 '23 at 10:57
  • @Michel With this approch i need for all click event on my side only one listener. And the magic what is to do make the eventHandler. Im flashed :-) – Max Pattern Jan 19 '23 at 11:02
  • Here is a complete example https://jsfiddle.net/mplungjan/8p4r5cwx/ – mplungjan Jan 19 '23 at 11:21
  • @mplungjan Great thanks to you for your time and afforts! It is a good example. I am testing it now and will apply it to my project. I suspect that I will have a problem with event bubbling later on, because my buttons still contain two spans where I already work with currentTarget. Can the two approaches be combined? I will ask a new question when I encounter the problem and ping you and Michel... – Max Pattern Jan 19 '23 at 12:25
  • `const tgtButtonWhenSpansInsideButton = e.target.closest("button")` would handle any click on a `` – mplungjan Jan 19 '23 at 12:29
  • 1
    @mplungjan As I had already suspected, I will run into exactly the same problem if the button contains two more elements. Thanks for your hint but i had problems with closest. I open a new question: https://stackoverflow.com/questions/75172827/event-delegation-does-not-work-if-the-bound-target-is-nested . Maybe you did it :-) – Max Pattern Jan 19 '23 at 13:18
  • @Michel can you take a look to my related question please? https://stackoverflow.com/questions/75172827/event-delegation-does-not-work-if-the-bound-target-is-nested – Max Pattern Jan 19 '23 at 13:19
  • 1
    @Michel is my namesake... – mplungjan Jan 19 '23 at 13:36
  • 1
    @mplungjan :-) the official: Merci Michel and Michel! – Max Pattern Jan 19 '23 at 13:38

0 Answers0