Question

我试图像这样从我的自定义对象中发出自定义事件：

var CustomObject = function () {
    this.customEvent = new Event('afterInit')
    /* init code goes here*/
    this.dispatchEvent(this.customEvent)
}

但是我的对象无法分派（即dispatchEvent不是我的对象的属性），并且我无法绑定到它。从自定义对象触发自定义事件的正确语法是什么？

Answer 1

最近，EventTarget有一个构造函数，因此您实际上可以将其用于JS对象-在它只是仅由DOM元素使用的接口之前：

class CustomObject extends EventTarget {
  constructor() {
    super();
    this.customEvent = new CustomEvent("afterinit");
  }

  init() {
    this.dispatchEvent(this.customEvent)
  }
};

let myObject = new CustomObject();
myObject.addEventListener("afterinit", console.log);
myObject.init();

不幸的是，EventTarget的构造函数的支持不够好–请参见上面的链接–它是 Web API ，意味着仅在浏览器环境中受支持。

Answer 2

对象没有事件。您必须自己实现该功能，然后才能创建使用class语法继承该对象的新对象：

 const handlers = Symbol.for("handlers");

 class EventEmitter {
   constructor(...args) {
     super(...args);
     this[handlers] = new Map;
   }

   on(name, handler) {
     if(!this[handlers].has(name)) {
       this[handlers].set(name, [handler]);
     } else {
       this[handlers].get(name).push(handler);
     }
   }

   trigger(name, ...args) {
     for(const handler of this[handlers].get(name) || [])
        handler(...args);
   }
}

您可以用作：

const obj = new EventEmitter();
obj.on("test", alert);
obj.trigger("test", "hello world!");

或具有继承性：

class Custom extends EventEmitter { /*...*/ }

自定义对象事件

2 个答案: