Class: CustomEvents

Constructor

new CustomEvents()

Create a new CustomEvents instance

Source: core/CustomEvents.js, line 48

Examples

// Basic usage with custom class
class MyService extends CustomEvents {
    constructor() {
        super();
    }

    start() {
        this.dispatchEvent(new CustomEvent('start', {
            detail: { timestamp: Date.now() }
        }));
    }
}

const service = new MyService();
service.addEventListener('start', (e) => {
    console.log('Service started at', e.detail.timestamp);
});
service.start();

// Using with InfrontJS App
const app = new IF.App(container);

// Listen to framework events
app.addEventListener(CustomEvents.TYPE.READY, () => {
    console.log('App is ready');
});

app.addEventListener(CustomEvents.TYPE.BEFORE_STATE_CHANGE, (e) => {
    console.log('Changing from', e.detail.currentStateId, 'to', e.detail.nextStateId);
});

// Removing event listeners
const handler = (e) => console.log('State changed');
app.addEventListener(CustomEvents.TYPE.AFTER_STATE_CHANGE, handler);
// Later...
app.removeEventListener(CustomEvents.TYPE.AFTER_STATE_CHANGE, handler);

Members

(static, readonly) TYPE

Built-in event types used by InfrontJS framework

Properties

Name	Type	Description
`READY`	string	App initialization complete
`POPSTATE`	string	Browser back/forward navigation
`BEFORE_STATE_CHANGE`	string	Before state transition (cancelable)
`AFTER_STATE_CHANGE`	string	After state transition complete
`BEFORE_LANGUAGE_SWITCH`	string	Before language change
`AFTER_LANGUAGE_SWITCH`	string	After language change complete
`ON_STATE_NOT_FOUND`	string	When no matching state found (404)

Source: core/CustomEvents.js, line 70

Example

// Using built-in event types
app.addEventListener(CustomEvents.TYPE.READY, () => {
    console.log('App ready');
});

Methods

addEventListener(type, listener)

Add an event listener for a specific event type

Parameters:

Name	Type	Description
`type`	string	Event type to listen for
`listener`	function \| EventListenerOrEventListenerObject	Callback function or event listener object

Source: core/CustomEvents.js, line 117

Examples

// Function listener
app.addEventListener('customEvent', (event) => {
    console.log('Custom event fired:', event.detail);
});

// Object listener
const listener = {
    handleEvent(event) {
        console.log('Event:', event.type);
    }
};
app.addEventListener('myEvent', listener);

dispatchEvent(event) → {boolean}

Dispatch an event to all registered listeners Executes all listeners in the order they were added.

Parameters:

Name	Type	Description
`event`	Event \| CustomEvent	Event object to dispatch. Use CustomEvent for custom data.

Source: core/CustomEvents.js, line 187

Returns:

True unless event.preventDefault() was called

Type:: boolean

Examples

// Dispatch simple event
app.dispatchEvent(new Event('refresh'));

// Dispatch event with data
app.dispatchEvent(new CustomEvent('userLogin', {
    detail: {
        userId: 123,
        username: 'john',
        timestamp: Date.now()
    }
}));

// Cancelable event
const event = new CustomEvent('beforeSave', {
    detail: { data: formData },
    cancelable: true
});
const allowed = app.dispatchEvent(event);
if (!allowed) {
    console.log('Save was prevented');
}

removeEventListener(type, listener)

Remove an event listener for a specific event type

Parameters:

Name	Type	Description
`type`	string	Event type to remove listener from
`listener`	function \| EventListenerOrEventListenerObject	The exact listener function or object to remove

Source: core/CustomEvents.js, line 144

Examples

// Remove specific listener
const handler = (e) => console.log('Event fired');
app.addEventListener('myEvent', handler);
app.removeEventListener('myEvent', handler);

// One-time event listener pattern
const onceHandler = (e) => {
    console.log('This runs only once');
    app.removeEventListener('myEvent', onceHandler);
};
app.addEventListener('myEvent', onceHandler);