Nota: Este artículo aborda una librería llamada "Behaviour" para hacer el Javascript no intrusivo (un concepto algo vago por cierto porque es algo un poco más simple de lo que el nombre sugiere). En todo caso, marcamos este artículo como obsoleto ya que la propia librería ha sido marcada como obsoleta por su creador.

En las propias palabras del creador de la librería Behaviour.js:

Behaviour.js era mi biblioteca para utilizar JavaScript no intrusivo mediante una combinación de una biblioteca de selectores CSS y algo de JavaScript sencillo. Esta funcionalidad ha sido adoptada y mejorada por todas las principales bibliotecas de JavaScript.

Personalmente utilizo jQuery, que a través del método .live(), permite realizar todas las funciones de Behaviour.js, incluyendo la aplicación automática de reglas cuando se añaden nuevos elementos al DOM.

Una de las premisas mas importantes planteadas al diseñar mediante el uso de estándares es la separación de capas lógicas, es decir, por un lado tenemos el maquetado, que se representa mediante lenguaje (x)html, por otra parte esta el diseño visual, que normalmente se adjunta mediantes hojas de estilo (css) hasta aquí todo esta muy claro.

Pero que ocurre con el comportamiento que se le quiera asignar a algunos objetos del documento, aquí es donde entra en juego el lenguaje JavaScript.

Imaginemos por ejemplo que tenemos un enlace al que le queremos dar una funcionalidad un poco diferente al resto, abrirlo en una ventana nueva por ejemplo, a la mayoría lo primero que nos viene en mente es hacer algo mas o menos similar a lo siguiente:

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

Lamentablemente esta linea acaba con toda nuestra teoría de separación de capas, por fortuna, existen maneras alternativas para asignar eventos usando JavaScript, en el caso concreto de este ejemplo una manera mas limpia de realizar lo mismo necesitaba algo mas de código para poder llevarse a cabo.

Primero tendremos que asignar una identidad única al enlace, y luego mediante el DOMDocument Object Model asignaremos el evento a dicha id, algo mas o menos tal que así.

<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>

Sencillo, ¿no? bueno, quizás no resulte tan sencillo, pero gracias a mentes inquietas como la de Ben Nolan, disponemos de algunas herramientas que si que hacen que resulte una tarea sencilla.

Me refiero a behaviour (enlace eliminado porque la librería ya no se puede descargar), una librería JavaScript basada en la función document.getElementsBySelector escrita por Simon Willison. Este fantástico “trozo de código” nos permite olvidarnos de programar complejas funciones que asignen eventos según clase, id o selector.

Continuando con el ejemplo anterior, si incluimos esta librería podemos conseguir el mismo efecto asignando la función directamente al id seleccionado,

<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>

Personalmente creo que resulta una librería de inmensa utilidad, ahora solo falta ver como poder sacarle partido de manera óptima.