JavaScript HTML DOM EventListener
O método addEventListener()
Exemplo
Adicione um ouvinte de eventos que é acionado quando um usuário clica em um botão:
document.getElementById("myBtn").addEventListener("click", displayDate);
O addEventListener()método anexa um manipulador de eventos ao elemento especificado.
O addEventListener()método anexa um manipulador de eventos a um elemento sem substituir os manipuladores de eventos existentes.
Você pode adicionar muitos manipuladores de eventos a um elemento.
Você pode adicionar muitos manipuladores de eventos do mesmo tipo a um elemento, ou seja, dois eventos de "clique".
Você pode adicionar ouvintes de eventos a qualquer objeto DOM, não apenas a elementos HTML. ou seja, o objeto de janela.
O addEventListener()método torna mais fácil controlar como o evento reage ao borbulhar.
Ao usar o addEventListener()método, o JavaScript é separado da marcação HTML, para melhor legibilidade e permite adicionar ouvintes de eventos mesmo quando você não controla a marcação HTML.
Você pode remover facilmente um ouvinte de eventos usando o removeEventListener()método.
Sintaxe
element.addEventListener(event, function, useCapture);
O primeiro parâmetro é o tipo do evento (como " click" ou " mousedown" ou qualquer outro evento HTML DOM .)
O segundo parâmetro é a função que queremos chamar quando o evento ocorrer.
O terceiro parâmetro é um valor booleano que especifica se deve-se usar borbulhamento de eventos ou captura de eventos. Este parâmetro é opcional.
Observe que você não usa o prefixo "on" para o evento; use " click" em vez de " onclick".
Adicionar um manipulador de eventos a um elemento
Exemplo
Alerta "Olá Mundo!" quando o usuário clica em um elemento:
element.addEventListener("click", function(){ alert("Hello World!"); });
Você também pode consultar uma função externa "nomeada":
Exemplo
Alerta "Olá Mundo!" quando o usuário clica em um elemento:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Adicionar muitos manipuladores de eventos ao mesmo elemento
O addEventListener()método permite adicionar muitos eventos ao mesmo elemento, sem substituir os eventos existentes:
Exemplo
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Você pode adicionar eventos de diferentes tipos ao mesmo elemento:
Exemplo
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Adicionar um manipulador de eventos ao objeto da janela
O addEventListener()método permite adicionar ouvintes de eventos em qualquer objeto HTML DOM, como elementos HTML, o documento HTML, o objeto de janela ou outros objetos que suportam eventos, como o xmlHttpRequestobjeto.
Exemplo
Adicione um ouvinte de eventos que é acionado quando um usuário redimensiona a janela:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Parâmetros de passagem
Ao passar valores de parâmetro, use uma "função anônima" que chame a função especificada com os parâmetros:
Exemplo
element.addEventListener("click", function(){ myFunction(p1, p2); });
Evento borbulhante ou captura de eventos?
Existem duas formas de propagação de eventos no HTML DOM, borbulhar e capturar.
A propagação de eventos é uma maneira de definir a ordem dos elementos quando um evento ocorre. Se você tiver um elemento <p> dentro de um elemento <div> e o usuário clicar no elemento <p>, qual evento "click" do elemento deve ser tratado primeiro?
No borbulhamento , o evento do elemento mais interno é tratado primeiro e depois o externo: o evento de clique do elemento <p> é tratado primeiro, depois o evento de clique do elemento <div>.
Ao capturar o evento do elemento mais externo é tratado primeiro e depois o interno: o evento de clique do elemento <div> será tratado primeiro, depois o evento de clique do elemento <p>.
Com o método addEventListener() você pode especificar o tipo de propagação usando o parâmetro "useCapture":
addEventListener(event, function, useCapture);
O valor padrão é false, que usará a propagação borbulhante, quando o valor for definido como true, o evento usará a propagação de captura.
Exemplo
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
O método removeEventListener()
O removeEventListener()método remove os manipuladores de eventos que foram anexados com o método addEventListener():
Exemplo
element.removeEventListener("mousemove", myFunction);
Referência de objeto de evento HTML DOM
Para obter uma lista de todos os eventos HTML DOM, consulte nossa Referência completa de objetos de eventos HTML DOM .