modify event data during propagation

Question

Is there any way of attaching data to a jQuery event object as it propagates up the DOM?

To clarify, if you have three nested divs, each with a click event listener, then clicking on the innermost div results in all three handlers being called from the innermost to the outermost (event propagation 101). What I'd like to do is add some data to the event object in each handler that's accessible to the next layer up.

How do I do that?

Answer 1

The event object that is passed by jQuery is a wrapper around the native event object. The bubbling happens at the javascript/browser level and hence the native event object seems to be shared among all the event handlers.

$('div').click(function(e) {     e.originalEvent.attribute =  (e.originalEvent.attribute || "") +          " " + $(this).prop("className");     alert(e.originalEvent.attribute); }); 

Tested in Chrome, Firefox, Safari, IE9 and IE10. If you test in other browsers please comment with the results.

Here's the fiddle: http://jsfiddle.net/5AQqD/

Answer 2

Although you cannot attach data directly to the event, you could still attach data to the targetElement via jQuery's data():

$('div').click(function(e) {     var info = $(e.target).data('info') || '';     $(e.target).data('info', info + ' ' + $(this).attr('class')); }); 

Here's the fiddle: http://jsfiddle.net/eKVmU/