Can plain Javascript objects have events?

Question

Can plain Javascript objects have event attached to them? Say something like this:

obj = new Object();
obj.addEventListener('doSomething', foo, true);

I know i can do this with jQuery, but is it possible without any library?

Answer 1

No. addEventListener is a feature of the DOM, not JS.

Answer 2

I think you'll find that in plain JavaScript, it's only DOM objects that can have events.

Answer 3

No, not to the extent that you can add an event handler to any object. You could write your own event system for objects though, if you're writing some sort of API or library for other scripts to interact with.

Answer 4

Not directly but you add the required publish/subscribe infrastructure to any one of them.

Answer 5

No.

However, you could make your own implementation by writing addEventListener and other functions and storing a list of handlers for each event.

For example: (Untested)

function addEventListener(name, handler) {
    if (!this.events) this.events = {};
    if (!this.events[name]) this.events[name] = [];
    this.events[name].push(handler);
}

function removeEventListener(name, handler) {
    if (!this.events) return;
    if (!this.events[name]) return;
    for (var i = this.events[name].length - 1; i >= 0; i--)
        if (this.events[name][i] == handler)
            this.events[name].splice(i, 1);
}

function raiseEvent(name, args) {
    if (!this.events) return;
    if (!this.events[name]) return;
    for (var i = 0; i < this.events[name].length; i++)
        this.events[name][i].apply(this, args);
}


var obj = ...;
obj.addEventListener = addEventListener;
obj.removeEventListener = removeEventListener;
obj.raiseEvent = raiseEvent;

Answer 6

No, the only thing that JavaScript objects have is properties. The values of these properties may be:

• A primitive value
• An object (including a function object)

Answer 7

You can define an addEventListener method to collect all the listener objects, and your code can call them anytime. It's just OO programming. Define the addXListener, add the object passed as parameter somewhere, and when something happens you call it's methods.

Yes.

But remember that UI events are those defined by HTML/Javascript so what you'd be programming will be only for your "obj" object to alert about YOUR events.

By example:

FunnyProcessor
+ addStartListener(...)
+ addProcessingListener(...)
+ addEndListener(...)
+ doStuff()

and doSuff will call first the start listeners, next do some loop and for each iteration call processing listeners, and at the end call end listeners.

Answer 8

You'll have to implement your own functionality for that, but that's not very hard.

var obj = {
    events: {},
    addEventListener: function(eventName, handler) {
        if(!eventName in this.events)
            this.events[eventName] = [];

        this.events[eventName].push(handler);
    },

    raiseEvent: function(eventName, args) {
        var currentEvents = this.events[eventName];
        if(!currentEvents) return;

        for(var i = 0; i < currentEvents.length; i++) {
           if(typeof currentEvents[i] == 'function') {
              currentEvents[i](args);
           }
        }
    },

    click: function() {
        // custom 'click' function. when this is called, you do whatever you
        // want 'click' to do. and then raise the event:

        this.raiseEvent('onClick');
    }
};