Modifying events during the event chain.

You can add custom properties to events as they cascade down through the dom. Then, when they bubble up, they'll be preserved.

by danShumway

HTML

<div class="block">
    <div class="block">
        <div class="block"></div>
    </div>
</div>

CSS

.block {
    width:200px;
    height:200px;
    margin:30px;
    background-color:green;
    border-style:solid;
}

JavaScript

/*
All code copyright Daniel Shumway
Licensed under MIT
*/

var element = document.getElementsByClassName("block");
element[0].addEventListener("click", function (e) {
    alert(e.myData); //e is regenerated every time a click starts.
    e.myData = "cat"; //I attach myData on the way down.
}, true); //True means we're listening on the way down the dom.

element[1].addEventListener("click", function (e) {
    alert("bubble down with " + e.myData); //It's preserved all the way down.
}, true);


element[0].addEventListener("click", function (e) {
    alert("bubble up with " + e.myData); //And all the way up.
}, false); //False means we're listening on the way back up the dom.