Objetos do JavaScript

Manual de Referência do JavaScript

Manual de Referência do JS DOM

Objeto Elemento do HTML DOM Objeto Documento do HTML DOM

Método addEventListener() do HTML DOM

document.addEventListener()Método para adicionar manipuladores de eventos ao documento.

Usardocument.removeEventListener()Método para excluir os manipuladores de eventos adicionados juntamente com o método addEventListener().

Usarelemento .addEventListener()O método adiciona um manipulador de eventos ao elemento especificado.

Sintaxe:

document.addEventListener(event, listener, useCapture)

Exemplo

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

Teste e veja‹/›

Compatibilidade do navegador

Os números na tabela especificam a primeira versão do navegador que suporta o método addEventListener():

Método
addEventListener()	1	1	7	1.0	9

Valores dos parâmetros

Parâmetros	Descrição
event	(Obrigatório) O evento pode ser qualquer evento JavaScript válido. Não use o prefixo "on" ao usar eventos, por exemplo, use "click" em vez de "onclick", "mousedown" em vez de "onmousedown". Para uma lista completa de todos os eventos do HTML DOM, consulte nossaReferência do objeto de evento do HTML DOM.
listener	(Obrigatório) Pode ser uma função JavaScript que responde ao evento ocorrido. Quando o evento ocorrer, o objeto de evento será passado como primeiro parâmetro para a função. O tipo do objeto de evento depende do evento especificado. Por exemplo, o evento "click" pertence ao objeto MouseEvent.
useCapture	(Opcional) Valor booleano que especifica se o evento deve ser executado no estágio de captura ou de bolha. O valor padrão é false. Valores possíveis: true-O manipulador de eventos é executado no estágio de captura false-O manipulador de eventos é executado no estágio de bolha Você pode encontrar mais informações emTutorial de JavaScript Event PropagationLeia mais sobre a propagação de eventos

Detalhes técnicos

Retorno:	Nenhum
Versão do DOM:	DOM 2Nível

Mais exemplos

Adicione o evento de clique ao documento. Quando o usuário clicar em qualquer localização no documento, use o elemento <p> com id="para" para exibir "Hello World":

Exemplo

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});

Teste e veja‹/›

Este exemplo referencia uma função "nomeada" externa:

Exemplo

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

Teste e veja‹/›

Você pode adicionar muitos eventos ao documento sem sobrescrever eventos existentes:

Exemplo

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);

Teste e veja‹/›

Você pode adicionar diferentes tipos de eventos ao documento:

Exemplo

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);

Teste e veja‹/›

Ao passar valores de parâmetro, use uma função anônima, que chama a função específica usando os parâmetros:

Exemplo

document.addEventListener("click",　function()　{
myFunc(x,　y);
});

Teste e veja‹/›

Também pode ver

Tutorial do JavaScript:Escutadores de Eventos

Tutorial do JavaScript:Propagação de Eventos

Referência do HTML DOM:document.removeEventListener()

Referência do HTML DOM:elemento .addEventListener()

Objeto Documento do HTML DOM

Objeto Elemento do HTML DOM Objeto Documento do HTML DOM