JavaScript · Essencial · Inglês · Técnico
addEventListener
Método que registra uma função para ser chamada quando um evento ocorre num elemento, como click ou input. Permite vários ouvintes no mesmo evento sem sobrescrever os anteriores.
Onde usar
Aparece em todo código que reage ao usuário. Em code review, pergunta-se quem remove o ouvinte, pois ouvintes esquecidos seguram memória e disparam em duplicidade.
Em código
const btn = document.querySelector('#ok');
function aoClicar(ev) {
console.log('clicou', ev.type);
}
btn.addEventListener('click', aoClicar);
btn.removeEventListener('click', aoClicar);Exemplos
Each render added a new addEventListener, so the click fired many times.
Cada render adicionou um novo addEventListener, então o clique disparou várias vezes.
I used addEventListener instead of onclick so I can have several handlers.
Usei addEventListener em vez de onclick para poder ter vários tratadores.
Cuidado
Passar a chamada da função, como addEventListener('click', f()), em vez da própria função f.
Sinônimos
registrar ouvinte
Antônimos
removeEventListener