在自定义对象中实现事件

我想要的是一个提供一些事件的自定义对象。 例如：

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

使用该事件的代码如下所示：

myCustomObject = new CustomObject();
myCustomObject.addEventListener(CustomObjectTextChangedEventName, handleTextChanged, false);

正如你所看到的...在 JS 中使用事件的默认方式，但我无法使其工作...

目前我的问题是我的对象没有实现addEventListener and dispatchEvent，但这个功能通常是从“element”实现的......

我可以以某种方式提供它们还是我必须自己实现它们？ 我必须如何实施它们？

我必须实现自己的事件处理吗？ （有一个内部处理程序列表，一个“添加”和“删除”处理程序函数，并在我想触发事件时触发每个处理程序）？

The addEventListener函数是一种方法Element班级。一种方法是使CustomObject继承自Element像这样：

CustomObject.prototype = Element.prototype;

问题是Element类在不同的浏览器中可能有不同的实现。因此，例如触发事件可能并不容易（请参阅这个帖子 https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript).

所以我建议你自己做这件事。这并不难，尝试这样的事情：

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

现在使用它就像这样简单：

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

这是一个基本的解决方案。你可能想改变它，但我认为你应该掌握这个想法。