Eventos JavaScript

Introdução a eventos JavaScript: saiba mais sobre eventos, event handlers, tipos de eventos, eventos JavaSript comuns e mais.

Ir para o artigo

Em desenvolvimento web, não que seja requisito para que um site seja considerado de qualidade, mas, geralmente, quando há eventos JavaScript envolvidos, quando há interação, as coisas começam a ficar mais interessantes.

A cada clique do mouse, a cada tecla pressionada, a cada toque numa tela touchscreen, etc, essas “criaturas sem vida” de repente ganham vida e fazem todos os tipos de coisas loucas e impressionantes. Semelhante à forma como os nervos ajudam a enviar mensagens por todo o corpo em reação a estímulos, a “força” que permite que aplicativos web possam interagir é conhecida como eventos. Quase sempre quando você ou a sua aplicação faz algo, um evento é acionado. Se você tem algum código para escutar (listen) esse evento, você pode fazer seu pedido fazer coisas.

Conheça os Eventos JavaScript

Em relação aos eventos em JavaScript, eles podem ser analisados em camadas. Por exemplo, quando se usa um evento de clique para fazer aparecer uma caixa de diálogo (alert()), existem várias etapas, uma sequência de ações, que levam ao resultado de a caixa aparecer:

Um botão é clicado;
O botão dispara um evento;
Algum código está escutando o evento disparado;
A caixa de diálogo é mostrada.

Quando se clica no botão, o navegador emite o que é conhecido como evento. Todas as “entidades” dentro da aplicação sabem que o botão foi clicado; mas saber que algo aconteceu é apenas uma parte da equação. Reagir a isso é a outra parte e, em algum lugar do aplicativo, é preciso que haja algum código que esteja escutando ativamente este evento. Quando o evento de clique é emitido pelo navegador, o código fica escutando para verificar se esse evento é executado e isso resulta na caixa de diálogo sendo apresentada.

Pegue um exemplo de uma página com algum código para ilustrar isso:

<!DOCTYPE html>
<html>
    <head>
        <title>Event example</title>
    </head>

    <body>
        <div id="mainContent">
            <button id="clickButton" class="buttonStyle">click me</button>
        </div>

        <script>
        var clickButton = document.querySelector("#clickButton");

        clickButton.addEventListener('click', displayDialog, false);

        function displayDialog(e) {
            window.alert("You clicked me!");
        }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Event example</title>

</head>

<body>

<button id="clickButton" class="buttonStyle">click me</button>

</div>

var clickButton = document.querySelector("#clickButton");

clickButton.addEventListener('click', displayDialog, false);

function displayDialog(e) {

window.alert("You clicked me!");

}

</script>

</body>

</html>

Estas linhas correspondem a escuta pelo evento e a reação a ele, exibindo uma caixa de diálogo quando o evento é escutado.

Escutando Eventos

A primeira coisa é aprender a escutar a eventos que são disparados. Como mencionado anteriormente, quase tudo que é feito dentro de um aplicativo resulta em um evento sendo disparado. Às vezes, o aplicativo dispara eventos automaticamente, como quando a página é carregada; às vezes, o aplicativo dispara eventos como uma reação a interações.

Então, a aplicação é bombardeada por eventos constantemente, quer você os tenha explicitamente disparado ou não. O truque consiste em contar para a aplicação para que ela possa escutar os eventos certos e reagir conforme cada caso.

A tarefa de escutar o evento certo é tratada inteiramente por uma função chamada addEventListener(). Esta função é responsável por ser eternamente vigilante para que possa notificar a outras partes do aplicativo quando um evento de interesse é disparado.

Ela é usada da seguinte maneira:

source.addEventListener(eventName, eventHandler, false);

1	source.addEventListener(eventName, eventHandler, false);

Você pode usar a função addEventListener() primeiramente especificando qual elemento precisará ficar escutando os eventos. No caso, será um botão chamado clickButton:

clickButton.addEventListener(eventName, eventHandler, false);

1	clickButton.addEventListener(eventName, eventHandler, false);

Depois de saber qual elemento ficará ouvindo, o próximo passo é, realmente, especificar o evento que se deseja escutar. Por exemplo, o evento associado com o clique que, em JavaScript, é o evento click:

clickButton.addEventListener('click', eventHandler, false);

1	clickButton.addEventListener('click', eventHandler, false);

A última coisa é especificar o nome da função que será chamada quando este evento for disparado. Por exemplo, displayDialog:

clickButton.addEventListener('click', displayDialog(), false);

1	clickButton.addEventListener('click', displayDialog(), false);

O último argumento diz respeito às fases de um evento, capturing e bubbling, mas este é um assunto tão importante que merece ser tratado em outro artigo. Na verdade, não saber, precisamente, sobre este terceiro argumento, não atrapalha o entendimento inicial sobre JavaScript events, então, fica para um artigo à parte (que será publicado em breve).

