Implementing events in custom object

dom-events, javascript

Solution

The `addEventListener` function is a method of `Element` class. One way is to make `CustomObject` inherit from `Element` like this:

CustomObject.prototype = Element.prototype;

The problem is that `Element` class may have different implementations among different browsers. So for example firing events may not be easy (see this post).

So I advice doing this by yourself. It is not difficult, try something like this:

var CustomObject = function () {
    var _this = this;
    _this.events = {};

    _this.addEventListener = function(name, handler) {
        if (_this.events.hasOwnProperty(name))
            _this.events[name].push(handler);
        else
            _this.events[name] = [handler];
    };

    _this.removeEventListener = function(name, handler) {
        /* This is a bit tricky, because how would you identify functions?
           This simple solution should work if you pass THE SAME handler. */
        if (!_this.events.hasOwnProperty(name))
            return;

        var index = _this.events[name].indexOf(handler);
        if (index != -1)
            _this.events[name].splice(index, 1);
    };

    _this.fireEvent = function(name, args) {
        if (!_this.events.hasOwnProperty(name))
            return;

        if (!args || !args.length)
            args = [];

        var evs = _this.events[name], l = evs.length;
        for (var i = 0; i < l; i++) {
            evs[i].apply(null, args);
        }
    };
}

Now using it is as simple as:

var co = new CustomObject();
co.addEventListener('textChange', function(name) {
    console.log(name); 
});
co.fireEvent('textChange', ['test']);

This is a basic solution. You may want to alter it, but I think you should grasp the idea.

Problem

What I want to have is a custom object which provides some events. For example: ``` var CustomObjectTextChangedEventName = 'textChanged'; var CustomObject = function () { var _this = this; var _text = ""; _this.OnTextChanged = document.createEvent("Event"); _this.OnTextChanged.initEvent(CustomObjectTextChangedEventName, true, false); _this.ChangeText = function (newText) { _text = newText; fireTextChanged(); }; function fireTextChanged() { _this.dispatchEvent(_this.OnTextChanged); } } ``` The code to use the event would look like: ``` myCustomObject = new CustomObject(); myCustomObject.addEventListener(CustomObjectTextChangedEventName, handleTextChanged, false); ``` As you can see... the default way of using events in JS, but I can not make it work... Currently my problem is that my object does not implement `addEventListener` and `dispatchEvent`, but this functions are normally implemented from "element"... Can I make them available somehow or do I have to implement them for my own? How I have to implement them? Do I have to implement my own event handling? (having a internal list of handlers, an "add"- and "remove"-handler function, and fire each handler when I want to fire the event)?

Original source

Related problems