getButterfly
Resume

JSquared Demo – Events

DEMOS: EVENTS

Please ensure you read the JSquared documentation for full details on using each JSquared method and object described below

DOM EVENTS

ADD A CLICK EVENT TO AN HTML ELEMENT

document.getElementById("myID").addEvent("click", function(){ alert("you clicked me") });

FIRE A PARTICULAR EVENT FOR A PARTICULAR NODE

document.getElementById("myID").fireEvent("click");

ADD A MOUSEOVER EVENT TO AN HTML ELEMENT

document.getElementById("myID").addEvent("mouseover", function(){ alert("you moused over me") });

ADD EVENT HANDLING TO CUSTOM OBJECT

Start by creating a new event

var myEventHandler = new J2.Core.Event();

We can now listen to that event by adding a handler in the most basic fashion

myEventHandler.listen( function() { /*event has been fired*/ } );

Later we can fire the event and invoke all the listeners

myEventHandler.fire();

When firing an event, you can pass parameters to the fire method which will then get passed into each handler

myEventHandler.fire( { /*an object*/ }, "event fired by system component" );

SETTING SCOPE AND SORTING ORDER OF HANDLERS

When adding a handler to a custom event you can specify the scope or context that the handler will execute in when the event is fired by passing it into the listen method as the second parameter. DOM event handlers always fire in the scope of the DOM element that raised the event.

var myEventHandler = new J2.Core.Event();
myEventHandler.listen( function() { /*event has been fired*/ }, scope );

As well as defining context, you can define the order that event handlers will be executed for custom events and DOM events by passng a number as the third parameter to the listen method or the addEvent method. The events are then sorted by their defned sort index. If you do not pass a sort index, then 99 is used as a default. Events are sorted in descending order.

var myEventHandler = new J2.Core.Event();
//add a handler to fire before all default sort indexed handlers
myEventHandler.listen( function() { /*event has been fired*/ }, scope, 100 );
//add a handler to fire after all default sort indexed handlers
document.getElementById("myID").addEvent("click", function(){ alert("you clicked me") }, 50);