04. Events
Events are very important part of jComponent. With events you can capture a specific behaviour.
Content:
Internal events
ON('#component-id')ON('@component-name')ON('component')ON('component.compile')ON('component.destroy')ON('cmd')ON('environment')ON('error')ON('exec')ON('import')ON('knockknock')ON('plugin')ON('plugin.destroy')ON('scroll')ON('scrollidle')ON('setter')ON('ready')ON('response')ON('request')
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.compile', 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('cmd')
+v18 This event is emitted when the CMD method is executed.
ON('cmd', function(path, arg1, arg2, arg3) {
// do something
});
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('exec')
+v18 This event is emitted when the EXEC method is executed.
ON('exec', function(path, arg1, arg2, arg3) {
// do something
});
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('scroll')
+v18 This event is emitted when a user scrolls in some SCROLLBAR() element.
ON('scroll', function(area) {
// @area {jQuery element}
});
Event: ON('scrollidle')
+v18 This event is emitted when a scrollbar is idle.
ON('scrollidle', function(area) {
// @area {jQuery element}
});
Event: ON('setter')
+v18 This event is emitted when the SETTER method is executed.
ON('setter', function(selector, name, arg1, arg2) {
// do something
});
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 multipart/form-data
// response.url {String} A request URL
// +v18: response.scope {String} Current scope
// 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;
// +v18 The property below can enable XHR with credentials (cookies) to external resources
// options.credentials {Boolean}
// ========================================================================
// +v18 supports two methods which respond without creating of real request
// ========================================================================
// IMPORTANT: response will be processed via preddefined callback of caller.
// Returns error
// options.throw(responsedata, [headers], [http_code]);
// @responsedata {Object/String}
// @headers {Object} custom response headers (default: {})
// @http_code {Number} custom http code (default: 999)
// Returns response:
// options.respond(responsedata, [headers]);
// @responsedata {Object/String}
// @headers {Object} custom response headers (default: {})
});
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-custom-event', 'Argument 1', 'Argument 2');
Read more about global methods: