Question

我创建了一个自定义javascript对象，可以加载一些图像。

function myCustomObject(){
    //constructor and properties
    this.initializeImages(); //this function will initialize images and call every other function.
}


myCustomObject.prototype.initializeImages(){
    //some preperation code here
    imageObj = new Image();
    imageObj.onload = function (){
        //after doing some things here I will call all remaining functions
        if (allImagesLoaded=true){
            this.method1();
            this.method2();
            this.method3();
            //I want here to dispatch a custom event
            $.event.trigger({
                type: 'finish',
                customeEventProperty: value
            }
        }
    }

}

在我的主代码上我想创建两个不同的customObjects，并希望它们中的每一个在完成时触发事件。但我希望两个人知道哪一个解雇了他们。

$(document).ready(function (){
    var myCustomObject1, myCustomObject2;
    myCustomObject1  = new myCustomObject();
    myCustomObject2 = new myCustomObject();

    //if i do this I can't know which of the two fired the event
    $(document).on('finish', function);

    //How can I set up my event so I can do this?
    myCustomObject1.on('finish', function1);
    myCustomObject2.on('finish', function2);


});

换句话说，我怎么知道哪一个触发了我的自定义事件？

Answer 1

您的customObjects是javascript-objects而不是jQuery-objects，因此您无法使用.on()。你也不能在它们上触发事件，因为它们不是DOM-Elements。但是有不同的方法来实现你想要的。

第一种方法是在文档上设置一个事件监听器，在它的回调中你可以读取触发了哪个对象。您还可以设置全局计数器变量，以便为customObjects提供唯一编号。优点是您只有一个中央处理程序所有完成活动。

var objCounter = 0;

function func1() {/* Do something when obj 1 has finished */}
function func2() {/* Do something when obj 2 has finished */}

function myCustomObject(){
    this.number = ++objCounter;
    this.initializeImages();
}

$(document).on('finish', function(event) {
    console.log(event.sender);
    console.log(event.imageObj);
    // now for example you can do:
    if (event.sender.number == 1) func1();
});

myCustomObject.prototype.initializeImages(){
    /* .... */
    var that = this, // this refers to the customObject
        imageObj = new Image();

    imageObj.onload = function (){
        /* ... */
        if (allImagesLoaded=true){
            /* ... */
            $.event.trigger({
                type: 'finish',
                sender: that,
                imageObj: imageObj,
                customeEventProperty: value
            });
        }
    };
}

第二种简单的方法将处理程序作为属性附加到customObject：

function myCustomObject(callback){
    if (typeof callback == 'function') this.finish = callback;
    this.initializeImages();
}

myCustomObject.prototype.initializeImages(){
    /* .... */
    var that = this, // this refers to the customObject
        imageObj = new Image();

    imageObj.onload = function (){
        /* ... */
        if (allImagesLoaded=true){
            /* ... */
            if(that.finish) that.finish(); // execute finish if its there
        }
    };
}

// now you can create a customObject with integrated callback:
var myCustomObject1 = new myCustomObject( func1 );

在自定义对象上分配自定义事件

1 个答案: