如何使用JavaScript EventTarget？

本文介绍了如何使用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））; //你好！ 我想知道如何做到这一点，而不必使用虚拟元素解决方案此前我已经放弃了，但最近又需要了。这是我最后使用的。 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'）） 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 EventTargetMy implementation attemptvar Emitter = function Emitter() { EventTarget.call(this);};Emitter.prototype = Object.create(EventTarget.prototype, { constructor: { value: Emitter }});My desired usagevar e = new Emitter();e.addEventListener("hello", function() { console.log("hello there!");});e.dispatchEvent(new Event("hello"));// "hello there!"Where it failsvar e = new Emitter();// TypeError: Illegal constructorWhat am I doing wrong?UpdateThe following is possible, but it's a hack that depends on a dummy DOMElementvar 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.class Emitter { constructor() { var delegate = document.createDocumentFragment(); [ 'addEventListener', 'dispatchEvent', 'removeEventListener' ].forEach(f => this[f] = (...xs) => delegate[f](...xs) ) }}// sample class to use Emitterclass Example extends Emitter {}// run itvar e = new Example()e.addEventListener('something', event => console.log(event))e.dispatchEvent(new Event('something'))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 itfunction Example() { Emitter.call(this)}// run itvar 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 compatiblefunction 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！