0

Eai pessoal, eu fiz um app to-do simples com HTML, CSS e JS puro. No entanto depois q finalizei o projeto me veio uma dúvida: Tenho um EventListener para criar um to-do:

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')

e como pode ver pelos dois últimos elementos criados, em cada tarefa tenho dois botões (o primeiro para finalizar a tarefa e outro para deletar). Agora para adicionar um EventListener (click) nesses 2 botões, a única maneira q pensei foi de logo após gerar esses elementos HTML pelo javascript, adicionar o EventListener de ambos os botões.

    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 que os dois Eventos de clique acima estão no mesmo bloco do EventListener de adicionar o to-do. Resumindo:

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

Se eu colocar o EventListener dos dois botões fora do escopo do que cria um to-do, não irá funcionar pois quando o script carrega os botões nem sequer existem ainda

O código funcionou, porém fiquei com a impressão de que não é do jeito certo a se fazer. Ficou dois EventListeners dentro de um EventListener.

Usando um framework/biblioteca seria mais simples de fazer mas optei por fazer com js puro

Tem alguma outra forma de fazer isso? ou dessa maneira é correto?

1
  • 1
    "Ficou dois EventListeners dentro de um EventListener" - e daí? Quando um elemento X é clicado vc cria outros elementos A e B e cada um deles também precisa ter seus próprios listeners, então essa é a forma de fazer. Não precisa de framework, e não tem nada de estranho nisso...
    – hkotsubo
    29/01/2021 às 1:20

1 Resposta 1

0

Do meu ponto de vista não há qualquer problema em aninhar os event listeners. No entanto, eu faria utilizando "event delegation" pattern. Basicamente consiste em registar os event listeners em elementos que estejam sempre na DOM (um parent element onde está a adicionar os seus novos elementos) e depois o detectar o elemento através do event.target.

Exemplo:

Quando cria os novos elementos, adicione uma classe ao taskDiv:

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

Fora do eventListener que adiciona tasks, registe os eventos dos botões da seguinte forma:

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

Desta forma não precisa de se preocupar em registar eventos sempre que cria os novos elementos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .