Question

嘿伙计们我正在尝试构建一个小的自定义事件，我对jquery和JS一般都是新手，请看看下面的代码::

$(function () {

    test = $.Event('click');

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

});

现在在上面的代码中，当单击a时，test事件永远不会被触发，原因是.on文档明确指出第一个参数必须是字符串。

现在我的问题是假设我使用this Jquery文档中讨论的event constructor。如何将事件附加到test？这是我唯一的问题。

TY。

泰纳利。

Answer 1

Javascript解决方案：

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

您可以使用.type从事件对象中获取事件类型。但是你不能在on方法中传递整个事件对象，因为它需要事件名称而不是事件本身：

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

Answer 3

自定义事件可方便地用于event triggering，尤其适用于人工（非DOM）事件（尽管您可以使用任何名称）。

例如：

＆＃13;

var test = $.Event('test');
test.customProperty = 'Something';

var hostObject = {
    name: 'root'
};

$(hostObject).on('test', function(e) {
    alert(e.customProperty);
})

$(hostObject).trigger(test);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

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

3 个答案: