Método addEventListener

O método addEventListener permite atribuir manipuladores de eventos a um elemento. Com ele, pode-se especificar, por exemplo, o que fazer ao clicar em um botão ou o que fazer ao digitar texto em um campo de texto. No primeiro parâmetro, especificamos o tipo do evento, no segundo - a função que será executada quando o evento especificado no primeiro parâmetro ocorrer. No terceiro parâmetro opcional, passamos as características do objeto (once, capture, passive) ou o parâmetro useCapture.

Sintaxe

javascriptelemento.addEventListener('tipo do evento', função, [características do objeto]);
ou
elemento.addEventListener('tipo do evento', função, [useCapture]);

Exemplo

Vamos fazer com que ao clicar em um botão seja exibida uma mensagem:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('message');
});

Результат:

Exemplo

Vamos escrever um código para que, ao perder o foco em um input, seja exibida uma mensagem com o texto desse input:

html<input id="input" value="text">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Exemplo

Vamos fazer com que ao clicar em um botão a mensagem seja exibida no console apenas uma vez. Para isso, usaremos o terceiro parâmetro:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('message');
  },
  {
    once: true
  }
);

Exemplo

O parâmetro passive proíbe chamar o método event.preventDefault ao processar o evento. Vamos aplicar o método event.preventDefault ao exemplo anterior, e também especificar no parâmetro passive o valor true:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

Após executar o código veremos as seguintes mensagens:

javascript'No message';
'Unable to preventDefault inside passive event listener invocation.'

Exemplo

O parâmetro useCapture com o valor true mostra a propagação de eventos do elemento interno para o externo, com o valor false - do externo para o interno. Ao passar o parâmetro useCapture, seu nome é omitido e escreve-se simplesmente true ou false. Vamos ver como os eventos se propagam nos elementos pai e filho ao clicar neles:

html<div id="parent">Parent
  <p id="child">Child</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

Veja também