原型自定义事件不在DOM元素上

Prototype custom event NOT on a DOM element

本文关键字：DOM 元素 自定义 事件 原型      更新时间：2023-09-26

和这个问题一样，但是具体到Prototype库:

我有一个浏览器类，我想为这个类触发和观察自定义事件。Prototype的自定义事件系统只允许绑定和触发DOM元素上的事件。以下是我的第一个想法:

function Browser() {
    this.event = new Element('span');
}
Browser.prototype.render = function() {
    this.event.fire('browser:render');
}
var browser = new Browser();
browser.event.observe('browser:render', function() { ... });

有更好的方法吗?

部分由于Frits van Campen的建议，我自己做了一个满足我需要的，比Frits的样品更复杂一点。

function EventManager(target) {
    var target = target || window,
        events = {};
    this.observe = function(eventName, cb) {
        if (events[eventName]) events[eventName].push(cb);
        else events[eventName] = new Array(cb);
        return target;
    };
    this.stopObserving = function(eventName, cb) {
        if (events[eventName]) {
            var i = events[eventName].indexOf(cb);
            if (i > -1) events[eventName].splice(i, 1);
            else return false;
            return true;
        }
        else return false;
    };
    this.fire = function(eventName) {
        if (!events[eventName]) return false;
        for (var i = 0; i < events[eventName].length; i++) {
            events[eventName][i].apply(target, Array.prototype.slice.call(arguments, 1));
        }
    };
}

然后我可以做:

Function Browser() {
    this.event = new EventManager(this);
}
Browser.prototype.render = function() {
    this.event.fire("render");
}   
browser = new Browser();
browser.event.observe("render", function() { alert("Rendered"); });

为什么不构建自己的事件处理系统呢?真的不需要花太多时间。

function MyClass() {
    this.handlers = {};
}
MyClass.prototype.registerHandler = function(event, callback) {
    this.handlers[event] = callback;
};
MyClass.prototype.fire = function(event) {
    this.handlers[event]();
};
var instance = new MyClass();
instance.registerHandler('an event', function () {
    alert('hi!');
});
instance.fire('an event');

我使用文档来触发所有自定义事件。伟大的工作。

document.on("customEvent:blah", this.doCustomEvent.bind(this));
document.fire("customEvent:blah");
相关文章：