Passando Dados para o Manipulador de Eventos: Objeto Event - JavaScript

Às vezes é necessário passar dados para um manipulador de eventos. Se os manipuladores de eventos forem configurados usando atributos de elementos, isso pode ser feito de maneira bastante simples. Por exemplo, vamos passar um texto para o manipulador de cliques de um botão que será usado no manipulador:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button id="btn" onclick="btnClick('Button Clicked')">Clique em mim</button>
    <script>
    // o texto é passado para o manipulador
    function btnClick(text) {
        console.log(text);  // exibimos esse texto
    }
    </script>
</body>
</html>

Assim, no manipulador do botão, um certo texto é passado:

<button id="btn" onclick="btnClick('Button Clicked')"></button>

Na função do manipulador, obtemos esse texto e o usamos de alguma forma, por exemplo, exibindo-o no console:

function btnClick(text) {
    console.log(text);  // exibimos esse texto
}

Neste caso, uma string foi passada para a função do manipulador, mas na realidade, pode ser qualquer objeto. Por exemplo, usando o valor this, podemos passar o objeto atual em que o evento ocorre:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button id="btn" onclick="btnClick(this)">Clique em mim</button>
    <script>
    let clicks = 0;     // contador de cliques
    // uma referência ao elemento do botão é passada para o manipulador
    function btnClick(btn) {
        // alteramos o texto do botão
        btn.textContent = `Clicado ${++clicks}`;
    }
    </script>
</body>
</html>

A palavra-chave this refere-se ao objeto atual do qual o evento está sendo disparado. E no código do manipulador, podemos obter esse objeto e acessar suas propriedades, como a propriedade textContent, e assim alterar o texto do botão.

Vale destacar que em alguns casos, pode ser necessário retornar false do manipulador. Por exemplo, considere o seguinte programa:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <a id="link" href="https://www.programicio.com" onclick="return aClick(this)">Programício</a>
    <script>
    // uma referência é passada para o manipulador
    function aClick(anchor) {
        // obtemos o endereço da âncora
        console.log(anchor.href);
        return false;   // proibimos a redireção
    }
    </script>
</body>
</html>

Aqui no atributo onclick do elemento de link <a>, não apenas o manipulador de eventos é chamado, mas seu resultado é retornado:

<a id="link" href="https://www.programicio.com" onclick="return aClick(this)">

Enquanto isso, a função do manipulador retorna false:

function aClick(anchor) {
    console.log(anchor.href);
    return false;   // proibimos a redireção
}

O fato é que para alguns manipuladores, podemos confirmar ou interromper o processamento do evento. Por exemplo, clicar em um link normalmente levaria à redireção. No entanto, ao retornar false do manipulador, podemos interromper o caminho padrão de processamento do evento, e não haverá redireção. Se retornarmos true, o evento será processado de maneira padrão.

Objeto Event

Ao processar um evento, o navegador automaticamente passa para a função do manipulador um parâmetro chamado objeto Event, que encapsula todas as informações sobre o evento. Com suas propriedades, podemos obter essas informações:

bubbles: retorna true se o evento for do tipo que se propaga para cima. Por exemplo, se o evento é disparado em um elemento filho, ele pode ser tratado no elemento pai.
cancelable: retorna true se é possível cancelar o processamento padrão do evento.
currentTarget: define o elemento ao qual o manipulador de evento está associado.
defaultPrevented: retorna true se o método preventDefault() foi chamado no objeto Event.
eventPhase: contém um número que representa a fase de processamento do evento. Os valores possíveis são:
- 0 (Event.NONE)
- 1 (Event.CAPTURING_PHASE)
- 2 (Event.AT_TARGET)
- 3 (Event.BUBBLING_PHASE)
target: aponta para o elemento em que o evento foi disparado.
timeStamp: armazena o momento em que o evento ocorreu.
type: indica o nome do evento.
isTrusted: indica se o evento foi gerado por elementos da página web ou por código JavaScript.

