Click Event Detail Inspector

by Josh Carroll

HTML

<div id="clickable">Click Me</div>
<div id="eventDetail"></div>

CSS

#clickable {
    font-size: 3em;
}
.label {
    display: inline-block;
    width: 150px;
}
.new {
    color: #396800;
}
.modified {
    font-size: 1.25em;
    color: #6D0000;
}
.unmodified {
    color: #848484;
}

JavaScript

(function () {
    var clickable = document.getElementById("clickable"),
        detail = document.getElementById("eventDetail"),
        lastEvent;

    clickable.addEventListener("click", function (event) {
        var details = [];

        for (var prop in event) {

            var changeState = 'new';

            if (lastEvent && lastEvent[prop] !== event[prop]) {
                changeState = 'modified';
            } else if (lastEvent) {
                changeState = 'unmodified';
            }

            details.unshift("<div class='" + prop + " " + changeState + "'><span class='label'>" + prop + "</span>: <span class='value'>" + event[prop] + "</span></div>");

        }

        lastEvent = event;

        detail.innerHTML = details.join("\n");
    }, false);
}());