e8838207238c3ffb22159e51deb37ec24ba89c76Till Mossakowski<div class="intro">

60c9fc413e77110e71b7e8c41ffbc645b4ed90b4Julian Kornberger <p>The `event-focus` module supplies a behavior patch for the native

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale `focus` and `blur` events to allow them to bubble for event delegation.</p>

fb0fc9c7ffa0a722fec20358a243cc42af57a4fbhenning mueller</div>

5c4c13ac875d79def115ce3d8443d4ec87b3252aJulian Kornberger

5c4c13ac875d79def115ce3d8443d4ec87b3252aJulian Kornberger<h2>Bubble time</h2>

5c4c13ac875d79def115ce3d8443d4ec87b3252aJulian Kornberger

ee5342a8882c2fc7631fcffb5497e6597747887cTim Reddehase<p>Most DOM events bubble. If, for example, you click on a button in a form,

db7b1bfd41eb01238f00c7df022f4c11d6414e8cEugen Kuksathe click event will be dispatched to event subscribers on the button, on the

0af513ab5680818fba780f05ef7cf16e0c0cb0d8henning muellerfieldset, on the form, on the div containing the form, and so on up to the

827e98b08be3acd813ab859061f7e6318b7f8abdDaniel Couto Vale`document`. You can subscribe to the click event at any level and your

b17c7a521e12ece55af76387a9668acb5f830d43Sascha Graefcallback will be executed. But `focus` and `blur` aren't like that. They are

827e98b08be3acd813ab859061f7e6318b7f8abdDaniel Couto Valeonly dispatched to subscribers on the element that received or lost focus.</p>

7152ae731eaa6fb83bc8147a463fae3a342d6360Sascha Graef

ee5342a8882c2fc7631fcffb5497e6597747887cTim Reddehase<p>But <a href="delegation.html">we like event delegation</a> so we determined

4c72e6358f909d53733ce548ee694a4c17923a4aSascha Graefa way to synthesize bubbling for `focus` and `blur` using <a

5c4c13ac875d79def115ce3d8443d4ec87b3252aJulian Kornbergerhref="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">capture phase</a>

5c4c13ac875d79def115ce3d8443d4ec87b3252aJulian Kornbergersubscriptions in non-IE browsers, and proprietary focus-related events in IE

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Valethat do bubble. The result should be transparent for individual element

268e4c0f7fc6630f88604079ab4ede1b8963ec6aSascha Graef`focus` and `blur` subscriptions, but make `focus` and `blur` work as you would

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning muellerexpect when subscribing higher in the document tree.</p>

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning mueller

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning mueller```

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning mueller<ul id="items">

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning mueller <li><input value="form elements are focusable by default"></li>

711ce1a76c8f102d2ca385962515cdb93c44062cSascha Graef <li><a href="yahoo.com">Links are focusable by default</a></li>

1d405fd1ac68b72d526b1637cb34d507ae24c56ahenning mueller <li tabindex="2">Things with `tabindex` 0 or higher are made user focusable</li>

0af513ab5680818fba780f05ef7cf16e0c0cb0d8henning mueller <li tabindex="-1">Things with `tabindex` -1 can be focused programatically</li>

8e48b4c76e2fa30469470d03d6e7e403e8419ac4Sascha Graef <li>But by default none of those `focus` events will report to #items</li>

86ef19586a07f694886961e298f793803b8f4d54henning mueller</ul>

41292ec9bfaafec2c0592a3ac0092e4c412ee7e8henning mueller<script>

19c33b67e5f1d783f812f85d2f681949484f925bEugen KuksaYUI().use('node-base', function (Y) {

0af513ab5680818fba780f05ef7cf16e0c0cb0d8henning mueller var items = Y.one('#items');

0af513ab5680818fba780f05ef7cf16e0c0cb0d8henning mueller

382ec34953d9d1397c3843bd070c4ca327b85b1eTim Reddehase items.on('focus', function (e) {

fd1ba5089163d3398ebcdca8487de1ca8f07c47chenning mueller Y.log("The list does not have a tabindex, so this will never execute");

fd1ba5089163d3398ebcdca8487de1ca8f07c47chenning mueller });

fd1ba5089163d3398ebcdca8487de1ca8f07c47chenning mueller

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale Y.use('event-focus', function () {

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale items.on('focus', function (e) {

ee5342a8882c2fc7631fcffb5497e6597747887cTim Reddehase Y.log("But now that event-focus is in place, future " +

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale "subscriptions like this one will.");

46dd7ca898be6d5dbdfda64fd90ce01e253c0878Julian Kornberger

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale // e.target received focus

46dd7ca898be6d5dbdfda64fd90ce01e253c0878Julian Kornberger });

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale });

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale});

88d63c94a94060017febcabb0862b11ed3685f6aDaniel Couto Vale</script>

ee5342a8882c2fc7631fcffb5497e6597747887cTim Reddehase```

842726a3413b4f5a2df208ef91dfe425088fb876Tim Reddehase