Exemplo
Anexar um evento de clique de um <button> elemento. Quando o usuário clica no botão, a saída "Hello World" em um <p> elemento com id = "demonstração":
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O addEventListener() método atribui um processador de eventos para o elemento especificado.
Dica: Use o removeEventListener() método para remover um manipulador de eventos que foi anexado com o addEventListener() método.
Dica: Use o documento. addEventListener() método para anexar um manipulador de eventos para o documento.
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
element .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.
Este exemplo demonstra como executar uma função quando um usuário clica em um <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Tente você mesmo " Exemplo
Você pode adicionar vários eventos ao mesmo elemento, sem substituir eventos existentes.
Este exemplo demonstra como adicionar dois eventos de clique no mesmo <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Tente você mesmo " Exemplo
Você pode adicionar eventos de diferentes tipos ao mesmo elemento.
Este exemplo demonstra como adicionar muitos eventos no mesmo <button> elemento:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").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.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Tente você mesmo " Exemplo
Alterar a cor de um fundo <button> elemento:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Tente você mesmo " Exemplo
Usando o parâmetro useCapture opcional para demonstrar a diferença entre borbulhante e captura:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 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 <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").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:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} Tente você mesmo " Páginas relacionadas
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Referência: documento. addEventListener()