我可以用Javascript为我创建的对象创建一个自定义事件吗?

时间:2022-09-25 18:44:08

Assume I have an object with a member function that returns itself:

假设我有一个对象,其成员函数返回自身:

/* -- Object 1 -- */
function Object1(){
    this.me      = new Image(10,10);
    this.me.src  = "someImgUrl.jpg";
    this.publish = function(){
        return this.me;
    }
}

In production:

在生产中:

var Obj1 = new Object1();
document.body.appendChild( Obj1.publish() );

Now, suppose I wanted to create an event that fires when the object's publish() method is called, but after the image is returned (something akin to an "onPublished()" event). Say, to to change the image dimensions to 100x100. How would I create it, and where would I "attach" it?

现在,假设我想要创建一个事件,该事件在调用对象的publish()方法时触发,但在返回映像之后触发(类似于“onpublish()”事件)。例如,将图像尺寸更改为100x100。我如何创建它,我将在哪里“附加”它?

If I'm not being clear enough, please let me know. This is the simplest demo I could think of.

如果我说得不够清楚,请告诉我。这是我能想到的最简单的演示。

2 个解决方案

#1


8  

A simple example:

一个简单的例子:

function Object1() {
    'use strict';

    this.me = new Image(10, 10);
    this.me.src = "someImgUrl.jpg";
    this.publish = function() {
        if (typeof this.onPublish === "function") {
            setTimeout(this.onPublish, 1);
        }

        return this.me;
    };
}

var Obj1 = new Object1();
Obj1.onPublish = function() {
  // do stuff
};

Obj1.publish();

#2


0  

Alternatively, you can use some 3rd party framework (such as bob.js) to define custom events on your objects. There are two approaches, but I will show only one:

或者,您可以使用第三方框架(如bob.js)在对象上定义自定义事件。有两种方法,但我只展示一种:

var DataListener = function() { 
    var fire = bob.event.namedEvent(this, 'received'); 
    this.start = function(count) { 
        for (var i = 0; i < count; i++) { 
            fire(i + 1); 
        } 
    }; 
}; 
var listener = new DataListener(); 
listener.add_received(function(data) { 
    console.log('data received: ' + data); 
}); 
listener.start(5); 
// Output: 
// data received: 1 
// data received: 2 
// data received: 3 
// data received: 4 
// data received: 5

#1


8  

A simple example:

一个简单的例子:

function Object1() {
    'use strict';

    this.me = new Image(10, 10);
    this.me.src = "someImgUrl.jpg";
    this.publish = function() {
        if (typeof this.onPublish === "function") {
            setTimeout(this.onPublish, 1);
        }

        return this.me;
    };
}

var Obj1 = new Object1();
Obj1.onPublish = function() {
  // do stuff
};

Obj1.publish();

#2


0  

Alternatively, you can use some 3rd party framework (such as bob.js) to define custom events on your objects. There are two approaches, but I will show only one:

或者,您可以使用第三方框架(如bob.js)在对象上定义自定义事件。有两种方法,但我只展示一种:

var DataListener = function() { 
    var fire = bob.event.namedEvent(this, 'received'); 
    this.start = function(count) { 
        for (var i = 0; i < count; i++) { 
            fire(i + 1); 
        } 
    }; 
}; 
var listener = new DataListener(); 
listener.add_received(function(data) { 
    console.log('data received: ' + data); 
}); 
listener.start(5); 
// Output: 
// data received: 1 
// data received: 2 
// data received: 3 
// data received: 4 
// data received: 5