Método addEventListener() 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";
}

Experimente você mesmo

Exemplo 2

Código mais compacto:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Experimente você mesmo

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".


Lista completa de eventos DOM
function Obrigatório. Função executada quando o evento ocorrer.
useCapture

Opcional (padrão = false).

  • false - O manipulador é executado no estágio de bolha.
  • true - O manipulador é executado no estágio de captura.

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);

Experimente você mesmo

Exemplo 4

Você pode adicionar diferentes eventos ao mesmo elemento:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Experimente você mesmo

Exemplo 5

Para passar valores de parâmetros, use "função anônima":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Experimente você mesmo

Exemplo 6

Mudar a cor de fundo do elemento <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Experimente você mesmo

Exemplo 7

Diferenças entre propagação e captura:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Experimente você mesmo

Exemplo 8

Excluir manipulador de eventos:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Experimente você mesmo

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étodo addEventListener()

Método removeEventListener()

Métodos de documento:

Método addEventListener()

Método removeEventListener()

Tutorial:

HTML DOM EventListener

Lista completa de eventos DOM