Manipuladores de Eventos - JavaScript

Quando um evento ocorre no código JavaScript, ele é processado por um manipulador de eventos associado. Vamos considerar como definir manipuladores de eventos.

Manipuladores Embutidos

A maneira mais simples de definir manipuladores de eventos é configurá-los diretamente no código HTML. Esses são os chamados manipuladores embutidos, que são definidos no código de um elemento usando atributos. Esses atributos começam com o prefixo on. Por exemplo, muitos elementos HTML têm um atributo onclick, que define o manipulador para o clique do elemento. Veja no exemplo de um botão:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button onclick="console.log('Clicked!')">Clique em Mim</button>
</body>
</html>

Usando o atributo onclick="console.log('Clicked!')" um manipulador de clique é anexado ao botão. Este manipulador consiste em uma instrução JavaScript, console.log("Clicked!"), que exibe uma mensagem no console. Assim, ao clicar no botão, o evento de clique é disparado e o manipulador definido no atributo onclick é executado:

Você pode até definir várias instruções dessa forma:

<button onclick="console.log('Hello'); console.log('Clicked!')"> Clique em Mim </button> 

Entretanto, esse não é o método mais conveniente. Também é possível extrair todas as instruções para uma função JavaScript separada e passar a chamada dessa função para o atributo onclick:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Programício</title>
</head>
<body>
  <button onclick="btnClick()">Clique em Mim</button>
  <script>
  let clicks = 0;     // contador de cliques
  function btnClick() {
      console.log("Clicked", ++clicks);
  }
  </script>
</body>
</html>

Agora, ao clicar no botão, a função btnClick, que está definida no código JavaScript, será chamada.

Embora este método funcione bem, ele possui várias desvantagens:

O código HTML se mistura com o código JavaScript, o que torna mais difícil desenvolver, depurar e manter a aplicação.
Manipuladores de eventos só podem ser definidos para elementos já criados na página web. Elementos criados dinamicamente nesse caso perdem a capacidade de processar eventos.
Apenas um manipulador pode ser anexado a um elemento para um evento específico.
Não é possível remover um manipulador sem alterar o código.

Propriedades dos Manipuladores de Eventos

Os problemas associados ao uso de manipuladores embutidos foram resolvidos com o uso das propriedades dos manipuladores. Assim como os elementos HTML têm atributos para manipuladores, os elementos DOM no código JavaScript têm propriedades de manipuladores que correspondem a esses atributos:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button id="btn">Clique em Mim</button>
    <script>
    let clicks = 0;     // contador de cliques
    function btnClick() {
        console.log("Clicked", ++clicks);
    }
    // estabelecemos o manipulador de cliques para o elemento com id="btn"
    document.getElementById("btn").onclick = btnClick; 
    </script>
</body>
</html>

Basta pegar a propriedade onclick e atribuir a ela uma função que será usada como manipulador. Isso separa o código HTML do código JavaScript.

Ouvintes de Eventos

Apesar das propriedades dos manipuladores resolverem vários problemas associados ao uso de atributos, ainda assim, não é a abordagem mais ótima. Outra maneira de configurar manipuladores de eventos é o uso de ouvintes.

Para trabalhar com ouvintes de eventos em JavaScript, existe o objeto EventTarget, que define os métodos addEventListener() (para adicionar um ouvinte) e removeEventListener() para remover um ouvinte. Como os elementos DOM HTML também são objetos EventTarget, eles também possuem esses métodos. Os ouvintes, de fato, representam as mesmas funções dos manipuladores.

O método addEventListener() aceita dois parâmetros: o nome do evento sem o prefixo on e a função manipuladora desse evento. Por exemplo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button id="btn">Clique em Mim</button>
    <script>
    let clicks = 0;     // contador de cliques
    function btnClick() {
        console.log("Clicked", ++clicks);
    }
    const btn = document.getElementById("btn");
    // anexamos o manipulador do evento "click"
    btn.addEventListener("click", btnClick);
    </script>
</body>
</html>

O evento click é novamente processado aqui. A remoção do ouvinte é similar à adição:

rect.removeEventListener("click", btnClick);

A vantagem de usar ouvintes é que podemos estabelecer várias funções para um único evento:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button id="btn">Clique em Mim</button>
    <script>
    let clicks = 0;     // contador de cliques
    function btnClick() {
        console.log("Clicked", ++clicks);
    }
    const btn = document.getElementById("btn");

    // anexamos o primeiro manipulador do evento "click" na forma da função btnClick
    btn.addEventListener("click", btnClick);

    // anexamos o segundo manipulador do evento "click" na forma de uma função anônima
    btn.addEventListener("click", function() {
        console.log("Button clicked!")
    });

    // anexamos o terceiro manipulador do evento "click" na forma de uma função de seta
    btn.addEventListener("click", ()=>console.log("Element clicked!"));

    </script>
</body>
</html>