Muito bem, a declaração para escuta de um evento agora está completa! Após esta linha de código ser executado, o documento está pronto para ouvir o evento clique no botão clickButton e chamar a função displayDialog() quando for necessário.

Agora, há apenas uma coisa muito importante para levar em consideração…

Manipuladores de Evento e Argumentos de Evento

A função que é chamada quando um evento que está sendo ouvido é disparado é conhecido como o Manipulador de Eventos (event handler). No exemplo, você já viu atavés de addEventListener, o manipulador de eventos é chamado displayDialog e esta função é o seguinte:

function displayDialog(e) {
    alert('You clicked me!');
}

function displayDialog(e) {

alert('You clicked me!');

}

Observe que a declaração da função é praticamente o mesmo que qualquer outra função que possa ser declarada; a única diferença é que a função recebe um único argumento, conhecido como argumentos de evento (ou “eventargs”, para facilitar). Estes argumentos de evento fornecem mais detalhes sobre o evento, em si, e é possível usar esses detalhes para fazer o manipulador de eventos um pouco mais inteligente e útil. O atual manipulador de eventos do exemplo não é muito inteligente porque ele não faz nada com os argumentos do evento, mas, certamente, muitos dos que você irá criar serão melhores do que isso.

No exemplo, o argumento de evento é referenciado pela variável e, mas você pode escolher qualquer nome que considere adequado:

function displayDialog(isNyanCatReal) {
    alert('You clicked me!');
}

function displayDialog(isNyanCatReal) {

alert('You clicked me!');

}

Entretanto, é, mais ou menos, um padrão entre os programadores usar dessa maneira, e a maioria dos garotos legais por aí também usa assim; então, deixe estar… :-)

De qualquer maneira, os argumentos de evento contêm propriedades que são relevantes ao evento que foi disparado. Um evento disparado por um clique do mouse terá propriedades diferentes em seus argumentos do evento, quando comparado a um evento disparado por uma tecla do teclado, por exemplo. A maioria dos eventos terá seu próprio comportamento especializado, mas existem algumas propriedades comuns a todos os eventos.

As mais populares desses propriedades comuns são:

type. O tipo de evento que se está lidando;
target. O elemento que disparou o evento.

Existem algumas outras importantes que serão vistas em artigos posteriores, mas este já é um bom começo. Abaixo, uma pequena modificação na função displayDialog() para usar as propriedades de evento type e target:

function displayDialog(e) {
    window.alert('The event (' + e.type + ') was fired from ' + e.target.id + '.');
}

function displayDialog(e) {

window.alert('The event (' + e.type + ') was fired from ' + e.target.id + '.');

}

Que, quando executada no navegador, mostra:

Como é possível ver, o tipo de evento é click e o id do elemento que disparou o evento é clickButton. Este não é o exemplo mais útil do mundo, mas serve para explicar o ponto de vista.

Eventos comuns

Aqui está uma tabela com alguns dos eventos mais comuns que você pode escutar e interagir com:

Evento	É disparado…
click	quando é pressionado e liberado o botão primário do mouse, trackpad, etc.
mousemove	sempre que o cursor do mouse se move.
mouseover	quando o cursor do mouse é movido para sobre algum elemento.
mouseout	quando o cursor do mouse se move para fora dos limites de um elemento.
dblclick	quando acontece um clique duplo com o mouse, trackpad, etc.
DOMContentLoaded	quando o DOM do documento está totalmente carregado (mais sobre isso num tutorial futuro).
load	quando todo o documento (DOM e recursos externos como imagens, scripts, etc) está totalmente carregado.
keydown	quando uma tecla no teclado é pressionada.
keyup	quando uma tecla no teclado é liberada (depois de pressionada).
scroll	quando há “rolagem” (scroll) num elemento.

Como mencionado anteriormente, cada um desses eventos contêm algumas propriedades personalizadas como parte de seus argumentos de evento que dão maior controle sobre o que o evento está fazendo.

Para uma lista mais completa de todos os eventos que são suportados, dê uma olhada na seção Event Types do documento Document Object Model (DOM) Level 3 Events Specification do W3C – e uma tabela de compatibilidade de eventos também pode ser bastante útil.

Conclusão sobre Eventos em JavaScript

E isso é o que há para dizer num artigo introdutório sobre Eventos em JavaScript. Recapitulando, existe a função addEventListener(), que lhe permite registar uma função de manipulador de evento (event handler) que será chamada quando um evento é disparado; quando esse evento é acionado, qualquer código dentro de seu manipulador de eventos é executado e sua aplicação reage ao evento que foi disparado.

Foi comentado que outros artigos sobre o tema serão escritos posteriormente; então, fique ligado no desenvolvimento para web e saiba quando esses artigos forem publicados para que você possa aprimorar seus conhecimentos em JavaScript!