Javascript Event-binding: Behaviour vs. Prototype

Das Javascript nicht in den HTML-Code gehört ist nicht für jeden Programmierer eine Selbstverständlichkeit. Doch macht es nicht nur die Wartung einfacher, sondern sorgt auch für verkürtzte Ladezeiten beim Seitenaufbau. Mit Ben Nolans Javascript Bibliothek Behaviour oder mit Prototype, lassen sich Events per Javascript an HTML-Objekte binden.

Mir ist Behaviour aus drei Gründen für diese Aufgabe lieber. Erstens lassen sich Elemente anhand der CSS-Selektoren #id oder .class – und damit auch Gruppen von Elementen – verdrahten und zweitens wird ein Element einfach übersprungen, wenn es nicht gefunden wird. Drittens kann ich in einem Abriss gleich mehrere verschiedene Events für ein Element festlegen.

Mit Behaviour den Event onclick für das Element #button festlegen. Es ist unerheblich, ob Element #button existiert.

Behaviour.register({
'#button' : function( el ) {
 el.onclick = function() {
  alert( el.id + ' wurde geklickt!' );
  return( false );
 },
 el.onmouseover = function() {
  alert( el.id + ' hat Mauskontakt!' );
  return( false );
 }
}
});

Alternativ lassen sich über den .class-Selektor ganzen Gruppen von Elementen Events zuweisen.

Behaviour.register({
'.buttons' : function( el ) {
 el.onclick = function() {
  alert( el.class + ' wurde geklickt!' );
  return( false );
 }
}
});

In Prototype würde das ganze wie folgt aussehen. Existiert #button nicht, gibt es einen Fehler, der das weitere Ausführen von Javascript behindert.

$( 'button' ).onclick = function() {
 alert( this.id + ' wurde geklickt!' );
 return( false );
}

Links zum Thema
http://www.bennolan.com/behaviour/
http://www.prototypejs.org/