smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

jQuery: Zusätzliche Daten an Event-Handler übergeben

4. März 2013
Stephan
jQuery: Extra Daten an Event-Handler übergeben

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:

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?

Kommentare  
3 Kommentare vorhanden
1 JonasB schrieb am 5. März 2013 um 08:33 Uhr

Sehr elegante Methode, kannte ich auch noch nicht. Habe mir da bislang auch immer mit globalen Variablen beholfen, oder die Daten in der Funktion neu ermittelt. Das ist deutlich besser, danke fürs Teilen.

2 Stephan L. schrieb am 5. März 2013 um 19:38 Uhr

Manchmal ist man auch einfach betriebsblind, obwohl die Lösung so nah liegt. Die bind-Funktion hatte ich sonst auch schon des Öfteren in der Doku nachgeschlagen, aber mir die Parameter eigentlich nie genau angeschaut. Zumal wenn es eilt man bzw. ich auch nicht immer die Zeit habe, noch alles im Detail nachzulesen. Da verwende ich dann auch ab und an mal ne “dirty” Lösung.

3 Flaschenzug schrieb am 17. März 2014 um 10:23 Uhr

War mir bisher nicht bewusst, danke für den Artikel hierzu.
Was mir bisher allerdings noch nicht klar ist – kann ich auch direkt eine Variable über die .ready Funktion übergeben?
(Durch die Suche nach diesem Problem bin ich bei deinem Artikel gelandet)

Aber ich vermute, dass das nicht funktioniert ?
(jQuery Api sagt: “.ready( handler )”)

Somit kann wohl nur ein Handler übergeben werden.
Falls hierzu jemand eine Lösung kennt freue ich mich über eine Antwort.

Aber unabhängig davon: Danke für das zusammentragen der Informationen in dem Beitrag.

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!