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?