Collect Data From Custom Event Handler In Plain Javascript

Question

I'm creating a custom event in plain Javascript and attaching it to a DOM element. The element has multiple event listeners for the same event. The code I've written is:

var element = document.getElementById('demo');

element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    e.data['otherKey'] = 'other value';
    return e.data;
});

// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  data: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

Now what I want is, get the data from last event handler like below:

var modifiedData = element.dispatchEvent(event);

Though I know the above line may not be correct, but I want something like that. If I use jQuery, there is pretty simple thing like $.triggerHandler I can use that iterates over all the listeners for a particular event and gives the return value of last handler if any.

But I want to do it in pure Javascript. Is there any solution for such kind of thing?

Schlaus · Accepted Answer · 2017-02-13 18:18:09Z

1

Just use the detail property and it should work just as you'd expect:

var element = document.getElementById('demo');

element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
    e.detail.otherKey = 'second value';
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    console.log(e.detail);
});

// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  detail: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

<div id="demo"></div>

Per comments, here's an idea how you could achieve what you're hoping to do:

var element = document.getElementById('demo');

var originalFun = element.__proto__.addEventListener.bind(element);

var handlers = {};

var wrapperFun = function(e) {
  if (e.type in handlers) {
    var data = e.detail;
    handlers[e.type].forEach(function(fun){
      data = fun(data) || data;
    });
  }
};

element.__proto__.addEventListener = function(type, handler) {
  if (typeof handlers[type] === 'undefined') {
    handlers[type] = [];
    originalFun(type, wrapperFun);
  }
  handlers[type].push(handler);
};

element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
    e.otherKey = 'second value';
    return e;
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    console.log(e);
});

// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  detail: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

<div id="demo"></div>

edited Feb 13, 2017 at 18:18

answered Feb 13, 2017 at 13:09

Schlaus

19.4k11 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manish Jangir Over a year ago

So can't we get the retrun value?? I need only returned value. What if user returns completely a new object

Schlaus Over a year ago

@ManishJangir That's not how event handlers work in JS. To pass returned objects you're going to have to override addEventListener and wrap handlers into a handler of your own.

Schlaus Over a year ago

@ManishJangir I added an example how you could use return values.

Grynets · Accepted Answer · 2017-02-13 13:02:46Z

0

The easiest way is to save all Event listener results to some object.
Like const eventObj = {};
So, after each event you can just Object.assign(eventObj, <yourDataFromEvent>
More about Object.assign() here

answered Feb 13, 2017 at 13:02

Grynets

2,5351 gold badge21 silver badges41 bronze badges

1 Comment

Manish Jangir Over a year ago

I'm developing a library and I don't expect users to use Object.assign. They can just return a value from the handler so that I can collect that value from the dispatcher.

Collectives™ on Stack Overflow

Collect Data From Custom Event Handler In Plain Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related