javascript - 在自定义对象上添加事件监听器

Question

var elem =Object.create(CustomEvent.prototype)
     elem.arr = [1,2,3];

     elem.addEventListener("added_item", function(event) {
      elem.push(10);
      console.log( event.detail.name );
     }, false);

     var event = new CustomEvent("added_item", {
      detail: { name: "Вася" }
     });

     elem.dispatchEvent(event);
     elem.dispatchEvent(event);
     elem.dispatchEvent(event);
     elem.dispatchEvent(event);


     console.log(elem);

index.html:40 Uncaught TypeError: elem.addEventListener is not a function

CustomEvent 仅适用于 HTMLElements？

有什么替代方案吗？

Answer 1

正如评论中所述，您需要将 elem 作为事件目标，而不是事件。 AFAIK，没有办法将内置的 EventTarget 用于您自己的目的，但 MDN 提供了 simple implementation对于您可以实例化并自己使用的 EventTarget:

var MyEventTarget = function() {
  this.listeners = {};
};

MyEventTarget.prototype.listeners = null;
MyEventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

MyEventTarget.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return this.removeEventListener(type, callback);
    }
  }
};

MyEventTarget.prototype.dispatchEvent = function(event) {
  if (!(event.type in this.listeners)) {
    return;
  }
  var stack = this.listeners[event.type];
  event.target = this;
  for (var i = 0, l = stack.length; i < l; i++) {
      stack[i].call(this, event);
  }
};

var elem = new MyEventTarget()
elem.arr = [1, 2, 3];

elem.addEventListener("added_item", function(event) {
  elem.arr.push(10);
  console.log(event.detail.name);
}, false);

var event = new CustomEvent("added_item", {
  detail: {
    name: "Вася"
  }
});

elem.dispatchEvent(event);
elem.dispatchEvent(event);
elem.dispatchEvent(event);
elem.dispatchEvent(event);


console.log(elem);