3.0 beta 2

Events

ActiveWidgets objects receive DOM events from the underlying html elements, trigger property change events and also allow raising custom events.

Listening to events

The event handlers attached to the prototype object of the superclass are inherited by the derived classes.

Adding event handlers

To add an event handler use on() method.

var button = new AX.Button({
    text: 'ok'
});

button.on('click', function(){
    alert(this.text());
});

The event handler is called with this keyword referring to the object, triggering the event.

Removing event handlers

To remove an event handler you have to call off() method with the same event name and handler function that were used to add it.

var handler = function(){
    // ...
};

// add an event handler
obj.on(name, handler);

// remove it
obj.off(name, handler);

Triggering events

To raise a custom event call fireEvent() method. You can also include a second argument, which will be passed to event handlers.

obj.fireEvent('myevent', params);

Property change events

Any property will trigger the event with the same name when the value of the property changes (due to the assignment).

var obj = new AX.Object({
    myProperty: 123
});

obj.on('myProperty', function(){
    alert(this.myProperty());
});

obj.myProperty(456);

DOM events

ActiveWidgets objects receive DOM events from the underlying HTML elements.

var obj = new AX.Component({
    id: 'test'
});

obj.on('mouseover', function(){
    // do something
});