2
respostas

Adição do evento

Não consegui seguir 100% a adição do evento.target no trecho a seguir:

const BotaoConcluir = () => {
    const botaoConcluir = document.createElement('button')
    botaoConcluir.classList.add('check-button')
    botaoConcluir.innerText = 'Concluir'
    botaoConcluir.addEventListener('click', TarefaConcluida)

    return botaoConcluir
}

const TarefaConcluida = (evento) => {
        const botaoClick = evento.target


}

Se na função "BotaoConcluir" já tem um método para "ouvir" o click do botão, por que precisamos de um método que meio que fala que ele foi clicado novamente ou passar a informação do click?

2 respostas

Fala Jean, tudo bem?

O que ocorre é que geralmente, quando clicamos queremos executar uma função, e essa função que passamos como segundo parâmetro do nosso addEventListener, espera receber como parâmetro uma variável que há algumas propriedades, veja:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E nesse caso, estamos utilizando target que nos retorna o elemento que executou o evento, veja:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Então o que estamos fazendo é guardar na variável botaoClick esse nosso botão que chamou o evento, que na aula, um pouco mais a frente utilizamos para pegar o parentNode (o elemento pai) e guardar na nossa variável tarefaCompleta, que utilizamos para adicionar a classe done para que possa ser aplicado o estilo de concluido.

Espero ter ajudado, bons estudos :D

Ok, deixa eu ver se entendi bem, o click possui várias informações, e uma dessas informações é requirida como segundo parâmetro do .addEventListener, como quero a informação da ação de click para disparar os outros aspectos da minha função, eu escolho o .target que contem essa informação, é mais ou menos isso?

Muito obrigado pela atenção!