focus.mustache revision e9b01de77b1a53553e58caf4f0c5392735102fc1
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<div class="intro">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <p>The `event-focus` module supplies a behavior patch for the native
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith `focus` and `blur` events to allow them to bubble for event delegation.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<h2>Bubble time</h2>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>Most DOM events bubble. If, for example, you click on a button in a form,
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smiththe click event will be dispatched to event subscribers on the button, on the
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithfieldset, on the form, on the div containing the form, and so on up to the
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith`document`. You can subscribe to the click event at any level and your
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithcallback will be executed. But `focus` and `blur` aren't like that. They are
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithonly dispatched to subscribers on the element that received or lost focus.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>But <a href="delegation.html">we like event delegation</a> so we determined
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smitha way to synthesize bubbling for `focus` and `blur` using <a
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithhref="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">capture phase</a>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithsubscriptions in non-IE browsers, and proprietary focus-related events in IE
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smiththat do bubble. The result should be transparent for individual element
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith`focus` and `blur` subscriptions, but make `focus` and `blur` work as you would
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithexpect when subscribing higher in the document tree.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<ul id="items">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li><input value="form elements are focusable by default"></li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li><a href="yahoo.com">Links are focusable by default</a></li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li tabindex="2">Things with `tabindex` 0 or higher are made user focusable</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li tabindex="-1">Things with `tabindex` -1 can be focused programatically</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li>But by default none of those `focus` events will report to #items</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke SmithYUI().use('node-base', function (Y) {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith var items = Y.one('#items');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith items.on('focus', function (e) {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith Y.log("The list does not have a tabindex, so this will never execute");
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith Y.use('event-focus', function () {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith items.on('focus', function (e) {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith Y.log("But now that event-focus is in place, future " +
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith "subscriptions like this one will.");
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith // e.target received focus