addEventListener on custom object

Question

var elem =Object.create(CustomEvent.prototype)
     elem.arr = [1,2,3];

     elem.addEventListener("added_item", function(event) {
      elem.push(10);
      console.log( event.detail.name );
     }, false);

     var event = new CustomEvent("added_item", {
      detail: { name: "Вася" }
     });

     elem.dispatchEvent(event);
     elem.dispatchEvent(event);
     elem.dispatchEvent(event);
     elem.dispatchEvent(event);


     console.log(elem);

index.html:40 Uncaught TypeError: elem.addEventListener is not a function

CustomEvent works only with HTMLElements ?

What 's alternative ?

`CustomEvent` represents a single instance of an event (e.g. a click, a mouseover, etc.). Instances of `CustomEvent` don't have an `addEventListener` method because they don't generate events; they _are_ events. — JLRishe, Feb 13 '17 at 08:19
Possible duplicate of [Implementing events in my own object](https://stackoverflow.com/questions/10978311/implementing-events-in-my-own-object) — rogerdpack, Dec 11 '17 at 22:51

score 2 · Accepted Answer · answered Feb 13 '17 at 08:54

As noted in the comments, you need elem to be an event target, not an event. AFAIK, there isn't a way to use the built-in EventTarget for your own purposes, but MDN provides a simple implementation for EventTarget that you can instantiate and use for yourself:

var MyEventTarget = function() {
  this.listeners = {};
};

MyEventTarget.prototype.listeners = null;
MyEventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

MyEventTarget.prototype.removeEventListener = function(type, callback) {
  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);
    }
  }
};

MyEventTarget.prototype.dispatchEvent = function(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);
  }
};

var elem = new MyEventTarget()
elem.arr = [1, 2, 3];

elem.addEventListener("added_item", function(event) {
  elem.arr.push(10);
  console.log(event.detail.name);
}, false);

var event = new CustomEvent("added_item", {
  detail: {
    name: "Вася"
  }
});

elem.dispatchEvent(event);
elem.dispatchEvent(event);
elem.dispatchEvent(event);
elem.dispatchEvent(event);


console.log(elem);

Bartek Fryzowicz · Answer 2 · 2017-02-13T08:58:36.743

1

DOM elements expose API with methods like addEvenetListent or dispatchEvent but those methods are not defined on CustomEvent prototype.

edited Feb 13 '17 at 08:58

answered Feb 13 '17 at 08:18

Bartek Fryzowicz

6,464
18
27

1

To nitpick, other objects have this method. e.g XMLHttpRequest, FileReader, AudioContext ... – Kaiido Feb 13 '17 at 08:54

addEventListener on custom object

2 Answers2