Question

174

How to use JavaScript EventTarget?

rated 0 times [ 180] [ 6] / answers: 1 / hits: 33502 / 10 Years ago, wed, march 5, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austynp

Add To Favorites

Follow

Total Points: 505

Total Questions: 118

Total Answers: 106

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

austynp questions

1 How to make puppeteer wait for page redirect from Cloudflare browser check?

Tue, Apr 20, 21, 00:00, 3 Years ago

1 Redux createAsyncThunk vs useEffect hook

Sun, Apr 11, 21, 00:00, 3 Years ago

1 How to type an object key in Typescript?

Sat, Feb 6, 21, 00:00, 3 Years ago

1 How do I send image data from a url using express?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Can I wait for a process to complete when consuming RabbitMQ messages with Node.js?

Mon, Mar 9, 20, 00:00, 4 Years ago

View All

answered 10 Years ago tristani · Accepted Answer

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