Programas de Escuta de Eventos HTML DOM

Método addEventListener()

Exemplo

Adicionar um ouvinte de evento que é acionado quando o usuário clica no botão:

document.getElementById("myBtn").addEventListener("click", displayDate);

Experimente você mesmo

addEventListener() O método define um manipulador de evento específico para um elemento.

addEventListener() O método adiciona um manipulador de evento ao elemento sem sobrescrever os manipuladores de evento existentes.

Você pode adicionar vários manipuladores de eventos a um elemento.

Você pode adicionar vários manipuladores de eventos do mesmo tipo a um elemento, por exemplo, dois eventos "click".

Você pode adicionar manipuladores de eventos a qualquer objeto DOM, não apenas elementos HTML, como o objeto window.

addEventListener() nos permite controlar mais facilmente como os eventos reagem à propagação.

Quando você usa addEventListener() para separar JavaScript e HTML, alcançando uma melhor legibilidade; mesmo quando não se controla o HTML, permite que você adicione ouvintes de eventos.

Você pode usar removeEventListener() Este método facilita a remoção de ouvintes de eventos.

Sintaxe

element.addEventListener(event, function, useCapture);

O primeiro parâmetro é o tipo do evento (por exemplo, "click" ou "mousedown").

O segundo parâmetro é a função que precisamos chamar quando o evento ocorrer.

O terceiro parâmetro é um valor booleano que especifica se deve usar propagação de eventos ou captura de eventos. Este parâmetro é opcional.

Atenção:Não use o prefixo "on" para eventos; use "click" em vez de "onclick".

Adicionar um manipulador de eventos ao elemento

Exemplo

Mostrar "Hello World!" quando o usuário clicar em algum elemento:

element.addEventListener("click", function(){ alert("Hello World!"); });

Experimente você mesmo

Você também pode referenciar funções "nomeadas" externas:

Exemplo

Mostrar "Hello World!" quando o usuário clicar em algum elemento:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Experimente você mesmo

Adicionar vários manipuladores de eventos ao mesmo elemento

addEventListener() Este método permite que você adicione vários eventos ao mesmo elemento, sem sobrescrever eventos existentes:

Exemplo

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Experimente você mesmo

Você pode adicionar diferentes tipos de eventos ao mesmo elemento:

Exemplo

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Experimente você mesmo

Adicionar um manipulador de eventos ao objeto Window

addEventListener() Permite que você adicione ouvintes de eventos a qualquer objeto DOM HTML, como elementos HTML, objetos HTML, objeto window ou outros objetos que suportam eventos, como objetos XMLHttpRequest.

Exemplo

Adicionar um ouvinte de evento que é acionado quando o usuário ajusta o tamanho da janela:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Experimente você mesmo

Passar parâmetros

Quando passar valores de parâmetro, use o "função anônima" em forma de parâmetro para chamar a função especificada:

Exemplo

element.addEventListener("click", function(){ myFunction(p1, p2); });

Experimente você mesmo

Propagação de bolha ou captura de evento?

No HTML DOM, há dois métodos de propagação de eventos: bolha e captura.

A propagação do evento é uma definição de como os elementos são tratados quando ocorre um evento. Supondo que um <div> contenha um <p>, e o usuário clicar no elemento <p>, qual evento de "click" deve ser tratado primeiro?

Na bolha, o evento do elemento mais interno é tratado primeiro, seguido pelo mais externo: primeiro o evento de clique do elemento <p> é tratado, seguido pelo evento de clique do elemento <div>.

Na captura, o evento do elemento mais externo é tratado primeiro, seguido pelo mais interno: primeiro o evento de clique do elemento <div> é tratado, seguido pelo evento de clique do elemento <p>.

No método addEventListener(), você pode definir o tipo de propagação usando o parâmetro "useCapture":

addEventListener(event, function, useCapture);

O valor padrão é falseentão será usado propagação de bolha, se o valor for trueentão o evento usa propagação de captura.

Exemplo

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Experimente você mesmo

através do método removeEventListener()

removeEventListener() O método remove eventos que foram adicionados addEventListener() Programas de tratamento de eventos adicionados ao método:

Exemplo

element.removeEventListener("mousemove", myFunction);

Experimente você mesmo

Suporte do navegador

Os números na tabela definem a primeira versão de navegador que suporta completamente esses métodos.

Método
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Notas:IE 8, Opera 6.0 e versões mais antigas não suportam addEventListener() e removeEventListener() Método. No entanto, para essas versões específicas de navegadores, você pode usar attachEvent() Método para adicionar manipuladores de eventos ao elemento e chamado por detachEvent() Método de Exclusão:

element.attachEvent(event, function);
element.detachEvent(event, function);

Exemplo

Solução Cross-Browser:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Para navegadores populares, exceto IE 8 e versões anteriores
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Para IE 8 e versões anteriores
    x.attachEvent("onclick", myFunction);
}

Experimente você mesmo

Manual de Referência do Objeto Evento DOM HTML

Para obter uma lista completa de eventos DOM HTML, acesse nossa Manual de Referência do Objeto Evento DOM HTML.