Bei MooTools handelt es sich um ein Framework mit welchem man sehr schön Klassen basierte Strukturen in JavaScript abbilden kann. Bei der Definition von benutzerdefinierten Events ist die Dokumentation leider etwas dünn, so das ich dort etwas probieren musste, bis ich zum richtigen Ergebnis gekommen bin.
Gegeben sei dabei ein Projekt mit einer „index.html“ Datei sowie der JavaScript Datei „explosive.js“ welche die Klasse „Explosive“ enthält. Die Klasse sieht dabei im Quelltext so aus:
var Explosive = new Class({
Implements: [Events],
tntequivalent: 0,
//Constructor
initialize: function(equivalent) {
this.tntequivalent = equivalent;
},
//Methods
detonate: function(){
this.fireEvent('explode');
},
detonateWithInfo: function(){
this.fireEvent('explode', this.tntequivalent);
}
});
In dieser Klasse gibt es die Eigenschaft „tntequivalent“ welche die Sprengkraft unser Bombe definiert und im Konstruktor gesetzt wird. Die Funktionen „detonate“ und „detonateWithInfo“ zünden die Bombe und senden das Event „explode“ wahlweise mit der Informationen über die Sprengkraft.
Die dazu passende „index.html“ sieht dabei so aus:
<!DOCTYPE html>
<html>
<head>
<title>Mootools Event Test</title>
<meta charset="utf-8" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat.js"></script>
<script type="text/javascript" src="explosive.js"></script>
</head>
<body>
<script type="text/javascript">
function onExplode(object)
{
if(object==null)
{
alert("Bomb is exploded.");
}
else
{
alert("Bomb is exploded, with " + object + " tons of TNT equivalent.");
}
}
var bomb = new Explosive(100);
bomb.addEvent('explode', onExplode);
</script>
<form>
<input type="button" value="Detonate bomb" onClick="bomb.detonate();">
<input type="button" value="Detonate bomb with info" onClick="bomb.detonateWithInfo();">
</form>
</body>
</html>
Hier wird im JavaScript-Bereich der Klasse eine Funktion „onExplode“ angelegt, welche das Event am Ende entgegennehmen soll. Darunter wird eine Instanz der Klasse „Explosive“ mit dem Namen „bomb“ angelegt. Dieser Instanz sagen wir das dass Event „explode“ an die Funktion „onExplode“ weitergereicht werden soll.
Nun werden noch zwei Buttons definiert, welche die auslösenden Funktionen aufrufen. Einmal wird die Funktion „onExplode“ mit einem Parameter und einmal ohne aufgerufen. In diesem Parameter steckt in diesem Fall die Sprengkraft der Bombe, so das diese mit ausgegeben werden kann. Und schon ist man mit seinem ersten Event fertig.
Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/MooTools
