Smart-Webentwicklung

Möchte man mittels jQuery auf ein bestimmtes Event reagieren, kann man die bind-Funktion bzw. die entsprechenden Shortcuts (z.B. click) verwenden.

Hierbei gibt man eine Funktion (auch als Event-Handler bezeichnet) an, die immer dann ausgelöst wird, wenn das entsprechende Event eintritt bzw. ausglöst wurde.

Des Öfteren kann es dabei nötig sein zusätzliche Daten an den Event-Handler zu übergeben. Nutzt man anonyme Funktionen als Event-Handler ist das generell kein Problem. Aktuell stand ich aber vor dem Problem, dass ich keine anonyme Funktion verwende und dennoch bestimmte Daten an den Event-Handler übergeben wollte.

Wie genau ihr solche extra Daten an eine nicht anonyme Event-Handler-Funktion übergeben könnt, zeige ich euch jetzt.

Anonyme- vs nicht anonyme Event-Handler-Funktionen

Schauen wir uns erst einmal beide Varianten an. Dazu ein kleines Beispiel:

<input type="button" name="button1" value="Button1" />

Klickt der Nutzer auf die Schaltfläche, soll in der Browser-Konsole eine Nachricht ausgegeben werden.

Im Fall eines anonymen Event-Handlers, könnte das so aussehen:

$(document).ready(function()
{
    bindButton();
});

function bindButton()
{
	var message = 'Du hast den Button angeklickt!';
	
	$('input').bind('click', function()
	{
		console.log(message)
	});
}

Nun das Ganze mittels einer nicht anonymen Funktion:

$(document).ready(function()
{
    bindButton();
});

function bindButton()
{
	var message = 'Du hast den Button angeklickt!';
	
	$('input').bind('click', buttonClicked(message));
}

function buttonClicked(message)
{
	console.log(message)
}

Wenn ihr die beiden Codes testet, werdet ihr feststellen, dass bisher nur die obere Variante funktioniert.

Das Problem mit der nicht anonymen Funktion ist, dass wir buttonClicked nicht direkt den Parameter message mit übergeben können. Das liegt daran, dass ein Event-Handler nur einen Parameter akzeptiert und dieser ein Event-Objekt sein muss.

Lösung: event.data

Erste Lösungsidee an die ihr vielleicht als erstes denkt, ist message als globale Variable zu definieren. Das funktioniert in der Tat ohne Probleme, aber im Normalfall solltet ihr auf globale Variablen verzichten. Falls ihr doch unbedingt globale Variablen einsetzen möchtet, dann optimalerweise unter einem eigenen Namespace: Avoid Cluttering the Global Namespace

Eine andere und wie ich finde bessere Lösung ist es dem Event-Objekt die zusätzlichen Daten – in unserem Fall message – mitzugeben.

Hierfür passen wir den Code wie folgt an:

$(document).ready(function()
{
    bindButton();
});

function bindButton()
{
	var message = 'Du hast den Button angeklickt!';
	
	$('input').bind('click', {message: message}, buttonClicked);
}

function buttonClicked(event)
{
	console.log(event.data.message)
}

Um dem Event-Objekt zusätzliche Daten mitzugeben, gibt es für die bind-Funktion einen dritten Parameter den wir nutzen können.

Nähere Informationen zu event.data findest in der jQuery API-Dokumentation.

Jetzt funktioniert auch unsere zweite Variante mit einem nicht anonymen Event-Handler.

Weiterführende Artikel

Hier noch zwei Artikel, die sich auch mit dieser Thematik beschäftigen:

• Passing data to jQuery events with event.data and custom $.Event object
• jQuery: passing elements to event handlers

Fazit

Ich muss zugeben, dass ich früher in solchen Fällen immer auf globale Variablen ausgewichen bin. Lag aber einfach auch daran, dass ich mir die Doku von jQuery nie richtig angeschaut habe und nicht gewusst habe, dass beim Einsatz von bind ein dritter Parameter mit extra Daten übergeben werden kann.

War euch bereits bewusst, dass auf so einfache Weise zusätzliche Daten an Event-Handler übergeben werden können?