Créer ses propres évènements javascript avec Prototype

Dans certains développements javascript, il peut être utile de transmettre des évènements personnalisés dans le DOM. Une telle programmation permettrait par exemple à d’autres scripts d’attraper ces évènements afin de réaliser des opérations spécifiques à des moments précis.

dom:loaded : l’évènement personnalisé de Prototype

Quoi de plus naturel que de présenter le seul évènement personnalisé de Prototype, mais pas des moindres : dom:loaded. Cet évènement est transmis par Prototype lorsque l’arbre DOM est chargé, ce qui permet de lancer des actions javascript sans avoir besoin d’attendre le téléchargement des éléments « lourds » de la page (images, flash, …). Son utilisation est très simple, puisqu’il suffit de placer un écouteur comme pour n’importe quel autre type d’évènement :

function doAnything( event ) {
  // faire quelque chose
}
document.observe( 'dom:loaded', doAnything );

Dans quel cas utiliser des évènements personnalisés ?

Dans de nombreux développement basés sur javascript, on est souvent habitué à utilisé des fonctions de callback, qui permettent d’utiliser une fonction spécifique à un moment particulier du code. D’ailleurs bien souvent, cette fonction de callback est nécessaire au bon déroulement de l’application.

Dans d’autres cas, on peut préférer avertir qui veut bien que telle action s’est déroulée, libre aux autres scripts d’intercepter cette information et d’en faire ce que bon lui semble !

Prenons l’exemple d’un script générique permettant d’afficher ou de cacher un bloc selon son état :

function toggleElement( element ) {
  element = $( element );
  if( element.visible() ) {
    element.hide();
    element.fire( 'element:hided' );
  }
  else {
    element.show();
    element.fire( 'element:showed' );
  }
}

On pourrait avoir aucun ou mille autres scripts qui auraient la possibilité d’utiliser les évènements transmis pour effectuer des opérations quelconques :

$( 'elementId' ).observe( 'element:showed', function( event ){
  // doAnything
});
$( 'elementId' ).observe( 'element.hided', function( event ){
  // doAnything
});
toggleElement( 'elementId' );