如何使用JavaScript EventTarget？ [英] How to use JavaScript EventTarget?

问题描述

我想在客户端程序中创建一个自定义的事件发射器。我引用了 EventTarget 的这个（稀疏）文档

我的实现尝试

  var Emitter = function Emitter（）{
 EventTarget.call（this）; 
}; 
 
 Emitter.prototype = Object.create（EventTarget.prototype，{
 constructor：{
 value：Emitter 
} 
}）; 
  

我想要的用法

  var e = new Emitter（）; 
 
 e.addEventListener（hello，function（）{
 console.log（hello there！）; 
}）; 
 
 e.dispatchEvent（new Event（hello））; 
 //你好！ 
  

失败的地方

  var e = new Emitter（）; 
 // TypeError：非法构造函数
  

我做错了什么？

---

更新

以下是可能的，但是这是一个黑客，取决于一个虚拟的DOMElement

  var fake = document.createElement（phony）; 
 fake.addEventListener（hello，function（）{console.log（hello there！）;}）; 
 fake.dispatchEvent（new Event（hello））; 
 //你好！ 
  

我想知道如何做到这一点，而不必使用虚拟元素

解决方案

此前我已经放弃了，但最近又需要了。这是我最后使用的。

ES6

< pre class =snippet-code-js lang-js prettyprint-override> class Emitter {constructor（）{var delegate = document.createDocumentFragment（）; ['addEventListener'，'dispatchEvent'，'removeEventListener'] .forEach（f => this [f] =（... xs）=> delegate [f]（... xs））}} // sample类使用Emitterclass示例extends Emitter {} //运行itvar e = new Example（）e.addEventListener（'something'，event => console.log（event））e.dispatchEvent（new Event（'something'））

---

ES5

  Emitter（）{var eventTarget = document.createDocumentFragment（）函数delegate（method）{this [method] = eventTarget [method] .bind（eventTarget）} [addEventListener，dispatchEvent，removeEventListener ，this）} //使用它的示例类函数Example（）{Emitter.call（this）} //运行itvar e = new Example（）e.addEventListener（something，function（event）{console.log（event）}）e.dispatchEvent（new Event（something）） pre> 

是啊！

---

对于那些需要支持旧版本的ecmascript的用户，你可以去这里

  // IE< 9兼容
函数Emitter（）{
 var eventTarget = document.createDocumentFragment（）; 
 
函数addEventListener（type，listener，useCapture，wantedUntrusted）{
 return eventTarget.addEventListener（type，listener，useCapture，wantedUntrusted）; 
} 
 
函数dispatchEvent（event）{
 return eventTarget.dispatchEvent（event）; 
} 
 
 function removeEventListener（type，listener，useCapture）{
 return eventTarget.removeEventListener（type，listener，useCapture）; 
} 
 
 this.addEventListener = addEventListener; 
 this.dispatchEvent = dispatchEvent; 
 this.removeEventListener = removeEventListener; 
} 
  

使用情况保持不变

I would like to create a custom event emitter in my client-side programs. I am referencing this (sparse) documentation for EventTarget

My implementation attempt

var Emitter = function Emitter() {
  EventTarget.call(this);
};

Emitter.prototype = Object.create(EventTarget.prototype, {
  constructor: {
    value: Emitter
  }
});

My desired usage

var e = new Emitter();

e.addEventListener("hello", function() {
  console.log("hello there!");
});

e.dispatchEvent(new Event("hello"));
// "hello there!"

Where it fails

var e = new Emitter();
// TypeError: Illegal constructor

What am I doing wrong?

---

Update

The following is possible, but it's a hack that depends on a dummy DOMElement

var fake = document.createElement("phony");
fake.addEventListener("hello", function() { console.log("hello there!"); });
fake.dispatchEvent(new Event("hello"));
// "hello there!"

I'd like to know how to do this without having to use the dummy element

解决方案

I gave up on this awhile ago, but recently needed it again. Here's what I ended up using.

ES6

class Emitter {
  constructor() {
    var delegate = document.createDocumentFragment();
    [
      'addEventListener',
      'dispatchEvent',
      'removeEventListener'
    ].forEach(f =>
      this[f] = (...xs) => delegate[f](...xs)
    )
  }
}

// sample class to use Emitter
class Example extends Emitter {}

// run it
var e = new Example()
e.addEventListener('something', event => console.log(event))
e.dispatchEvent(new Event('something'))

---

ES5

function Emitter() {
  var eventTarget = document.createDocumentFragment()

  function delegate(method) {
    this[method] = eventTarget[method].bind(eventTarget)
  }

  [
    "addEventListener",
    "dispatchEvent",
    "removeEventListener"
  ].forEach(delegate, this)
}

// sample class to use it
function Example() {
  Emitter.call(this)
}

// run it
var e = new Example()

e.addEventListener("something", function(event) {
  console.log(event)
})

e.dispatchEvent(new Event("something"))

Yeah!

---

For those that need to support older versions of ecmascript, here you go

// IE < 9 compatible
function Emitter() {
  var eventTarget = document.createDocumentFragment();

  function addEventListener(type, listener, useCapture, wantsUntrusted) {
    return eventTarget.addEventListener(type, listener, useCapture, wantsUntrusted);
  }

  function dispatchEvent(event) {
    return eventTarget.dispatchEvent(event);
  }

  function removeEventListener(type, listener, useCapture) {
    return eventTarget.removeEventListener(type, listener, useCapture);
  }

  this.addEventListener = addEventListener;
  this.dispatchEvent = dispatchEvent;
  this.removeEventListener = removeEventListener;
}

The usage stays the same

这篇关于如何使用JavaScript EventTarget？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！