Método addEventListener() do Document do HTML DOM

Definição e uso

addEventListener() O método adiciona o manipulador de eventos ao documento.

Exemplo

Exemplo 1

Adicionar evento de clique ao documento:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Experimente você mesmo

Sintaxe mais simples:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Experimente você mesmo

Exemplo 2

Você pode adicionar vários ouvintes de eventos ao documento:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Experimente você mesmo

Exemplo 3

Você pode adicionar diferentes tipos de eventos:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Experimente você mesmo

Exemplo 4

Ao passar parâmetros, use uma função anônima para chamar a função com parâmetros:

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

Experimente você mesmo

Exemplo 5

Mudar a cor de fundo do documento:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Experimente você mesmo

Exemplo 6

Use o método removeEventListener():

// Adicionar ouvinte de evento
document.addEventListener("mousemove", myFunction);
// Remover ouvinte de evento
document.removeEventListener("mousemove", myFunction);

Experimente você mesmo

Sintaxe

document.addEventListener(type, function, capture)

Parâmetros

Parâmetros Descrição
type

Obrigatório. Nome do evento.

Não use o prefixo "on".

Use "click" em vez de "onclick".

Todos os eventos DOM HTML estão listados em:

Manual de Referência de Eventos DOM HTML
function

Obrigatório. Função executada quando o evento ocorre.

Quando o evento ocorrer, o objeto do evento é passado como primeiro parâmetro para a função.

O tipo do objeto do evento depende do evento especificado. Por exemplo, o evento "click" pertence ao objeto MouseEvent.
capture

Opcional (padrão = false).

  • true - o manipulador de eventos é executado na fase de captura
  • false - o manipulador de eventos é executado na fase de bolha

Retorno

Nenhum.

Detalhes técnicos

Este método adiciona a função ouvinte de evento especificada à coleção de ouvintes do nó atual para lidar com eventos do tipo especificado type. Se capture para true, o ouvinte é registrado como ouvinte de evento de captura. Se capture para false, ele é registrado como ouvinte de evento comum.

addEventListener() pode ser chamada várias vezes, registrando vários manipuladores de eventos do mesmo tipo em um nó. No entanto, o DOM não pode determinar a ordem de chamada dos vários manipuladores de eventos.

Se uma função ouvinte de evento for usada no mesmo nó com o mesmo type e capture os parâmetros são registrados duas vezes, a segunda inscrição será ignorada. Se estiverem tratando um evento em um nó e registrar um novo ouvinte de evento neste nó, o novo ouvinte de evento não será chamado para esse evento.

Quando usado Node.cloneNode() Método ou Document.importNode() Ao copiar um nó Documento, não são copiados os ouvintes de eventos registrados no nó original.

Este método também está definido nos objetos Document e Window, e funciona de maneira semelhante.

Suporte do navegador

document.addEventListener é uma característica do DOM Level 2 (2001).

Todos os navegadores suportam completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Métodos de elemento

Método addEventListener()

Método removeEventListener()

Métodos de documento

Método addEventListener()

Método removeEventListener()

Tutorial

HTML DOM EventListener

Lista completa de eventos DOM