javascript - 是否可以扩展 EventTarget 接口(interface)？

Question

如果可能的话，我正在寻找答案，甚至是一个好主意。

通常，作为对 IE8 及更早版本的修复，会使用与此类似的解决方法:

var addEvent = function(obj, e, cb) {
    if(obj.attachEvent) {
        return obj.attachEvent('on' + e, cb);
    } else {
        obj.addEventListener(e, cb, false);
        return true;
    }
}

然后程序员将始终使用 addEvent 而不是 addEventListener。

有什么方法或要点可以创建一个 addEventListener 函数，当 attachEvent 未定义时它会环绕它？

我想这有点棘手，因为 EventTarget 可以是 DOM 元素、文档、窗口或其他东西。

Answer 1

这取决于你想回到多远。在 IE8 上，您可以扩展 Element.prototype 以向所有 HTML 元素添加功能，这至少完成了 90% 的工作。我很确定你不能在 IE6 中这样做(PrototypeJS 不得不求助于扩展单个 Element 实例)，我不记得 IE7。不过，除非您的目标是东亚市场，否则您基本上可以忽略 IE7 和更早版本。

这是您如何执行此操作的示例:

(function() {
  // Functions for IE
  function stopPropagation() {
    this.cancelBubble = true;
  }
  function preventDefault() {
    this.returnValue = false;
  }
  function addEventUsingAttach(eventName, handler)
  {
    this.attachEvent("on" + eventName, function() {
      var e = window.event;
      e.stopPropagation = stopPropagation;
      e.preventDefault = preventDefault;
      handler.call(this, e);
    });
  }

  // Function to add `addEvent` to the given target object
  function extendIt(target)
  {
    if (target.addEventListener) {
      target.addEvent = Element.prototype.addEventListener;
    }
    else {
      target.addEvent = addEventUsingAttach;
    }
  }

  // Add it to `Element.prototype` if we have it
  if (typeof Element !== "undefined" &&
      typeof Element.prototype !== "undefined") {
    extendIt(Element.prototype);
  }

  // Add it to `window` and `document` (etc.)
  extendIt(window);
  extendIt(document);
})();

Live Example | Source

然后您手动扩展其他 EventTarget，例如 window 和 document(请参阅上面代码 list 的末尾)。

---

原始答案:我最初误读了您的问题是关于添加 addEventListener，特别是在 IE8 上，而事实上您的问题很明显不是 关于添加那个，但是添加你自己的 addEvent。我将这个答案留给其他读者:

这取决于你想回到多远。在 IE8 上，您可以扩展 Element.prototype 以向其添加 addEventListener，页面上的所有 HTML 元素都将使用它(见下文)。但是，您添加的 shim 不支持捕获阶段，因为 IE 在原生支持 addEventListener 之前不支持它。我很确定你不能在早期版本(IE7、IE6)上扩展 Element.prototype，PrototypeJS 不得不回退到为旧版本的 IE 扩展特定元素。但它适用于 IE8。

扩展 Element.prototype 后，您必须手动扩展您提到的其他事件目标，但扩展 Element.prototype 完成了大部分工作。

但是，如果您这样做并包含第三方脚本，请注意它们可能会假设正确实现了 addEventListeneer 并完成了捕获阶段。

这是将 addEventListener 添加到 IE8 的基本垫片:

(function() {
  function stopPropagation() {
    this.cancelBubble = true;
  }
  function preventDefault() {
    this.returnValue = false;
  }
  if (typeof Element !== "undefined" &&
      typeof Element.prototype !== "undefined" &&
      !Element.prototype.addEventListener) {
    Element.prototype.addEventListener = function(eventName, handler, useCapture) {
      if (useCapture) {
        throw "Browser doesn't support capturing phase";
      }
      this.attachEvent("on" + eventName, function() {
        var e = window.event;
        e.stopPropagation = stopPropagation;
        e.preventDefault = preventDefault;
        handler.call(this, e);
      });
    };
  }
})();

Live Example | Source