Do you have a problem having nested fans? | Events with Javascript

Asked

Viewed 35 times

0

Hey guys, I made a simple to-do app with pure HTML, CSS and JS. However after q finished the project came to me a question: I have an Eventlistener to create a:

document.querySelector('.add').addEventListener('click', () => {
    const taskDiv = document.createElement('div')
    const taskTitle = document.createElement('h2')
    const paragraph = document.createElement('p')
    const button = document.createElement('button')
    const deleteBtn = document.createElement('button')

and as you can see by the last two elements created, in each task I have two buttons (the first to finish the task and the other to delete). Now to add an Eventlistener (click) to these 2 buttons, the only way q thought was to soon after generating these HTML elements by javascript, add the Eventlistener to both buttons.

    button.addEventListener('click', ()=> {
        numbersTasksSpan[1].textContent = --tasks.inProgress
        numbersTasksSpan[0].textContent = ++tasks.completed

        button.parentElement.remove()
    })

    deleteBtn.addEventListener('click', ()=> {
        numbersTasksSpan[1].textContent = --tasks.inProgress
        numbersTasksSpan[2].textContent = ++tasks.deleted

        deleteBtn.parentElement.remove()
    })

Note that the two Click Events above are in the same block as the Eventlistener adding to-do. In short:

EventListener para criar uma tarefa {
   ...
   ...
   EventListener do botão tarefa concluida {}
   EventListener do botão deletar tarefa {}
}

If I put the Eventlistener of the two buttons outside the scope of what creates a to-do, it won’t work because when the script presses the buttons they don’t even exist yet

The code worked, but I got the impression that it is not the right way to do it. There were two Eventlisteners inside an Eventlistener.

Using a framework/library would be simpler to do but I chose to do with pure js

Is there any other way to do it? Or is that way correct?

javascript html javascript-events dom
  • 1

    "Two Eventlisteners inside an Eventlistener" - So what? When an element X is clicked vc creates other elements A and B and each of them also needs to have their own listeners, so that’s the way to do it. It doesn’t need a framework, and there’s nothing weird about it...

1 answer

0

From my point of view there is no problem in nesting the listeners Event. However, I would make using "Event delegation" Pattern. Basically it consists of registering the listeners in elements that are always in the DOM (a Parent element where you are adding your new elements) and then detecting the element through the event.target.

Example:

When creating new elements, add a class to the taskDiv:

...
const taskDiv = document.createElement('div')
taskDiv.classList.add('task')
...

Outside the eventListener adding tasks, log button events as follows:

document.querySelector('.classe-parent-da-task').addEventListener(
  'click',
  (event) => {
    if (event.target.classList.contains('task')) {
      numbersTasksSpan[1].textContent = --tasks.inProgress
      numbersTasksSpan[0].textContent = ++tasks.completed

      event.target.parentElement.remove()
    }
  },
);

...

// O mesmo para o botão de remover

This way you don’t have to worry about registering events whenever you create the new elements.

Browser other questions tagged javascript html javascript-events dom

You are not signed in. Login or sign up in order to post.