O que acontece quando eu coloco uma função com parênteses no addEventListener ? | JavaScript: programando na linguagem da web

Olá, essa minha dúvida foi parcialmente explicada nos outros tópicos relacionados, mas como eu fiquei com umas pulgas atrás da orelha resolvi abrir mais um.

Na videoaula o professor explica sobre o addEventListener e que ao passar uma função com os parênteses, nós vamos apenas executa-la e se ela retornar algo isso será executado pelo addEventListener, então depois de alguns testes eu fiz esse código:

function exibaAlgo(){
    console.log("Algo");
}

function passeIssoAdiante(){
    return exibaAlgo;
}

document.querySelector(".titulo").addEventListener("click",passeIssoAdiante());

Ai que eu pergunto:

Isso é usado?

Têm alguma performance?

Eu consigo receber ou usar algum parâmetro do addEventListener na função exibaAlgo?

O que foi que eu fiz aqui?

Boa tarde, Wilton! Como vai?

Como são várias perguntas, vou responder cada uma delas isoladamente!

O que foi que eu fiz aqui?

O que vc fez foi invocar a função passeIssoAdiante() e registrar no addEventListener() a função exibaAlgo() como callback do evento de click no elemento selecionado por document.querySelector(".titulo").

Isso é usado? Têm alguma performance?

Sim, é usado, mas não da forma como vc fez! Afinal de contas, o seu código é equivalente a registrar diretamente a função exibeAlgo(), dessa forma:

document.querySelector(".titulo").addEventListener("click", exibeAlgo);

E aí entra a sua última pergunta:

Eu consigo receber ou usar algum parâmetro do addEventListener na função exibaAlgo?

Sim, normalmente essa técnica é utilizada quando se deseja passar algum parâmetro para a função callback, como no exemplo a seguir:

function passeIssoAdiante(valor){
    return function () {
        console.log(valor);
    };
}

document.querySelector(".titulo").addEventListener("click",passeIssoAdiante(1));

Repare que a diferença desse código para o seu é que a função retornada por passeIssoAdiante() agora foi declarada internamente como uma função anônima. E, ao clicar no elemento document.querySelector(".titulo") o valor impresso será 1 pq a função interna anônima "lembrará" das variáveis que estavam no escopo da "função pai" passeIssoAdiante(). Essa técnica recebe o nome de closure.

Para saber mais sobre closure:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Closures

https://www.w3schools.com/js/js_function_closures.asp

Qualquer coisa é só falar!

Grande abraço e bons estudos!

Mergulhe em programação