Exemplo
Anexar um evento click para o documento. Quando o usuário clica em qualquer lugar do documento, a saída "Hello World" em um <p> elemento com id = "demonstração":
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O document. addEventListener() document. addEventListener() método atribui um processador de eventos para o documento.
Dica: Use o documento. removeEventListener() método para remover um processador de eventos que tem sido ligado com a addEventListener() método.
Dica: Use o elemento. addEventListener() método para anexar um manipulador de eventos a um elemento especificado.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9 | 1.0 | 1.0 | 7 |
Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores, e Opera 6.0 e versões anteriores. No entanto, para estas versões específicas do navegador, você pode usar o attachEvent() método para anexar manipuladores de eventos (see "More Examples" below for a cross-browser solution) .
Sintaxe
document.addEventListener( event , function ,
useCapture )
Os valores dos parâmetros
| Parâmetro | Descrição |
|---|---|
| event | Requeridos. Um String que especifica o nome do evento. Nota: Não use o "on" prefixo. Por exemplo, use "click" em vez de "onclick" . Para obter uma lista de todos os eventos HTML DOM, vá para a completa HTML DOM Evento Object Reference . |
| function | Requeridos. Especifica a função a ser executada quando o evento ocorre. Quando o evento ocorre, um objeto de evento é passado para a função como o primeiro parâmetro. O tipo do objeto de evento depende do evento especificado. Por exemplo, o "click" evento pertence ao objeto MouseEvent. |
| useCapture | Opcional. Um valor booleano que especifica se o evento deve ser executado na captura ou na fase borbulhante. Valores possíveis:
|
Detalhes técnicos
| DOM Versão: | DOM Nível 2 Eventos |
|---|---|
| Valor de retorno: | Nenhum valor de retorno |
| changelog: | O parâmetro useCapture tornou opcional no Firefox 6 e Opera 11.60 (has always been optional for Chrome, IE and Safari) |
mais Exemplos
Exemplo
Você também pode se referir a um link externo "named" função:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Tente você mesmo " Exemplo
Você pode adicionar muitos eventos com o documento, sem substituir eventos existentes.
Este exemplo demonstra como adicionar dois eventos de clique com o documento:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Tente você mesmo " Exemplo
Você pode adicionar eventos de diferentes tipos de documento.
Este exemplo demonstra como adicionar vários eventos ao documento:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Tente você mesmo " Exemplo
Ao passar valores de parâmetro, use uma "anonymous function" que chama a função especificada com os parâmetros:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Tente você mesmo " Exemplo
Mude a cor do documento fundo <body> elemento:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Tente você mesmo " Exemplo
Usando o removeEventListener() método para remover um processador de eventos que tem sido ligado com a addEventListener() Método:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Tente você mesmo " Exemplo
Para navegadores que não suportam o addEventListener() método, você pode usar o attachEvent() método.
Este exemplo demonstra uma solução cross-browser:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Tente você mesmo " Páginas relacionadas
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Referência: elemento. addEventListener()