Focus & blur event delegation

by dipish

HTML

<p>Goal: consistently know when the container ("panel") is focused.</p>
<div id="container" class="container" tabindex="0">
    <p><button>Click me</button></p>
    <p><button>Click me too</button></p>
    <p><input type="text" /></p>
    <p><input type="radio" /></p>
    <p><input type="checkbox" /></p>
    <div class="boxee" tabindex="0">I am a boxee<br />
        here's a <a href="#" tabIndex="0">link <em>with</em> tabindex</a>,<br />
        here's a <a href="#">link <em>without</em> tabindex</a>
    </div>
</div>

CSS

body {margin: 10px;}

.container {
    padding: 10px;
    border: solid 1px blue;
}

.boxee {
    padding: 5px;
    margin: 5px 0;
    border: solid 1px green;
}

JavaScript

var cont = document.getElementById('container'),
    onFocus = function(e) {
        console && console.log('focus: target =', e.target, ', relatedTarget =', e.relatedTarget);
        // don't care about IE<8
        cont.setAttribute('style', 'border-color: red;');
    },
    onBlur = function(e) {
        console && console.log('blur: target =', e.target, ', relatedTarget =', e.relatedTarget);
        cont.setAttribute('style', '');
    };

if(cont.addEventListener) {
    // use capture phase
    cont.addEventListener('focus', onFocus, true);    
    cont.addEventListener('blur', onBlur, true);
} else {
    // 'focusin' and 'focusout' bubble
    cont.attachEvent('focusin', onFocus);
    cont.attachEvent('focusout', onBlur);
}