Attaching properties to bubbled event object in Javascript

In Chrome/Firefox I can attach my custom properties to an event object in one handler and read them in a different handler for the same event even if the event handling is bubbled up.

I cannot do the same in IE. My custom property is lost while event is bubbled up.
Do you know if there’s any solution or workaround to this?

  • What is the default event order in JavaScript? Top-down or Bottom-up?
  • capture click on div surrounding an iframe
  • Prevent scroll bubbling
  • how to ensure binding to hashChange event does not bubble?
  • Why firing a defined event with dispatchEvent doesn't obey the bubbling behavior of events?
  • Example for Bubbling and Capturing in React.js
  • The following is an example of that problem:

    <div id="div1">
    <input type="button" value="Foo" id="button1">
    </div>
    
    <script>
    
    function attach(el, event, fn) {
      if (el.addEventListener) {
        el.addEventListener(event, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on'+event, fn);
      }
    
    }
    
    attach(document.getElementById("button1"), 'click', function (event) {
    event.abc = "done";
    return true;
    });
    
    attach(document.getElementById("div1"), 'click', function (event) {
    alert(event.abc);
    return true;
    });
    
    </script>
    

  • how to use event bubbling cancellation
  • Javascript Event Bubbling
  • Understanding event bubbling in javascript
  • capture click on div surrounding an iframe
  • disabled input stops event bubbling
  • Javascript : How to enable stopPropagation?
  • One Solution collect form web for “Attaching properties to bubbled event object in Javascript”

    According with my test you cannot add property to event object in IE (IE8 tested).

    Try next code:

    attach(document.getElementById("button1"), 'click', function (ev) {
      //ev=ev||event;
      //ev.abc = "done";
      // next lines show you why you cannot save properties in event object
      var xx1=event;
      var xx2=event;
      alert(xx1===xx2); // // showed *false* in IE8, but expected *true*
    
      return true;
    });
    

    I am not sure but maybe, when event object is requested, IE8 always return new object, that contains same properties/values as previous requested.