How set the EventTarget of an Event

Question

How to set the EventTarget of a Event.

var myObj = {foo: 'bar'}; var event = new Event('eventName'); event.target = myObj; 

Will result in the following error:

Uncaught TypeError: Cannot set property target of #<Event> which has only a getter 

Edit:

I want to write something like this, where my class will be the target:

class MyClass {    constructor() {     this.listeners = {};   }    addEventListener(type, callback) {     if (!(type in this.listeners)) {       this.listeners[type] = [];     }     this.listeners[type].push(callback);   }    removeEventListener() {     if (!(type in this.listeners)) {       return;     }     var stack = this.listeners[type];     for (var i = 0, l = stack.length; i < l; i++) {       if (stack[i] === callback) {         stack.splice(i, 1);         return this.removeEventListener(type, callback);       }     }   }    dispatchEvent(event) {     if (!(event.type in this.listeners)) {       return;     }     var stack = this.listeners[event.type];     event.target = this;     for (var i = 0, l = stack.length; i < l; i++) {       stack[i].call(this, event);     }   }  }  let myInstance = new MyClass(); let event = new Event('eventName'); myInstance.dispatchEvent(); 

More info: https://developer.mozilla.org/en/docs/Web/API/EventTarget

Answer 1

Okay - I just had a brainwave and so here's another answer for you that's very naughty and might just work. (worked for me ;)

Instead of doing event.target = myObj, you could try:

Object.defineProperty(event, 'target', {writable: false, value: myObj}); 

I may be wrong here, but I think what happens is that the new target property hides the original one. It doesn't work the same way as the browser internal event dispatching, and the browser event handling code will almost certainly ignore it, but it might just be enough to fool javascript code that relies on Event.target.

Also, be careful to test it in different browsers, as some browsers might define Event.target as a non-configurable property.

Answer 2

Regarding your edit, it markedly changes the question. The answer now is: Don't use CustomEvent, you're trying to use it for something other than its intended purpose. Just use your own object, as you never dispatch the event to a DOM element.

---

It's set automatically when you dispatch the event:

targetElement.dispatchEvent(event); 

If you want to include custom data other than the element with the event, simply add it as a property:

event.data = myObj; 

Example:

"use strict";  var div = document.getElementById("target");    div.addEventListener(    "eventName",    function(e) {      console.log("e.target:", e.target);      console.log("e.data:", e.data);    },    false  );    var myObj = {foo: "bar"};  var event = new Event("eventName");  event.data = myObj;  div.dispatchEvent(event);

<div id="target"></div>