Tratando Eventos (Event Handler) e o método addEventListener

Neste tutorial de nossa apostila de JavaScript, vamos aprender como trabalhar com os tratadores de eventos (event handlers) através do método addEventListener(), do JS.

Estudar pela Apostila (Download do PDF)

Tratadores de Eventos - Event Handlers

Até o momento, durante nossos estudos de Eventos em JavaScript, estávamos lidando com os eventos a partir de atributos no código HTML.

Veja o exemplo do tutorial anterior, sobre Eventos envolvendo o Mouse, em um código de botão em HTML:

<button onmousedown="aperta()"

        onmouseup="solta()"

        onclick="clica()">

        Clique neu!</button>

Só aí temos três atributos lidando com eventos: onmousedown, onmouseup e onclick.

Mas além de ser desagradável para muitos programadores ficar misturando código JS dentro de HTML, isso tem uma limitação: você só pode associar uma função para um evento, apenas.

Porém, muitas vezes se faz necessário vários eventos, num mesmo elemento.

Por exemplo, ao passar o mouse pelo botão talvez você queira que ele mude de cor ou passo que exiba um alert: "Tem certeza que deseja apertar esse botão? Mwahahaha"

Para isso, precisamos trabalhar com 'tratadores de eventos', do inglês event handlers, que nada mais são que funções que vão tratar eventos, mas agora direto no código JavaScript.

O Método addEventListener

Para trabalharmos com event handler, precisamos associar uma função a determinado elemento. O nome disso é registrar o tratador de eventos e isso é feito com o método addEventListener, que tem a seguinte sintaxe:

elemento.addEventListener(evento, nome_da_função, false ou true)

Por exemplo, vamos criar um botão simples, cujo código HTML é:

<button id="meuBotao">Clique!</button>

Assim, seu nome (id), é "meuBotao".

Agora vamos no JavaScript e vamos 'pegar esse botão':

document.getElementById("meuBotao")

Neste elemento, vamos usar o método addEventListener, para toda vez que o evento "click" ocorrer, ele chame a função clique, veja o código completo:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 <script>
  document.getElementById("meuBotao").addEventListener("click", clique);

  function clique() {
    alert("Clicou!");
  }
</script>
 </body>
</html>

Rode e faça o teste.

Tratamento de eventos em arquivo externos

No exemplo anterior, fizemos com o script dentro do documento HTML direto.

Se tentar colocar o código JS num arquivo externo, como script.js, vai ver que não funciona.

Isso ocorre por o script não foi 'carregado' (load).

Para carregarmos, basta fazermos: windows.load = function (){ código JS}

Vamos ver o código do exemplo anterior, com o código JavaScript num arquivo externo.

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 </body>
</html>

script.js:

window.onload = function(){
 function minhaFuncao(){
     alert("Clicou!");
 }
 
 document.getElementById("meuBotao").addEventListener('click', minhaFuncao, false);
}

O que ocorre aqui é que, ao terminar de carregar a janela (windows.load), ele vai automaticamente carregar o arquivo externo, sem ele, nosso tratador de eventos não funciona, pois ninguém carregou o script.js antes.

Lista de eventos para usar na addEventListener():

https://developer.mozilla.org/pt-BR/docs/Web/Events

JavaScript Progressivo