如何扩展本机 mootools 方法

Question

是否可以扩展mootools中的addEvent函数来执行某些操作，并调用普通的addEvent方法？或者，如果有人有更好的方法来做我需要的事情，我会等很多年。

根据我在网站上的页面，我有不同的“点击”处理程序。此外，每一页上可能有多个。除了执行单击侦听器将执行的操作之外，我还希望页面上的每次单击都执行一段代码。在每个处理程序上添加这两行，至少可以说是 PITA，所以我考虑重写 addEvent ，每次我添加“点击”侦听器时，它都会创建一个执行的新函数代码，然后调用函数。

知道我该怎么做吗？

Answer 1

虽然这并非不可能，但这是一种值得怀疑的做法——更改 mootools 内部 api。除非您精通 mootools 并遵循 github 上的开发方向，并且知道您的更改不会破坏未来的兼容性，否则我建议您不要这样做。

在我看来，您有两条路线：

1. 通过 implement 创建一个新的 Element 方法来执行您的逻辑。例如： Element.addMyEvent 执行您的操作，然后调用正常的 element.addEvent 。这是更好的选择，并且没有真正的不利影响（见上文）

2. 直接更改原型。意味着您无需重构任何代码，它就会正常工作。这可能意味着使用您的代码的其他人将难以遵循您的代码，并且难以进行跟踪/故障排除 - 想一想，了解 mootools 和标准 addEvent 行为的人甚至不会想到检查如果出现问题，请直接更改原型。

3. 如果 mootools 放弃 Element.prototype 修改而转而采用包装器（为了与其他框架兼容），那么即将推出的 mootools 2.0 可能会使上面的方法 2 无效。返回到方法 1 :)

我认为解决方案 1 更好、更明显。

至于2： http://jsfiddle.net/dimitar/aTukP/

(function() {
    // setup a proxy via the Element prototype.
    var oldProto = Element.prototype.addEvent;

    // you really need [Element, Document, Window] but this is fine.
    Element.prototype.addEvent = function(type, fn, internal){
        console.log("added " + type, this); // add new logic here. 'this' == element.
        oldProto.apply(this, arguments);
    };

})();

document.id("foo").addEvent("click", function(e) {
    e.stop();
    console.log("clicked");
    console.log(e);
});

就是这么简单。请记住 Element.events 也应该转到文档和窗口。另外，这不会改变 Events 类 mixin，因为您需要重构 Events.addEvent 。