38

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?

3 Answers 3

43

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/

7
  • 2
    I just tested this on IE10/9 and it works. This should be the correct solution. Sep 11, 2013 at 23:25
  • bummer, no IE8 support. Dec 3, 2014 at 22:50
  • This is exactly what I needed, thank you. This should really be documented on MDN.
    – nils
    Aug 20, 2015 at 6:46
  • this will break the js if the event was triggered with javascript (originalEvent will be undefined).
    – Smern
    Oct 20, 2016 at 20:30
  • @nils every object in JavaScript is an expando object, i.e. you can attached anything to it as you please. This is not a feature of the event system but of JavaScript that can be used in this particular way.
    – Lukas
    Jan 18, 2017 at 15:18
5

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/

4
  • 1
    This solution works the first time the event is fired, but the data persists through multiple events (on the jsfiddle, try clicking multiple times and see what happens). Would really love a way of associating data with a specific click as it bubbles up, as opposed to a specific element...
    – josh
    Jun 29, 2012 at 20:02
  • @josh - Why don't you just remove the data when it hits the outermost element? See here. Jun 29, 2012 at 21:24
  • 1
    Downvoted because it doesn't answer the question asked by the OP: "attaching data to a jQuery event object". The second highest voted answer does just that and should be on top, and the accepted answer... Feb 27, 2014 at 10:09
  • Agreed that this is not the ideal solution - modifying the originalEvent should be the accepted answer
    – dearlbry
    Feb 27, 2014 at 18:55
0

Maybe I've misunderstood the question, but I came across this StackOverflow page whilst searching for a way to do the same thing.

I have since found that you can return the value/values that you want to pass at the end of each handler and then access them in subsequent handlers using the event.result property?

Simple demo at http://api.jquery.com/event.result/

1
  • I don't believe this is the correct answer. It's not working for me after the event has bubbled higher up the DOM.
    – Dave 114
    Dec 9, 2018 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.