Objeto JavaScript

Manual de Referência do JavaScript

Manual de Referência do JS DOM

Objeto History do JavaScript Objeto Elemento do HTML DOM

Método addEventListener() do HTML DOM

Objeto Elemento do HTML DOM

element.addEventListener()O método adiciona um manipulador de evento ao elemento especificado.

Uso:elemento.removeEventListener()O método remove o manipulador de evento adicionado com o método addEventListener().

Uso:document.addEventListener()O método adiciona um manipulador de evento ao documento.

Sintaxe:

element.addEventListener(event, listener, useCapture)

Exemplo

var x = document.querySelector("button");
x.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" ou "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 um evento ocorre, o objeto de evento é 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）Booleano, 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 em nossoTutorial 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

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

Exemplo

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

Teste e Veja‹/›

Você pode adicionar muitos eventos ao elemento, sem sobrescrever eventos existentes：

Exemplo

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

Teste e Veja‹/›

Você pode adicionar diferentes tipos de eventos ao elemento：

Exemplo

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

Teste e Veja‹/›

Ao passar valores de parâmetro, use função anônima, que chama a função especificada com os parâmetros:

Exemplo

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

Teste e Veja‹/›

Referências Relacionadas

Tutoriais do JavaScript:Escutadores de Eventos

Tutoriais do JavaScript:Propagação de Eventos

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

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

Objeto Elemento do HTML DOM

Objeto History do JavaScript Objeto Elemento do HTML DOM