“A felicidade é qualquer coisa que depende mais de nós mesmos, do que das circunstâncias e das eventualidades da vida." - Júlio Dantas

Manipulação de eventos é uma importante parte de uma aplicação JavaScript. Todo JavaScript Front-End é ligado à interface de usuário por meio de eventos, então a maioria dos desenvolvedores web gastam boa parte do tempo criando e modificando eventos. Apesar dessa importância, manipulação de eventos não tem recebido a atenção devida, resultando em código muito dependente do ambiente disponível no momento em que o evento é disparado, tornando-se difícil de manter e testar.

Exemplo de Uso Comum

Não é raro encontrar código como o abaixo:

O que há de errado com o código acima?

Aparentemente nada, a função handlerClick é pequena e pode ser reutilizada para lidar com eventos de quantos elementos desejarmos. Mas existe um problema, a lógica da aplicação é mostrar uma mensagem. Mostrar uma mensagem é uma ação que pode ser disparada por quaisquer eventos. Por que, então, restringi-la a uma resposta a um clique?

Separando a Lógica da Aplicação

O trecho de código acima ficaria melhor representado e teria mais chances de reaproveitamento se fosse feito o seguinte:

var MyApplication = {  
    handleClick: function(event) {
        this.showMessageBox(event);
    },
    handleMouseover: function(event){
        this.showMessageBox(event);
    },
     showMessageBox: function(event) {
        var messageBox = document.getElementById("message");
        messageBox.style.position = 'absolute';
        messageBox.style.left = event.clientX + "px";
        messageBox.style.top = event.target.offsetTop - 50 + "px";
        messageBox.className = "alert alert-danger reveal";
        setTimeout(function(){
            messageBox.className = "alert alert-danger disappear"; 
        }, 400);
    }
}

Note que com a separação da lógica da aplicação, é possível mostrar a mensagem para eventos diferentes, como "click" e "mouseover". Existe, entretanto, ainda um grande e maior problema. O método showMessageBox depende do objeto "event". Isso quer dizer que, para sabermos se o método realmente está mostrando a mensagem, dependemos do ambiente. Dependemos de testes manuais na interface de usuário.

Se existe males na programação, pode ter certeza que dependência é um dos maiores. Dependência mal feita dificulta testes e, por conseguinte, a alteração e preservação de comportamento de um software que são praticamente a essência da rotina de trabalho de um desenvolvedor.

Não seria nada surpreendente se um cliente, por exemplo, quisesse preservar o comportamento para o evento "mouseover", mas desejasse alterar o comportamento do evento "click", alterando a cor da mensagem e também a distância dela em relação ao elemento clicado. Fazer isso na conjetura atual significaria encher o método "showMessageBox" de condicionais. Uma solução muito melhor seria rever a dependência.

Não Dependa do Objeto Event

Passar o objeto evento como parâmetro gera uma cadeia de dependência indesejada. Dessa forma, no exemplo anterior o método "showMessageBox" é mal concebido. Melhor seria a implementação a seguir:

Note o quanto o método "showMessageBox" ficou fácil de testar agora. Tudo o que é preciso é uma linha para invocar MyApplication.showMessageBox() e já podemos verificar se a mensagem aparece como desejado. Esse é o melhor dos mundos para o programador, um código fácil de alterar e fácil de reaproveitar.

Conclusão

Se em um pequeno exemplo como esse, já deu pra perceber o quanto pode ser interessante separar a lógica da aplicação da manipulação de eventos, você pode imaginar o quanto isso ajuda um programador em aplicações de grandes proporções. Sendo assim, se você pretende ser um grande programador, se prepare desde já para ser capaz de escrever grandes aplicações: use boas práticas sempre que tiver oportunidade.

Veja Também

Continue conhecendo boas práticas de Javascript em:

• 6 Boas Práticas Que Todo Profissional JavaScript Deveria Conhecer.