Manipulador de eventos no JavaScript

Recentemente tenho desenvolvido alguns formulários mais elaborados e não poderia de deixar registrado aqui esta dica. Pretendo escrever uma série de artigos relacionados com o dia-a-dia de um desenvolvedor Web.

Para quem vive trabalhando com formulários e suas validações, o uso de manipuladores de eventos com JavaScript pode ajudar na produtividade geral e trazer alguns benefícios diretos.

Se você já sabe do que se trata eventos, pule para a seção Eventos na prática. Caso contrário recomendo ler "O que são eventos?".

O que são eventos?

Eventos ou events são comportamentos de ações dos visitantes sobre um determinado elemento de uma página. Quando um usuário visita uma página e interage (clicando, digitando, movendo, etc.), está produzindo eventos.

Existem diversos eventos definidos para uso com JavaScript. Alguns são para uso restrito com algum elemento xHTML, como o caso do onSubmit que é usado somente com o elemento form. Abaixo listo alguns eventos principais (veja uma lista mais extensa):

Eventos na prática

Os eventos podem ser usados de forma inline, ou de forma externa, com o uso de algum manipulador de eventos.

Eventos inline

Na primeira forma, você define tudo diretamente na tag do elemento. Veja um exemplo:

<form onsubmit="javascript:alert(this.a.value);return false;">
	<input type="text" name="a" onkeyup="javascript:this.value=this.value.toUpperCase();" />
	<input type="submit" />
</form>

No exemplo acima foram definidos 2 eventos: onSubmit para o formulário e o onKeyUp para um campo do formulário. Se você precisa alterar depois alguma propriedade deste evento, deverá editar diretamente no código do seu formulário.

Utilizando manipulador de eventos

Uma outra maneira prática é com uso de manipuladores, criados afim de tornar o código mais flexível e organizado.

Neste exemplo uso o event listener criado por Carlos R. L. Rodrigues, que adiciona ou remove um evento sobre qualquer elemento. São disponibilizadas 2 funções:

addEvent(object: Object, event: String, handler: Function(e: Event): Boolean, [scope: Object = object]): Boolean

Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.

removeEvent(object: Object, event: String, handler: function(e: Event): Boolean, [scope: Object = object]): Boolean

Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.

Veja a seguir um exemplo com uso da função addEvent:

<script type="text/javascript" src="/path/to/event-listener.js"></script>

<form>
	<input type="text" name="a" />
	<input type="submit" />
</form>

<script type="text/javascript">
var f = document.forms[0];
addEvent(f, "submit", function( e ) { alert(f.a.value);return false; });
addEvent(f.a, "keyup", function( e ) { f.a.value=f.a.value.toUpperCase(); });
</script>

Toda a validação fica externa ao formulário. Desta forma, você também pode inserir tal validação num arquivo JavaScript externo. Neste caso, devo atentar que você precisará carregar o arquivo externo depois do elemento a ser modificado ou, caso deseje incluir no head da página, declare a execução apenas quando a página carregar completamente (com uso do evento onLoad), caso contrário o objeto não será encontrado.

Você ainda pode definir uma função e passar como parâmetro no addEvent (no exemplo acima foi criado uma função inline para demonstração).

Da mesma forma que adicionei os eventos à um formulário, poderia também adicionar numa janela (window), num documento (document), etc.

Flexibilidade e organização

Como afirmado, um dos grandes benefícios com o uso do event listener é a flexibilidade nas alterações posteriores e a organização do código xHTML.

Até a próxima dica da série dia-a-dia de um desenvolvedor Web!