how do add event listener to Jquery Event , which is created using Jquery Event constructor

Question

I am trying to build 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 is clicked the test event is never fired , the reason being the .on documentation clearly states that the 1st parameter must be a string .

Now my question is suppose I use the event constructor as discussed in this Jquery documentation. How do I attach an event then to test?

From a curiosity point of view, if you know the event is going to be click, why dont you just feed click into the jQuery? $("a").on("click", function(){}); — Fallenreaper
– Fallenreaper, Commented May 27, 2015 at 12:41
@Fallenreaper , i can't :( i am trying to create a functinality with custom events only ! — Tenali_raman
– Tenali_raman, Commented May 27, 2015 at 12:49
ahh, making a new custom Event Object and feeding this new event into jQuery for manipulation. So in theory, you would have an event called: "Foo" — Fallenreaper
– Fallenreaper, Commented May 27, 2015 at 13:05

ecarrizo · Accepted Answer · 2015-05-27 12:51:59Z

2

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');

answered May 27, 2015 at 12:51

ecarrizo

2,80919 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tenali_raman Over a year ago

This is what i don't want , but thanks for trying haha , not going pure JS any sooner LOL

ecarrizo Over a year ago

No problem, Know that the OP is about jquery, but posted this to add a different way to do it without depending on a library. its just another example :)

Milind Anantwar · Accepted Answer · 2015-05-27 12:49:08Z

1

You can use .type to get the event type from event object. however you can not pass the entire event object in on method as it expects event name and not the event itself:

$('a').on(test.type, function(e){
    console.log(e.target);
    return false;
})

edited May 27, 2015 at 12:49

answered May 27, 2015 at 12:34

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

Tenali_raman Over a year ago

yes , but i need to use a custom event ! .. not a normal Jquery event , i am trying to create a demo where in i want to test if preventDefault() and DefaultPrevented() work with custom events , and thats why , your solution is a no-go for me !

Milind Anantwar Over a year ago

You can not pass the event handler to on method. You can get the type from event however if required.

dfsq · Accepted Answer · 2015-05-27 12:43:02Z

1

Custom events are convenient to use for event triggering 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>

answered May 27, 2015 at 12:43

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

how do add event listener to Jquery Event , which is created using Jquery Event constructor

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related