Wissensarchiv für Entwickler

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Event-Handler mit jQuery ======

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.

====== data-Attribute in HTML 5 ======

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.

<code html>
<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>
</code>


====== click-Handler mit jQuery ======

===== click-Handler für mehrere Button erzeugen - und wieder entfernen =====

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

<code javascript>
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();
} );
</code>

----

===== click-Handler für einen Button erzeugen =====

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

<code javascript>
function initEventhandler()
{
    $( '#lang_current' ).click( function() {
        alert( "aktuelle Sprache beibehalten" );
    } )
}

$( document ).ready( function() {
    initEventhandler();
} );
</code>
Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
