Question

与this问题相同，但原型库特定：

我有一个Browser类，我想触发并观察这个类的自定义事件。 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() { ... });

有更好的方法吗？

Answer 1

部分地感谢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"); });

Answer 2

为什么不建立自己的事件处理系统？这真的不需要太多。

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

Answer 3

我使用该文档来触发所有自定义事件。效果很好。

document.on("customEvent:blah", this.doCustomEvent.bind(this));

document.fire("customEvent:blah");

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

3 个答案: