Desenvolvimento - Javascript

Eventos em Javascript: Tratando eventos

Veja neste artigo como realizar o tratamento de eventos na linguagem Javascript, controlando o que deve ocorrer em resposta a uma ação como o clique em um botão.

por Joel Rodrigues


Introdução

Eventos são procedimentos executados em consequência a uma ação. Por exemplo, quando o usuário clica em um botão, é disparado um evento deste elemento chamado “click”. Quando se pressiona uma tecla sobre outro elemento, é disparado um evento chamado “keydown” e quando a tecla é solta, o evento “keyup” é disparado.

Várias ações, não só na interface gráfica, fazem com que eventos sejam disparados. Então, sabendo que algo é feito quando certas ações são executadas, pode ser interessante e necessário ter controle sobre esta situação. Nesse ponto entra o TRATAMENTO DE EVENTOS, que consiste em definir o que será feito quando um determinado evento for disparado.

Algumas linguagens que possuem ambientes de desenvolvimento RAD (Rapid Application Development) permitem acessar esses eventos de forma bastante prática, através da interface gráfica do IDE. Porém, às vezes é preciso controlar esses eventos apenas pelo código, sem auxílio de ambiente gráfico, o que é muito comum para a linguagem Javascript. Por isso é importante conhecer a sintaxe da linguagem para esse tipo de ação.

O tratamento de eventos geralmente é feito a partir de funções nas quais se implementa o código que deve ser executado quando o evento ocorrer. Essas funções são chamadas de “event handlers” (tratadores de evento).

A seguir veremos como efetuar o tratamento de eventos de elementos como botões e inputs HTML a partir de um script Javascript, garantindo uma maior interação com o usuário.

Propriedades de eventos

Na linguagem HTML, os objetos possuem propriedades que dão acessos aos seus eventos. Essas propriedades têm o nome iniciando com “on”, seguido do nome do evento. Por exemplo, a propriedade “onclick” dá acesso ao evento click de um elemento.

O

bservação: apenas a nível de curiosidade, o “on” no nome dessas propriedades indica que elas permitem definir algo que vai ocorrer quando o evento ocorrer. Na tradução para o português temos que “on” significa “em/no/na”. Ou seja, algo que vai ocorrer “NO CLIQUE” do botão, ou “NO PRESSIONAMENTO DA TECLA” em um input.

Um infográfico que apresenta algumas dessas propriedades pode ser encontrado em Atributos de tratamento de eventos da HTML5 - Infográfico.

Tratando eventos diretamente nas propriedades

A linguagem Javascript permite que o código a ser executado em um evento seja informado diretamente na propriedade que lhe dá acesso. Essa forma é utilizada quando se tem poucas instruções a serem executadas e quando as expressões são curtas e de fácil compreensão.

Na listagem a seguir adicionamos um código à propriedade onclick de um botão para que seja exibida uma mensagem quando o usuário clicar sobre ele.

Listagem 1: Tratando clique do botão na propriedade

<!doctype html>
<html>
<head>
	<meta charset="UTF-8"/>
</head>
<body>
	<button id="btn" onclick="alert('Seja bem vindo(a) ao Linha de Código.')">Clique aqui</button>
</body>
</html>

É importante notar que foram utilizadas aspas duplas para definir o valor da propriedade e aspas simples internamente. Essa é a sintaxe da HTML para essas situações, sempre que se necessitar usar aspas dentro do código, essas devem ser simples, pois as duplas são usadas externamente.

Código executado direto na propriedade do evento

Figura 1: Código executado direto na propriedade do evento

Como vimos, apenas uma instrução foi executada e por isso foi simples e eficiente colocar o código direto na tag. Porém, caso existissem outras expressões a serem executadas, com cálculos e outros processamentos, se tornaria inviável escrever tudo no interior da propriedade. Para esses casos, veremos que é possível criar uma função (event handler) e chamá-la a partir da propriedade de evento.

Definindo event handlers

Os event handlers, como já foi dito, são funções que contém o código a ser executado na ocorrência de um evento. Em Javascript, podemos criar uma função utilizando a sintaxe padrão e fazer a chamada a essa função na propriedade de evento, informando seu nome e possíveis parâmetros no lugar onde se colocaria o código diretamente (caso da Listagem 1).

Na Listagem 2 criamos uma função chamada “exibirMensagem” que apresenta uma caixa de diálogo (alert) com a data atual. Nessa função foram usadas apenas duas linhas de código, mas fica claro que caso fosse preciso, várias outras instruções poderiam ser executadas.

Listagem 2: Tratando o evento com uma função

<!doctype html>
<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript">
	function exibirMensagem()
	{
		var data = new Date();
		alert(data.toString());
	}
	</script>
</head>
<body>
	<button id="btn" onclick="exibirMensagem();">Clique aqui</button>
</body>
</html>

Ao clicar no botão, a função é chamada e o resultado é o que se vê na Figura 2.

Código executando dentro de uma função

Figura 2: Código executando dentro de uma função

Tratando eventos com a função addEventListener

A função “addEventListener”, nativa da linguagem Javascript, permite ligar um evento de um objeto a uma função que fará seu tratamento. Usando essa função, não é preciso definir a propriedade de evento do objeto diretamente, pois isso será feito via código, dinamicamente. No exemplo a seguir, temos a mesma função exibir mensagem, mas dessa vez a ligamos ao evento click do botão usando a addEventListener.

Listagem 3: Usando a função addEventListener

<!doctype html>
<html>
<head>
	<meta charset="UTF-8"/>
</head>
<body>
	<button id="btn">Clique aqui</button>

	<script type="text/javascript">
		function exibirMensagem()
		{
			var data = new Date();
			alert(data.toString());
		}

		
		var btn = document.getElementById("btn");

		btn.addEventListener("click", exibirMensagem);
	</script>
</body>
</html>

Nesse caso foi preciso usar a função “getElementById” para selecionar o objeto cujo evento seria tratado, no caso, o botão.

O primeiro parâmetro da addEventListener é o nome do evento que será tratado, nesse caso, “click”. O segundo é o nome da função que será executada.

Essa forma dá mais flexibilidade ao código, pois deixa o código HTML independente do Javascript. Todas as modificações necessárias são feitas no script, sem precisar alterar a tag.

Conclusão

Ao longo desse artigo pudemos ver que o tratamento de eventos na linguagem Javascript é consideravelmente simples e flexível, podendo ser feito de várias formas.

Até a próxima.
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).