Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Parâmetro "evento" na função do EventListener

Olá pessoal.

No segundo módulo do curso na terceira aula, onde é abordada a questão do comportamento do formulário, é utilizado o parâmetro "evento" na função de escutar evento ao click.

não consigo entender como o DOM sabe que esse parâmetro diz respeito ao comportamento padrão do formulário dentro do HTML.

mais para frente, essa mesma "estratégia" é utilizada novamente, quando criamos a função de concluirTarefa, e mesmo assim não ficou claro pra mim.

"Ajuda eu!!"

6 respostas

Fala João, tudo bem? Espero que sim!

O evento que recebemos na função é um parâmetro que o JavaScript nos fornece, e esse parâmetro possui várias propriedades (você pode dar um console log nesse vento e ver o que tem), e cada tipo de evento possui suas propriedades, nesse caso como escolhemos o onclick temos acesso além de outras propriedades, o preventDefault que serve para previnir o padrão daquele elemento. Então o que fazemos ao executar o código evento.preventDefault() é chamar essa função dentro desse evento que é um objeto que contém vários outras propriedades e funções.

Ficou claro agora? Se não, só dar avisar que te explico de uma maneira mais clara, ta bom?

Abraços e bons estudos :D

Acho que entendi, esse evento , é um parâmetro que já existe no JavaScript, não preciso criar uma variável ou uma função que especifique o que esse valor é? talvez tenha me deixado confuso por ser escrito em português.

e o Js sabe que estamos nos referindo ao evento de clicar no botão "adicionar tarefa", pois quando adicionamos o .addEventListener passamos o parâmetro do evento ('click') e passamos junto a variável na qual recebeu o parâmetro 'evento', correto?

` const criarTarefa = (evento) => {

evento.preventDefault()


const lista = document.querySelector('[data-list]')
const input = document.querySelector('[data-form-input]')
const valor = input.value

const tarefa = document.createElement('li')
tarefa.classList.add('task')
const conteudo = `<p class="content">${valor}</p>`

tarefa.innerHTML = conteudo

tarefa.appendChild(BotaoConclui())
tarefa.appendChild(BotaoDeleta())
lista.appendChild(tarefa)
input.value = " "

} const novaTarefa = document.querySelector('[data-form-button]')

novaTarefa.addEventListener('click', criarTarefa)

Não é bem "o javascript sabe que estamos recebendo um evento", e sim ele é passado por parâmetro para a nossa função, no método addEventListener ele recebe como primeiro argumento o nome do evento que deve ser disparado no elemento, e como segundo argumento uma função que será executada quando o evento for disparado, ou seja, o JavaScript ficará observando esse elemento, e quando o evento que você informou for disparado, essa função será executada e será passado como argumento umobjeto que possui as propriedades do evento.

function addEventListener(eventoQueDeveSerOuvido, funcaoASerExecutada) {
    const eventoExecutado;

    if(eventoQueDevoSerOuvido === eventoExecutado) {
        const event = {
            //Propriedades do evento
        }

        funcaoASerExecutada(event)
    }
}

Como pode ver logo acima, o addEventListener estaria verificando se o evento que deve ser ouvido foi executado, se sim, executa a função passando como argumento o event que seria as propriedades do evento executado.

Obs:* Essa é uma lógica de exemplo, não significa que essa é a lógica que está por baixo dos panos do método, estou apenas representando como deveria ser.

Essas funções que passamos para outras funções se chamam callbacks, que são nada mais que funções que serão executadas por outras funções em um determinado momento

Agora eu acho que entendi rsrsrsrs

basicamente então, quando colocamos 'evento' dentro dos parênteses da função var criarTarefa = (evento) => {} estamos dizendo que esse objeto com as propriedades evento se chama evento, é isso? poderia então chamar do que eu quiser, como por ex, "clicou" ou "tarefaCriada".

solução!

Exato!! O nome não importa, o que importa é que você vai receber algo nos parâmetros (nese caso um objeto contendo as propriedades do evento) e você vai dar um nome para isso e utilizar

Show!! muito obrigado Mateus!