Método addEventListener() do HTML DOM
- Página anterior accessKey
- Próxima página appendChild()
- Voltar à página anterior Objeto Elements do HTML DOM
Definição e uso
addEventListener()
O método adiciona um manipulador de eventos ao elemento.
Exemplo
Exemplo 1
Adicionar evento click ao elemento <button>:
element.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }
Exemplo 2
Código mais compacto:
element.addEventListener("click", function() { document.getElementById("demo").innerHTML = "Hello World"; });
Você pode encontrar mais exemplos na parte inferior da página.
Sintaxe
element.addEventListener(type, function, useCapture)
Parâmetros
Parâmetros | Descrição |
---|---|
type |
Obrigatório. Nome do evento. Não use o prefixo "on". Use "click" em vez de "onclick". |
function | Obrigatório. Função executada quando o evento ocorrer. |
useCapture |
Opcional (padrão = false).
|
Retorno
Nenhum.
Detalhes técnicos
Este método adiciona a função ouvinte de evento especificada à coleção de ouvintes de eventos do nó atual para lidar com o tipo de evento especificado. type do evento. useCapture Para true, o ouvinte é registrado como ouvinte de evento de captura. Se useCapture Para false, ele é registrado como ouvinte de evento comum.
addEventListener() pode ser chamado várias vezes, registrando vários handlers de eventos do mesmo tipo no mesmo nó. Mas atenção, o DOM não pode determinar a ordem de chamada dos vários handlers de eventos.
Se uma função ouvinte de evento for usada no mesmo nó com o mesmo type e useCapture Se o parâmetro for registrado duas vezes, a segunda registro será ignorado. Se estiver processando um evento em um nó e um novo ouvinte de evento for registrado no mesmo nó, o novo ouvinte de evento não será chamado para esse evento.
Quando usado Node.cloneNode() Método ou Document.importNode() Método ao copiar um nó Documento não copia os ouvintes de eventos registrados no nó original.
Este método também está Document e Window Objeto definido e funciona de maneira semelhante.
Mais exemplos
Exemplo 3
Você pode adicionar muitos eventos ao mesmo elemento:
element.addEventListener("click", myFunction1); element.addEventListener("click", myFunction2);
Exemplo 4
Você pode adicionar diferentes eventos ao mesmo elemento:
element.addEventListener("mouseover", myFunction); element.addEventListener("click", someOtherFunction); element.addEventListener("mouseout", someOtherFunction);
Exemplo 5
Para passar valores de parâmetros, use "função anônima":
element.addEventListener("click", function() { myFunction(p1, p2); });
Exemplo 6
Mudar a cor de fundo do elemento <button>:
element.addEventListener("click", function() { this.style.backgroundColor = "red"; });
Exemplo 7
Diferenças entre propagação e captura:
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
Exemplo 8
Excluir manipulador de eventos:
element.addEventListener("mousemove", myFunction); element.removeEventListener("mousemove", myFunction);
Suporte do navegador
element.addEventListener()
É uma função 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étodos de documento:
Tutorial:
- Página anterior accessKey
- Próxima página appendChild()
- Voltar à página anterior Objeto Elements do HTML DOM