Die Zeiten, in der die Event-Handler, wie z. B. der Click-Handler*, sich im HTML-Quellcode befinden, gehören der Vergangenheit an. Für eine saubere Trennung zwischen Auszeichnungssprache und Programmiersprache sowie eine bessere Übersichtlichkeit ist es empfehlenswert, die Event-Handler an einer zentralen Stelle zu pflegen. Um dies zu ermöglichen stehen uns ab HTML 5 die data-Attribute zur Verfügung.

* = anstelle von „click“ können auch „mouseover“ oder „dblclick“ verwendet werden.

Mit den beliebig definierbaren data-Attributen können wir Elementen weitere Informationen mitgeben, die weder für den Anwender sichtbar sind noch von Suchmaschinen ausgewertet werden. Sie dienen lediglich der Zuordnung von Werten zum Element, die ausschließlich per Programmiersprache oder CSS wieder ausgelesen werden können.

<h1>Bitte Sprache auswählen</h1>
<div id="language">
    <div><input type="button" data-language="de_DE" value="deutsch"></div>
    <div><input type="button" data-language="en_GB" value="englisch"></div>
    <div><input type="button" data-language="ru_RU" value="russisch"></div>
    <div><input type="button" data-language="tr_TR" value="türkisch"></div>
    <div><input type="button" data-language="ar_XA" value="arabisch"></div>
</div>
 
<div><input type="button" id="lang_current" value="aktuelle Sprache beibehalten"></div>

In einer Javascript-Funktion, die im folgenden Beispiel „initEventhandler“ genannt wurde werden nun mit sehr wenig Code alle Event-Hanlder für die ganze Seite zentral an nur einer Stelle definiert.

Die Verwendung der Methode „on“ erlaubt es, unabhängig von der Anzahl der Auswahlmöglichkeiten, mit nur einer Funktion für alle im div „language“ befindlichen Schaltflächen einen Click-Handler zu erzeugen. Für später hinzugefügte (oder entfernte) Schaltflächen muss also der Javascript-Teil nicht mehr angepasst werden. Ein weiterer Vorteil ist, dass dynamisch nachgeladene Inhalte, z. B. durch ajax, ebenfalls berücksichtigt werden, da das Event nicht an den einzelnen Buttons, sondern an dem übergeordneten div zugeordnet wird.

Der Methode „on“ werden die folgenden 3 Parameter mitgegeben:

• events: Ein oder mehrere Events, auf die reagiert werden soll (z. B. „click“, „dbclick“ oder „mouseover“)
• selector: Der Selector, mit dem die Elemente identifiziert werden
• anonyme Funktion: Diese wird ausgeführt, wenn eines der oben festgelegten Events auf einen Selector ausgelöst wurde. Innerhalb dieser Funktion kann auf das Element mit „$ ( this )“ zugegriffen werden.

Mit der Methode „off“ können genauso einfach die mit „on“ erzeugten click-Handler wieder entfernt werden.

Im folgenden Beispiel werden die click-Handler zunächst erzeugt, beim Klick auf einen Button wird der im data-Attribute zugeordnete Wert in einer Dialogbox angezeigt und anschließend die click-Handler wieder der Button entfernt. Im konkreten Anwendugsfall sollte man zusätzlich den Schaltflächen eine CSS-Klasse „disabled“ mitgeben, damit der Anwender weiß, dass hier kein Event ausgeführt wird.

Beispiel:

function initEventhandler()
{
    $( '#language' ).on( 'click', 'input[type=button]', function() {
 
        alert( $( this ).data( 'language' ) + " wurde ausgewählt" );
        deleteEventhandler();
    })
}
 
function deleteEventhandler()
{
    $( '#language' ).off( 'click', 'input[type=button]' );
}
 
$( document ).ready( function() {
    initEventhandler();
} );

Dieses Beispiel erstellt gezielt für den Button mit der id „lang_current“ einen click-Handler.

function initEventhandler()
{
    $( '#lang_current' ).click( function() {
        alert( "aktuelle Sprache beibehalten" );
    } )
}
 
$( document ).ready( function() {
    initEventhandler();
} );