<div class="intro">
<p>The `event-focus` module supplies a behavior patch for the native
`focus` and `blur` events to allow them to bubble for event delegation.</p>
</div>
<h2>Bubble time</h2>
<p>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.</p>
<p>But <a href="delegation.html">we like event delegation</a> so we determined
a way to synthesize bubbling for `focus` and `blur` using <a
href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">capture phase</a>
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.</p>
```
<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>
```