Multiple Actions: Einzahl versus Mehrzahl vom 04.09.2009 08:40 Uhr

Mit MooTools kann man Elementen zum Beispiel Events zuweisen oder ihre Style Eigenschaften verändern. Wenn man nur je ein Attribut verändern möchte, sagen wir eine Style Eigenschaft, dann macht man das so:

$('foo_id').setStyle('backgroundColor', '#009900');
Wenn man aber zum Beispiel die Hintergrundfarbe, die Höhe des Containers und die Schriftfarbe auf einmal ändern möchte, dann braucht man dafür nicht drei mal die setStyle() Funktion aufrufen, sondern kann statt dessen die Multiple Actions Variante verwenden. Mootools hat diese extra für diese Fälle mit ins Programm aufgenommen.

$('foo_id').setStyles( { 'backgroundColor': '#009900', 'color': '#990000', 'height': '200px' });
So kann man beliebig viele Styles auf einmal verändern und muss nur einmal die dafür verantwortliche Funktion aufrufen. Bei setStyles() sieht man noch nicht den Nutzen dahinter. Deutlicher word das Ganze aber, wenn wir uns die addEvent() Funktion ansehen. Wenn man einem Element mehrere Events zuweisen möchte, weil es zum Beispiel ein onClick, ein onMouseOver/onMouseEnter und ein onMouseOut/ onMouseLeave geben soll, dann macht es und Mootools mit der Multiple Actions Variante sehr einfach.

$('foo_id').addEvents( { 'mouseOver': function() { $('foo_id').getElement('div.foo_child').setStyle('height', '50px'); }, 'mouseOut': function() { $('foo_id').getElement('div.foo_child').setStyle('height', '20px'); }, 'click': function() { window.open('/foo/', '_self'); } });
Durch die Multiple Actions Function sind alle Events, die einem Element zugewiesen werden sollen einfach zu erkennen und der Code sieht ordentlich aus, so das auch ein anderer Entwickler damit arbeiten k