Uma das premissas mais importantes pensadas ao desenhar mediante o uso de padrões é a separação de camadas lógicas, ou seja, por um lado temos o projetado, que se representa mediante linguagem (x)html, por outro lado está o desenho visual, que normalmente se anexa mediantes folhas de estilo (css) até aqui tudo está muito claro.

Porém, o que ocorre com o comportamento que se quer atribuir a alguns objetos do documento, aqui é onde entra em jogo a linguagem JavaScript.

Imaginemos por exemplo que temos um link ao que queremos dar uma funcionalidade um pouco diferente ao resto, abri-lo em uma janela nova por exemplo, na maioria das vezes o primeiro que nos vem em mente é fazer algo mais ou menos similar ao seguinte:

<a href="popup.html" onclick="window.open('popup.html', 'width=400,height=450,resizable=yes')">Abrir popup</a>

Lamentavelmente, esta linha acaba com toda nossa teoria de separação de camadas, mas felizmente, existem maneiras alternativas para atribuir eventos usando JavaScript. No caso concreto deste exemplo uma maneira mais limpa de realizar o mesmo necessitava algo mais de código para poder se realizar.

Primeiro, teremos que atribuir uma identidade única ao link, e logo mediante o DOMDocument Object Model atribuiremos o evento a tal id, algo mais ou menos assim.

<a href="popup.html" id="mypopup">Abrir popup</a>

<script type="text/javascript">

   var x = getElementByID('mypopup');
   
   x.onclick = function() {
   
    window.open('popup.html', 'width=400,height=450,resizable=yes')
   
   }

</script>

Simples, não é? Bom, talvez não seja tão seja tão simples, porém graças a mentes inquietas como a de Ben Nolan, dispomos de algumas ferramentas que sim que fazem com que seja uma tarefa simples.

Refiro-me a behaviour, uma biblioteca JavaScript baseada na função document.getElementsBySelector escrita por Simon Willison. Este fantástico "pedaço de código" nos permite esquecermos de programar complexas funções que atribuem eventos segundo classe, id ou selector.

Continuando com o exemplo anterior, se incluirmos esta biblioteca podemos conseguir o mesmo efeito atribuindo a função diretamente ao id selecionado.

<script type="text/javascript">

   var myrules = {
   
      '#mypopup' : function(element){
      
         element.onclick = function(){
         
            window.open('popup.html', 'width=400,height=450,resizable=yes')
         
         }
   
      }

};

Behaviour.register(myrules);

</script>

Pessoalmente, acho que é uma biblioteca de imensa utilidade, agora só falta ver como poder tirar proveito dela da melhor forma possível.