AS3: Eine Funktion für mehrere EventListener verwenden (Button-Navigation)

Einer der Vorteile von Actionscript 3 ist das flexibel einsetzbare Eventsystem. Jedoch benutzt man selten die Funktionen des Event-Objektes! So lassen sich mehrere EventListener mit einer einzigen Funktion verarbeiten. Ausgangspunkt meines Beitrages ist eine kleine Homepage mit 3 Buttons und den Seiten: News, „Über mich“ und Impressum.

Der Standard-Weg

Viele Designer und Programmierer lesen in Tutorials und Howto’s, wie man EventListener auf einem Objekt anwendet. Im Normalfall sieht das für den News-Button dann so aus:

// News_btn ist der Name der Instanz
News_btn.addEventListener(MouseEvent.CLICK, clickNews);

function clickNews(e:MouseEvent):void
{
	// hier passiert etwas
}

Verwendet man nun mehrere Buttons wird der Code unübersichtlich und schwer wartbar.

// News_btn,  About_btn, Impressum_btn ist der Name einer Instanz eines Buttons
News_btn.addEventListener(MouseEvent.CLICK, clickNews);
About_btn.addEventListener(MouseEvent.CLICK, clickAbout);
Impressum_btn.addEventListener(MouseEvent.CLICK, clickImpressum);

function clickNews(e:MouseEvent):void
{
	// hier passiert etwas
}

function clickAbout(e:MouseEvent):void
{
	// hier passiert etwas
}

function clickImpressum(e:MouseEvent):void
{
	// hier passiert etwas
}

Der elegante Weg

Man benutzt einfach nur eine Funktion für alle EventListener von Buttons:

// Eventlistener hinzufuegen
// News_btn,  About_btn, Impressum_btn ist der Name einer Instanz eines Buttons
News_btn.addEventListener(MouseEvent.CLICK, click);
About_btn.addEventListener(MouseEvent.CLICK, click);
Impressum_btn.addEventListener(MouseEvent.CLICK, click);

// Die Funktion um das Clickevent zuverarbeiten
function click(e:MouseEvent):void
{
	// alte Seite ausblenden
	hiding();
	
	// hier gibt es verschiedene Varianten, ich stelle 3 vor

	// Variante 1 - nach dem Name der Instanz filtern
	switch(e.currentTarget.name)
	{
		case "News_btn":
			News_Page.alpha = 1.0;
			break;
		case "About_btn":
			About_Page.alpha = 1.0;
			break;
		case "Impressum_btn":
			Impressum_Page.alpha = 1.0;
			break;
	}
	
	
	// Variante 2  - nach dem Typ der Instanz filtern
	switch(e.currentTarget)
	{
		case News_btn:
			News_Page.alpha = 1.0;
			break;
		case About_btn:
			About_Page.alpha = 1.0;
			break;
		case Impressum_btn:
			Impressum_Page.alpha = 1.0;
			break;
	}	
	
	// Variante 3 - nach dem Text im Button filtern
	var btn:Button = e.currentTarget as Button;
	
	switch(btn.Output_txt.text)
	{
		case "News":
			News_Page.alpha = 1.0;
			break;
		case "Über mich":
			About_Page.alpha = 1.0;
			break;
		case "Impressum":
			Impressum_Page.alpha = 1.0;
			break;
	}
}

Anhand des Event-Objetes kann ich den entsprechenden Button identifizieren und darauf reagieren. So genügt eine einfache Funktion mit einer Switch-Case Anweisung, um die geforderte Funktionalität abzubilden.

Das Ergebnis

[download id=“3″ format=“2″]