Sendo assim, a boa prática é trabalhar com addEventListener() mesmo que você só queira adicionar um único evento. Porque mais tarde, se outro desenvolvedor quiser adicionar outro evento para o mesmo elemento, não corremos o risco de substituir a função já associada por outra. poderia far maissobre o assunto?
Salve, Lorrany.
Imagine que queremos executar dois métodos sempre que um botão é clicado. Se fizermos dessa forma:
<button id="botao">clique-me</button>
<script>
var botao = document.querySelector('#botao');
function botaoHandler() {
alert('Botão clicado');
}
function outroHandler() {
alert('Botão clicado também!');
}
botao.onclick = botaoHandler;
botao.onclick = outroHandler;
</script>Somente a função outroHandler será executada. Independente de quantos outros locais do código adicionam o addEventListener para esse elemento.
Mas, se fizemos dessa forma:
<button id="botao">clique-me</button>
<script>
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);
</script>Todas as funções serão executadas. Percebeu a diferença?
O addEventListener adiciona a função numa "fila" para ser executada.
Quando fazemos botao.onclick = botaoHandler, estamos removendo a fila inteira e deixando só a função botaoHandler para ser executada.