Can I create a custom event in Javascript for an object I created?

Question

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?

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

Robert MacLean · Accepted Answer · 2013-04-11 20:23:52Z

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

edited Apr 11, 2013 at 20:23

Robert MacLean

39.3k26 gold badges102 silver badges154 bronze badges

answered Nov 26, 2010 at 16:49

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Szabo Over a year ago

This looks like it will execute the onPublish() event before the image is returned (if that's not the case, please let me know). What would I do if I wanted it to fire after the return, instead?

Zecc Over a year ago

What to you mean "before the publish method has returned the image"? The onPublish() method is called before the publish() call returns, of course, but do you mean after the image has been loaded?

gblazex Over a year ago

@ajax81 - I've updated the example. Now it's async, so it will add the callback to the event loop, just like how an event handler should be.

Daniel Szabo Over a year ago

Ah. I see. Much thanks, galambazs. I appreciate your time.

Tengiz · Accepted Answer · 2013-04-06 12:07:40Z

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:

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

answered Apr 6, 2013 at 12:07

Tengiz

8,51934 silver badges41 bronze badges

Collectives™ on Stack Overflow

Can I create a custom event in Javascript for an object I created?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related