The focus and blur Event Fix

Bubble time

Most DOM events bubble. If, for example, you click on a button in a form, the click event will be dispatched to event subscribers on the button, on the fieldset, on the form, on the div containing the form, and so on up to the document. You can subscribe to the click event at any level and your callback will be executed. But focus and blur aren't like that. They are only dispatched to subscribers on the element that received or lost focus.

But we like event delegation so we determined a way to synthesize bubbling for focus and blur using capture phase subscriptions in non-IE browsers, and proprietary focus-related events in IE that do bubble. The result should be transparent for individual element focus and blur subscriptions, but make focus and blur work as you would expect when subscribing higher in the document tree.

<ul id="items">
    <li><input value="form elements are focusable by default"></li>
    <li><a href="yahoo.com">Links are focusable by default</a></li>
    <li tabindex="2">Things with `tabindex` 0 or higher are made user focusable</li>
    <li tabindex="-1">Things with `tabindex` -1 can be focused programatically</li>
    <li>But by default none of those `focus` events will report to #items</li>
</ul>
<script>
YUI().use('node-base', function (Y) {
    var items = Y.one('#items');

    items.on('focus', function (e) {
        Y.log("The list does not have a tabindex, so this will never execute");
    });

    Y.use('event-focus', function () {
        items.on('focus', function (e) {
            Y.log("But now that event-focus is in place, future " +
                  "subscriptions like this one will.");

            // e.target received focus
        });
    });
});
</script>