2
respostas

[Dúvida] element.addEventListener

olá, tudo bem? queria muito saber por qual motivo o código não pega se eu colocar ele dessa forma aqui:

buttonType.forEach(element => {
    let type = element.getAttribute("name").toLowerCase()
    element.addEventListener("click", searchForType(type))
})

Ele só funciona se eu colocar a arrow function no addEventListener!

buttonType.forEach(element => {
    let type = element.getAttribute("name").toLowerCase()
    element.addEventListener("click", () => {
        searchForType(type) // ASSIM FUNCIONA
    })
})

Sendo que eu já utilizei o eventListener apenas com uma função no parametro, por qual motivo nesse caso específico ela não funcionou??

searchBar.addEventListener("input", searchForInput())  // Assim funcionou
2 respostas

Quando passar uma função de parâmetro, não use parênteses. Caso a callback (função de parâmetro) precise de um parâmetro, forneça uma função anônima ( () => {} ou function(){}) que internamente chame essa callback com parâmetros (função anônima também pode ser uma callback, pois geralmente é passada de parâmetro para addEventListener()). É por isso que o segundo caso sempre vai funcionar e o primeiro não, o terceiro caso está incorreto, funciona por uma questão de sorte, mas também está errado.

então, se eu quiser criar uma função a parte para uma callback, para ela funcionar devidamente a função criada NÃO pode ter parametros, certo? Pois caso ela receba algum parâmetro, o uso da arrow ou anônima é obrigatório? Outra coisa, se eu passar a função sem os "()" ela vai funcionar normalmente, né? caso a função nao precise de parâmetros

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software