JSFiddle - React, Tailwind, and code Playground

by premasagar

HTML

<!--
* EXPLANATION *
This is an investigation into finding a DOM event that fires when a select element is closed.

See the accompanying question on Stack Overflow:
http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed

* WHAT TO DO *
1) Click on the select in the "Result" panel
2) Click on the text marked "HERE" (or anywhere else) with a single click and see if any event is added to the log. There isn't an event in the latest Chrome or Firefox.

What JavaScript could be added, to get an event logged on that second click?

It's not the `blur` event of the select, because the select retains focus. Likewise, it's not the `focus` event of some other element or the document.

It's not the `change` event of the select, since no option within the select has been changed.

I'm not concerned about legacy Internet Explorers - just something to work in standards compliant modern browsers. Proprietary hacks could be worth knowing though.

-->

<select id="select">
        <option id="option">1</option>
        <option>2</option>
</select>

<strong id="here">HERE</strong>

<ul id="log"></ul>

CSS

#log {
    margin-top:2em;
}

#log li {
    padding-bottom:2px;
    border-bottom:1px solid #ccc;
}

#select, #here {
    position:fixed; /* so that the they don't scroll out of view when the log fills up */
}

#here {
    left:5em;
    font-weight:bold;
}

JavaScript

var log = document.getElementById("log"),
    select = document.getElementById("select"),
    option = document.getElementById("option");

function logEvent(elem, eventName){
    elem.addEventListener(eventName, function(event){
        /* LOGGED MESSAGES *
        1) the element that the listener was bound to
        2) the event name
        3) the element that triggered the event
        */
        log.innerHTML += "<li>" +
            (elem.nodeName || "window") + ", " +
            eventName + ", " +
            (event.target.nodeName || "window") +
        "</li>";
    }, false);
}

// Log events on window
logEvent(window, "mousedown");
logEvent(window, "click");

// Log events on document
logEvent(document, "mousedown");
logEvent(document, "click");

// Log events on body
logEvent(document.body, "mousedown");
logEvent(document.body, "click");

// Log events on select element
logEvent(select, "mousedown");
logEvent(select, "click");
logEvent(select, "focus");
logEvent(select, "blur");
logEvent(select, "change");

// Log events on first option element
logEvent(option, "mousedown");
logEvent(option, "click");
logEvent(option, "focus");
logEvent(option, "blur");
logEvent(option, "change");