How to add event listener to JQuery Event created with JQuery event constructor
Hi guys I am trying to create a small custom, event, I am very new to jquery and JS in general, have a look at my code below ::
$(function () {
test = $.Event('click');
$('a').on( test , function(e){
console.log(e.target);
return false;
})
});
now in the above code, when the a button is pressed, the event test
never fires, the reason is that . that the first parameter should be a string.
now my question is what i am using event constructor
as described in this jQuery documentation. How do I attach an event to test
? this is my only question.
TY.
Tenali.
+3
source to share
3 answers
Javascript solution:
function Dispatcher(){
"use strict";
this.listeners = [];
/* public function dispatch
* @Description: Execute the callback subscribed to an event.
* @Arguments: eventName
* @Return: void;
*/
this.trigger = function (eventName, eventData) {
if(this.listeners[eventName]) {
for(var i=0; i < this.listeners[eventName].length; i++) {
this.listeners[eventName][i].callback(eventData);
if(this.listeners[eventName][i].executeOnce) {
this.listeners[eventName].splice(i, 1);
}
}
}
};
/* public function on()
* @Description: Subscribe the callback to certain event
* @Arguments: eventName, callback, executeOnce.
* @Return void;
*/
this.on = function(eventName, callback, executeOnce) {
var listener = {
callback: callback,
executeOnce: executeOnce
};
if(!this.listeners[eventName]) { this.listeners[eventName] = []; }
this.listeners[eventName].push(listener);
};
/* public function off()
* @Description: Un-subscribe all the callbacks subscribed to certain event.
* @Arguments: eventName
* @Return void;
*/
this.off = function(eventName) {
if(this.listeners[eventName]) {
delete this.listeners[eventName];
}
};
/* public function one()
* @Description: Subscribe the callback to be executed only once to the eventName
* @Arguments: eventName, callback
* @Return void;
*/
this.one = function(eventName, callback) {
this.on(eventName, callback, true);
};
}
var dispatcher = new Dispatcher();
dispatcher.one('customEvent', function(eventData) {
console.log('customEventFired');
});
dispatcher.one('customEvent', function(eventData) {
console.log('another action that depends on this event');
});
dispatcher.trigger('customEvent');
dispatcher.trigger('customEvent');
+2
source to share
Custom events are handy for firing events and especially for artificial (non-DOM) events (although you can use any name).
For example:
var test = $.Event('test');
test.customProperty = 'Something';
var hostObject = {
name: 'root'
};
$(hostObject).on('test', function(e) {
alert(e.customProperty);
})
$(hostObject).trigger(test);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+1
source to share