1
resposta

Ao usar a propriedade .onclick ela é executada quantas vezes?

Bom dia, referente ao event shortcut .onclick, no curso é dito que não é ideal utilizá-lo, pois o valor armazenado é substituído. No seguinte trecho de código o evento será executado quantas vezes?

botao.onclick = botaoHandler; botao.onclick = outroHandler;

Pois se for mais de uma, não vejo problema algum em utilizar o eventshortcut, pois ele irá operar da mesma forma que se fosse utilizado função.

1 resposta

Oi, Vinicius, tudo bem?

O shortcut ele tem o propósito de encurtar a sintaxe do addEventListener(), que exige parâmetros mas isso o torna mais poderoso, podendo executar mais de uma função por evento, como no exemplo da aula:

  var botao = document.querySelector('#botao');

    function botaoHandler() {

        alert('Botão clicado');
    }

     function outroHandler() {

        alert('Botão clicado também!');
    }


    botao.addEventListener('click', botaoHandler);
    botao.addEventListener('click', outroHandler);

Aqui, ambas as funções serão executadas como numa pilha, primeiro a função botaoHandler e em seguida outroHandler e se você quiser adicionar mais funções ao mesmo clique do botão, irá sequencialmente, como numa pilha em que o primeiro que está sendo chamado será o primeiro a ser executado e assim, sucessivamente.

A sintaxe shortcut, que é a onclick executa um evento de click, ou qualquer outro evento, por função. Então, se o seu evento necessitar de mais uma função para aquele mesmo evento, nesse caso, o click no botão, essa forma não é a forma indicada pois ela sobrescreve, ele não cria uma pilha de eventos em que as funções serão chamadas sequencialmente como o addEventListener().

Por boa prática, o interessante é criar o evento através do addEventListener() pois caso o evento cresça, ele irá executar quantas funções forem adicionadas diferente do onclick.

Na documentação tem mais informações: https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick

Se ficou alguma dúvida, é só falar!