如何从java脚本对象中引发自定义事件

Question

我试图更好地理解Java脚本中面向对象的技术.

我有下面的(普通)对象.

function CustomObject () {
    this.size = 1;
};

CustomObject.prototype.addSize = function () {
    this.size += 1;
    if(this.size > 5) {
        //Raise custom Event
    }
};

而我正在这样设置它.

   var myObject = new CustomObject();
    myObject.addSize();

    // Add listener for custom event from with in my Custom Object.
    // Something like this....
    myObject.addEventListener("CustomEvent", handelCustomEvent, false);

    function handelCustomEvent() {}

如何在自定义对象中引发自定义事件,然后在父级中侦听该事件？在Java脚本中这种事情甚至可能吗？

Answer 1

您可以通过创建具有侦听器和触发器相关功能的自定义事件类来完成此操作.我找到了一篇关于此的好文章.该类实现如下:

//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved.
//MIT License

function EventTarget(){
    this._listeners = {};
}

EventTarget.prototype = {

    constructor: EventTarget,

    addListener: function(type, listener){
        if (typeof this._listeners[type] == "undefined"){
            this._listeners[type] = [];
        }

        this._listeners[type].push(listener);
    },

    fire: function(event){
        if (typeof event == "string"){
            event = { type: event };
        }
        if (!event.target){
            event.target = this;
        }

        if (!event.type){  //falsy
            throw new Error("Event object missing 'type' property.");
        }

        if (this._listeners[event.type] instanceof Array){
            var listeners = this._listeners[event.type];
            for (var i=0, len=listeners.length; i < len; i++){
                listeners[i].call(this, event);
            }
        }
    },

    removeListener: function(type, listener){
        if (this._listeners[type] instanceof Array){
            var listeners = this._listeners[type];
            for (var i=0, len=listeners.length; i < len; i++){
                if (listeners[i] === listener){
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
};

但是,正如作者所说,这堂课并不完整.它有一些局限性.所以我建议改用jQuery.您可以轻松使用自定义事件bind()并trigger()使用它.这有一个很好的线索.如果你在jQuery中看到自定义事件？,你会发现如何用jQuery实现它.