如何将事件侦听器添加到使用 Jquery Event 构造函数创建的 Jquery Event 中

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 ?

Answer 1

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

Answer 2

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

Answer 3

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>