自定义对象事件

Question

我正在尝试从我的自定义对象发出自定义事件，如下所示：

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

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

Answer 1

对象没有事件。您必须自己实现该功能，然后您可以使用 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 { /*...*/ }

Answer 2

最近，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 的构造函数的支持不够好 – 参见上面的 link –，它是一个 Web API，表示仅在浏览器环境中受支持。

自定义对象事件

Custom Object events

javascript

events

custom-events