Exemplo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <button onclick="btnClick(event)">Clique em mim</button>
    <script>
    function btnClick(e) {
        console.log(e);
    }
    </script>
</body>
</html>

Quando a função manipuladora é chamada, as informações sobre o evento estão disponíveis através do objeto event. Esse objeto não é definido pelo desenvolvedor, é simplesmente um argumento da função manipuladora que armazena todas as informações sobre o evento:

<button onclick="btnClick(event)">

No código JavaScript, esse objeto pode ser obtido através do parâmetro da função:

function btnClick(e) {
    console.log(e);
}

Neste caso, simplesmente exibimos o objeto no console. Mas, naturalmente, também poderíamos obter informações específicas sobre o evento:

function btnClick(e) {
    console.log("Type:", e.type);       // Type: click
    console.log("Target:", e.target);   // Target: <button onclick="btnClick(event)">Clique em mim</button>
    console.log("Timestamp:", e.timeStamp);
}

Da mesma forma, podemos obter o objeto evento se o manipulador de eventos for anexado por meio das propriedades dos elementos ou pelo método addEventListener(). Por exemplo, anexando o manipulador por meio da propriedade de um elemento:

<button id="btn">Clique em mim</button>
<script>
function btnClick(e) {
    console.log("Type:", e.type);
    console.log("Target:", e.target);
    console.log("Timestamp:", e.timeStamp);
}
// definimos o manipulador de clique para o elemento com id="btn"
document.getElementById("btn").onclick = btnClick; 
</script>

Ou anexando o manipulador com o método addEventListener:

<button id="btn">Clique em mim</button>
<script>
function btnClick(e) {
    console.log("Type:", e.type);
    console.log("Target:", e.target);
    console.log("Timestamp:", e.timeStamp);
}
const btn = document.getElementById("btn");
// anexamos o manipulador de evento "click"
btn.addEventListener("click", btnClick);
</script>

Parando a Execução de um Evento

Com o método preventDefault() do objeto Event, podemos impedir a continuação da execução de um evento. Em muitos casos, esse método não tem grande impacto. No entanto, em algumas situações, ele pode ser útil. Por exemplo, ao clicar em um link, podemos decidir, através de processamento adicional, se devemos seguir o link ou impedir a transição. Ou outro exemplo: um usuário está enviando dados de um formulário, mas durante o processamento no manipulador de eventos, descobrimos que os campos do formulário estão preenchidos incorretamente, e neste caso, também podemos impedir o envio.

Por exemplo, vamos impedir a transição por um link:

<a id="link" href="https://www.programicio.com">Programício</a>
<script>
function linkHandler(e) {
    console.log("Link has been clicked");
    e.preventDefault();     // impedimos a transição pelo link
}
const link = document.getElementById("link");
link.addEventListener("click", linkHandler);
</script>

Aqui, ao clicar no link, o método linkHandler é acionado. E, como neste método chamamos e.preventDefault(), não haverá transição. Esta abordagem, por exemplo, é frequentemente usada em solicitações AJAX(JavaScript e XML Assíncronos), quando é necessário processar um clique em um link, mas ao mesmo tempo não realizar a transição para outro recurso, e sim fazer uma solicitação a ele através de código JavaScript sem recarregar a página.

Obtendo o Objeto Atual

Para obter o objeto atual para o qual o evento está sendo processado dentro do manipulador de eventos, podemos usar a palavra-chave this:

<button id="btn">Clique em mim</button>
<script>
const btn = document.getElementById("btn");
function btnClick() {
    console.log(this);  // <button id="btn">Clique em mim</button>
}
btn.addEventListener("click", btnClick);
</script>

Aqui, ao processar o evento de clique no botão, o objeto this na função btnClick representa esse botão. De fato, neste caso, os valores de this e event.target seriam equivalentes:

function btnClick(e) {
    console.log(this === e.target); // true
}