Question

Is there a JavaScript way to pass custom data to a manually created JavaScript event?

Ok, let’s say I got this code to create and trigger a JavaScript event:

var evObj = document.createEvent('HTMLEvents');
evObj.initEvent('submit', bubbling, cancelable);
anElement.dispatchEvent(evObj);

This works fine and can be handled by using this code:

document.addEventListener('submit', mySubmitEventHandler, true);

But, I need a way to pass additional data to the event, so that mySubmitEventHandler knows whether the event was fired by a user or by JavaScript event creation as shown above. A boolean value would be sufficient.

So, how can I add something like “myEvent = true” to the newly created evObj?

And please no jQuery answers, I need to do this one in pure JavaScript.

Answer 1

Attach the parameter to evObj.

evObj.flag = 'Hi!';
anElement.dispatchEvent(evObj);

This code demonstrates that the event object passed by dispatchEvent is equal to the one in the event listener (Live demo):

var evObj = document.createEvent('HTMLEvents');
document.body.addEventListener('test', function(e){ alert(e === evObj); },true);
evObj.initEvent('test', true, true);
document.body.dispatchEvent(evObj); // Shows alert, "true"