dojo如何覆盖事件处理程序

Question

目前dojo使用on方法将事件连接到处理程序。

btn = new Button();
btn.on('click', function () {console.log('do something');});

当按钮被点击时，这将调用附加的函数。

但是，根据文档，删除现有处理程序应通过以下方式完成

handler = btn.on('click', function () {console.log('do something');});
handler.remove();

这不是我想要删除事件处理程序的方式。

我不会将处理程序引用存储在任何地方。但我想通过添加一个新的“点击”事件

btn.on('click', function () {console.log('do something different');});

以便它替换现有的“点击”事件处理程序并添加一个新的。

有什么方法可以实现我想要的吗？

谢谢！

Answer 1

这是不可能的，框架通过创建对事件处理程序的引用来告诉你这样做。这类似于 jQuery 等其他框架的工作方式。

jQuery 当然有一种机制可以通过使用off() 函数来删除所有事件处理程序，但这在Dojo 中也不可用。就像 Chris Hayes 在 cmets 中建议的那样，您可以自己实现这样的功能，或者将其包装在另一个模块中，或者使用 dojo/on 模块上的方面。

例如，您可以将其包装在一个新模块中：

// Saving the event handlers
var on2 = function(dom, event, callback) {
    on2.handlers = [];

    if (on2.handlers[event] === undefined) {
        on2.handlers[event] = [];   
    }
    var handler = on(dom, event, callback);
    on2.handlers[event].push({
        node: dom,
        handler: handler
    });
    return handler;
};
// Off functionality
lang.mixin(on2, on, {
    off: function(dom, event) {
        if (this.handlers[event] !== undefined) {
            array.forEach(this.handlers[event], function(handler) {
                if (handler.node === dom) {
                    handler.handler.remove();   
                }
            });
        }
    }
});

然后你就可以使用它了：

on2(dom.byId("test"), "click", function() {
    console.log("test 1 2 3"); // Old event handler
});
on2.off(dom.byId("test"), "click"); // Remove old event handlers
on2(dom.byId("test"), "click", function() {
    console.log("test 4 5 6"); // New event handler
});

这应该可以正常工作，正如您在这个小提琴中看到的那样：http://jsfiddle.net/X7H3F/

Answer 2

btn = new Button();
btn.attr('id','myButton');
query("#myButton").on('click', function () {console.log('do something');});

当你想替换你的处理程序时做同样的事情。喜欢，

query("#myButton").on('click', function () {console.log('do something different');});

希望有帮助:)