jComponent / 04. Events
Updated: 10. September 2018
Author: Peter Širka

04. Events

Professional Support Chat with contributors

Events are very important part of jComponent. With events you can capture a specific behaviour.

Content:

Internal events


Event: ON('#component-id')

This event is emitted when a component with defined data-jc-id="SOME_ID" is processed.

ON('#your-id-of-component', function(component) {
    // component {Component}
});

Event: ON('@component-name')

This event is emitted when a component is processed.

ON('@name-of-component', function(component) {
    // component {Component}
});

Event: ON('component')

This event is emitted when a component is initialized.

ON('component', function(component) {
    // component {Component}
});

Event: ON('component.compile')

This event is emitted when a component is compiled.

ON('component', function(component) {
    // component {Object}
});

Event: ON('component.destroy')

This event is emitted when a component is destroyed.

ON('component.destroy', function(component) {
    // component {Component}
});

Event: ON('environment')

This event is emitted when a value is added/updated in environment.

ON('environment', function(key, value) {
    // @key {String}
    // @value {Object}
});

Event: ON('error')

This event is emitted when a XHR request (AJAX) captures an error. Event is emitted after ON('response') event.

ON('error', function(response) {

    // response.data {Object} A request data
    // response.error {Boolean} Is error?
    // response.headers {Object} In the form headerName.headerValue
    // response.method {String} A request method
    // response.process {Boolean} Can disable future processing (default: true)
    // response.response {String} A response body
    // response.status {Number} A response status code
    // response.text {String} A response status text
    // response.upload {Boolean} Determines which the request is multipart/form-data
    // response.url {String} A request URL

    // IMPORTANT:
    // This property can prevent a callback or response processing in all AJAX requests:
    response.process = false;
});

Event: ON('import')

+v14.0.0 This event is emitted if IMPORT() is performed.

ON('import', function(url, target) {
    // @url {String}
    // @target {Element}
});

Event: ON('knockknock')

This event is emitted every 60 seconds.

ON('knockknock', function(counter) {
    // @counter {Number}
});

Event: ON('plugin')

+v15 This event is emitted when some plugin is initialized.

ON('plugin', function(plugin) {
    // plugin {Plugin}
});

Event: ON('plugin.destroy')

+v15 This event is emitted when a plugin is destroyed.

ON('plugin.destroy', function(plugin) {
    // plugin {Plugin}
});

Event: ON('ready')

This event is emitted when the jComponent is ready.

ON('ready', function() {
    // your code
});

Event: ON('response')

This event is emitted when a XHR request (AJAX) gets a response.

ON('response', function(response) {

    // response.data {Object} A request data
    // response.error {Boolean} Is error?
    // response.headers {Object} In the form headerName.headerValue
    // response.method {String} A request method
    // response.process {Boolean} Can disable future processing (default: true)
    // response.response {String} A response body
    // response.status {Number} A response status code
    // response.text {String} A response status text
    // response.upload {Boolean} Determines which the request is multipart/form-data
    // response.url {String} A request URL

    // IMPORTANT:
    // This property can prevent a callback or response processing in all AJAX requests:
    response.cancel = true;
});

Event: ON('request')

+v14.3.1 This event is emitted before a XHR request (AJAX) is performed.

ON('request', function(options) {

    // options.data {Object} A request data
    // options.headers {Object} In the form headerName.headerValue
    // options.method {String} A request method
    // options.url {String} A request URL

    // IMPORTANT:
    // This property can prevent performing of request:
    options.cancel = true;
});

Custom events

You can define your own events within jComponent library. Implementation is very easy:

Register event:

ON('my-custom-event', function(arg1, arg2) {
    console.log('My custom event is triggered with these arguments:', arg1, arg2);
});

Emit custom event:

// This method emits your custom event within your app
EMIT('my-cusotm-event', 'Argument 1', 'Argument 2');

Read more about global methods: