JavaScript Event creation with customly attached data

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.

Rob W · Accepted Answer · 2012-01-30 22:08:04Z

25

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"

answered Jan 30, 2012 at 22:08

Rob W

351k87 gold badges811 silver badges683 bronze badges

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

2 Comments

Alp Over a year ago

So easy that it hurts! Thanks alot :)

Steven Stark Over a year ago

Event.initEvent is depreciated. see: developer.mozilla.org/en-US/docs/Web/Guide/Events/…

wezzy · Accepted Answer · 2012-01-30 22:07:46Z

8

your evObj it's a normal object you can add any data as a property of the object like evObj.myData = "blablabla"; and then read the data in the listener

Hope this helps

answered Jan 30, 2012 at 22:07

wezzy

5,9453 gold badges33 silver badges42 bronze badges

1 Comment

Anmol Saraf Over a year ago

Similar answer but +1 since this was posted a minute earlier than the above answer!

Collectives™ on Stack Overflow

JavaScript Event creation with customly attached data

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related