The first is the listening and dispatching of events. Right now, to add an event dispatcher for a sprite as well as listen, you would write it in about three lines:
//Listening
mySprite.addEventListener(MouseEvent.CLICK, onClick);
//Dispatching
var e:Event = new Event(MouseEvent.CLICK);
dispatchEvent(e);
With the Element class, it is condensed down to:
//Listening
myElement.click(onClick);
//Dispatching
myElement.trigger(ElementEvent.CLICK);
//Or, even easier...
myElement,click(); //if no function is set the element will, instead, trigger
Now even though you are only saving one line of code, there is more. Yes, much more. Instead of having to import various Event classes such as Event, MouseEvent, KeyboardEvent, IOErrorEvent, etc., you only need to import a single class, ElementEvent.
The ElementEvent contains all the events to be used in an element. It also sends vital information with to prevent the use of so many global variables.
Each ElementEvent has three objects, data, params and event. By default, the data object from an element is saved as the params and the actual event, in this case the MouseEvent, would be saved in the event property. Just like the element, you can send any data along with an event using the trigger and the data property.
//Sending data with an event
//First create an object with the data
var obj:Object = {myVariable:'Example'};
//Then dispatch the event, or trigger
myElement.trigger(ElementEvent.CLICK, obj);
The called function called would look like:
private function onClick(e:ElementEvent):void {
//You can get an element the same way as you normally would
var myElement:Element = e.target as Element;
//Your variable above can be retrieved
trace(e.data.myVariable);
//An element variable can also be retrieved either two ways
trace(myElement.data.myVariable);
trace(e.params.myVariable);
}
Shortcuts
Shortcuts include: change, click, complete, dblclick, error, finish, focus, hover, init, keydown, keypress, keyup, loaded, mousedown, mousemove, mouseout, mouseover, mouseup, progress, resize, scroll, select, submit, toggle, unfocus, and unload.
The shortcuts are all self explanatory but two of them require two functions instead of one. These are the hover and the toggle.
//Toggle triggers the first function on the first click and when clicked again, triggers the second event. If clicked a third time, triggers the first event again, etc.
myElement.toggle(onFirstClick, onClickAgain);
//Hover triggers the first event when the mouse is over the element. The second event is triggered when the mouse is out.
myElement.hover(onOverElement, onOutElement);
