Add example showing how to do focus delegation in js

Author: frivoal

index.bs

@@ -435,7 +435,7 @@ The {{Element/seqNavSearch()}} method must follow these steps:
 
 </div>
 
-<div class=example>
+<div class=example id=focus-only>
     The following code changes the behavior of spatial navigation
     from scrolling when there is no focusable element visible,
     to jumping to focusable elements even when they are not visible.
@@ -457,6 +457,32 @@ The {{Element/seqNavSearch()}} method must follow these steps:
     </code></pre>
 </div>
 
+<div class=example id=delegation>
+    The following code changes the behavior of spatial navigation
+    so that when a scroll container would get focused,
+    if it has at least one visible focusable descendant,
+    the focus is automatically transfered to it.
+
+    <pre><code highlight=javascript>
+    document.addEventListener("navbeforefocus", function(e) {
+        e.preventDefault();
+
+        var e1 = e.relatedTarget;
+	while (e1.isSameNode(e1.getSpatnavContainer())) {
+            var areas = e1.focusableAreas();
+
+            if (areas.length == 0)) { break; }
+
+            e1 = e1.spatNavSearch({
+                dir: e.dir,
+                candidates: areas
+            });
+        }
+        e1.focus();
+    });
+    </code></pre>
+</div>
+
 
 <h2 id="events-navigationevent">
 Navigation Events</h2>