使用相同的名称扩展 Node.addEventListener 方法

Question

我正在尝试扩展该Node.addEventListener方法，以便我可以进行一些事件管理，例如：

Node.prototype.on = function (type, listener, useCapture) {
    'use strict';
    var i, evt;

    this.events = this.events || [];


    for (i = 0; i < this.events.length; i += 1) {

        evt = this.events[i];

        if (this === evt[0] && type === evt[1]) {
            this.removeEventListener(type, evt[2], evt[3]);
            this.events.splice(i, 1);
        }

    }

    this.events.push([this, type, listener, useCapture]);

    return this.addEventListener(type, listener, useCapture);  
};

但在这种情况下，on我不想给它命名，而是想将它命名为相同的名称addEventListener，这样我就可以保证任何 javascript 都可以在它上面工作。

所以这里的要点是，如果我将函数命名addEventListener为 return 子句中的 on ，它将导致无限循环。所以我在想是否有什么办法让它调用该super方法呢？

提前致谢

Answer 1

首先让我再次指出（对于其他读者），扩展 DOM 一般来说是一个坏主意。

也就是说，如果环境允许，您可以执行以下操作：

您可以保留对原始函数的引用addEventListener并使用 调用它.call。
仅当addEventListener公开此方法（即类似于本机 JavaScript 函数）并且您实际上可以覆盖时，这才有效addEventListener：

// immediate function to create scope
(function() {
    // keep a reference to the original method
    var orig_addEventListener = Element.prototype.addEventListener;

    Element.prototype.addEventListener = function (type, listener, useCapture) {
        // your code here
        //...
        // call the original method
        return orig_addEventListener.call(this, type, listener, useCapture);  
    };

}());

请注意，这addEventListener是接口的方法Element，而不是Node接口。

再次强调：这不能保证有效，即使现在有效，将来也可能会崩溃。