IDE acusa variável event como deprecated | JavaScript: programando na linguagem da web

Na verdade é só pra constar no fórum, pois vi outras pessoas falando o mesmo mas as discussões já estavam encerradas e as respostas divergiam um pouco do que encontrei.

A comunidade padronizadora Web Hypertext Application Technology Working Group (WHATWG) desencoraja o uso da variável event do objeto Window, pede para em seu lugar utilizarmos o objeto Event mesmo. Ref. https://dom.spec.whatwg.org/#ref-for-dom-window-event

A solução para seguir esta orientação mais próxima do que foi utilizado na aula é utilizar a função anônima com um parâmetro em lugar de nenhum, porque o método addEventListener já passa implicitamente o objeto Event para o método especificado como segundo argumento Ref. https://dom.spec.whatwg.org/#introduction-to-dom-events

Então em lugar de:

botaoAdicionar.addEventListener("click", 
            function(){
                event.preventDefault();
                console.log("adicionar clicado");
              }

se fizermos como abaixo, seguimos a orientação da WHATWG e evitamos o uso da varíavel event do objeto Window que está deprecated:

botaoAdicionar.addEventListener("click", 
           function(e){
                e.preventDefault();
                console.log("adicionar clicado");
            }

Pois o parâmetro e da função anônima receberá como argumento o objeto Event referente ao clique no botão.

Também testei outras formas de resolver, utilizando também arrow function do javascript:

botaoAdicionar.addEventListener("click", 
        //modo 1: chamar uma função que espera receber
        //um objeto Event (atente que não podemos especificar os parametros).
        //a IDE não saberá na declaração da função que o parâmetro é Event, não terá autoComplete
        //
        //   adicionar
        //
        //modo 2: declarar uma arrow function anônima passando o Event como parâmetro
        //vantagem: a IDE entende que o parâmetro e é um Event, e permite autocomplete;
        //
           (e) => {e.preventDefault(); console.log("adiconar clicado!");}
        //
        //modo 3: declarar uma função padrão anônima que receberá como parâmetro o Event
        //vantagem: a IDE entende que o parâmetro e é um Event, e permite autocomplete;
        //
        //   function(e){
        //        e.preventDefault();
        //        console.log("adicionar clicado");
        //    }
        //modo 4: declarar uma função anônima sem parâmetros e utilizar a variável event
        //a variável event esá deprecated, pode ocorrer incompatibilidades. Usar o objeto Event em lugar, como nas outras alternativas.
        //
        //    function(){
        //        event.preventDefault();
        //        console.log("adicionar clicado");
        //      }
);

function adicionar(e){
    e.preventDefault();
    console.log("adicionar clicado");
}

Créditos também ao usuário amn do stackoverflow que explicou muito bem esta situação em https://stackoverflow.com/questions/58341832/event-is-deprecated-what-should-be-used-instead

Oi Bruno!

Realmente, o aconselhável é utilizar o objeto event passado implicitamente para todos os eventHandlers em vez do objeto global. Ou seja, opte sempre pelos modos 2 e 3.

Além dos modos que você citou, você também pode fazer o seguinte:

botaoAdicionar.addEventListener("click", adicionar)
);

function adicionar(e){
    e.preventDefault();
    console.log("adicionar clicado");
}

// ou
const adicionar = (e) => {
      e.preventDefault();
    console.log("adicionar clicado");
}

No React (framework de js), o modo 2 é quase sempre o escolhido por ser mais curto. Quando o eventHandler precisa de uma lógica mais complexa, geralmente utiliza-se o modo logo acima.

Espero ter ajudado! Parabéns por ter ido além do ensinado em aula! Qualquer outra dúvida pode postar aqui!