Add focusin and focusout events

These events are already implemented in browsers and are documented on
MDN. This PR also adds onfocusin and onfocusout event handler content
attributes.

whatwg#3514 tracks this and other focus
events.

Fixes whatwg#10234

source

@@ -13135,6 +13135,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code data-x="handler-onended">onended</code></li>
    <li><code data-x="handler-onerror">onerror</code>*</li>
    <li><code data-x="handler-onfocus">onfocus</code>*</li>
+   <li><code data-x="handler-onfocusin">onfocusin</code>*</li>
+   <li><code data-x="handler-onfocusout">onfocusout</code>*</li>
    <li><code data-x="handler-onformdata">onformdata</code></li>
    <li><code data-x="handler-oninput">oninput</code></li>
    <li><code data-x="handler-oninvalid">oninvalid</code></li>
@@ -79840,9 +79842,17 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
      target</var> be null.</p></li>
 
      <li>
-      <p>If <var>blur event target</var> is not null, <span>fire a focus event</span>
-      named <code data-x="event-blur">blur</code> at <var>blur event target</var>, with
-      <var>related blur target</var> as the related target.</p>
+      <p>If <var>blur event target</var> is not null:</p>
+
+      <ol>
+       <li><p><span>Fire a focus event</span> named <code data-x="event-blur">blur</code> at
+       <var>blur event target</var>, with <var>related blur target</var> as the related target and
+       bubbles set to false.</p></li>
+
+       <li><p><span>Fire a focus event</span> named <code data-x="event-focusout">focusout</code> at
+       <var>blur event target</var>, with <var>related blur target</var> as the related target and
+       bubbles set to true.</p></li>
+      </ol>
 
       <p class="note" id="note-sometimes-no-blur-event">In some cases, e.g., if <var>entry</var> is
       an <code>area</code> element's shape, a scrollable region, or a <span>viewport</span>, no
@@ -79890,9 +79900,17 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
      focus target</var> be null.</p></li>
 
      <li>
-      <p>If <var>focus event target</var> is not null, <span>fire a focus event</span>
-      named <code data-x="event-focus">focus</code> at <var>focus event target</var>, with
-      <var>related focus target</var> as the related target.</p>
+      <p>If <var>focus event target</var> is not null:</p>
+
+      <ol>
+       <li><p><span>Fire a focus event</span> named <code data-x="event-focus">focus</code> at
+       <var>focus event target</var>, with <var>related focus target</var> as the related target and
+       bubbles set to false.</p></li>
+
+       <li><p><span>Fire a focus event</span> named <code data-x="event-focusin">focusin</code> at
+       <var>focus event target</var>, with <var>related focus target</var> as the related target and
+       bubbles set to true.</p></li>
+      </ol>
 
       <p class="note">In some cases, e.g. if <var>entry</var> is an <code>area</code>
       element's shape, a scrollable region, or a <span>viewport</span>, no event is fired.</p>
@@ -79902,12 +79920,12 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   </ol>
 
   <p>To <dfn>fire a focus event</dfn> named <var>e</var> at an element <var>t</var> with a given
-  related target <var>r</var>, <span data-x="concept-event-fire">fire an event</span> named
-  <var>e</var> at <var>t</var>, using <code>FocusEvent</code>, with the <code
+  related target <var>r</var> and bubbles <var>b</var>, <span data-x="concept-event-fire">fire an
+  event</span> named <var>e</var> at <var>t</var>, using <code>FocusEvent</code>, with the <code
   data-x="dom-FocusEvent-relatedTarget">relatedTarget</code> attribute initialized to <var>r</var>,
-  the <code data-x="dom-UIEvent-view">view</code> attribute initialized to <var>t</var>'s
-  <span>node document</span>'s <span>relevant global object</span>, and the <span>composed
-  flag</span> set.</p>
+  the <code data-x="dom-UIEvent-view">view</code> attribute initialized to <var>t</var>'s <span>node
+  document</span>'s <span>relevant global object</span>, the <span>composed flag</span> set, and
+  <code data-x="dom-Event-bubbles">bubbles</code> attribute initialized to <var>b</var>.</p>
 
   <hr>
 
@@ -111388,6 +111406,8 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onblur">onblur</code></dfn> <td> <code data-x="event-blur">blur</code> <!-- widely used -->
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onerror">onerror</code></dfn> <td> <code data-x="event-error">error</code>
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onfocus">onfocus</code></dfn> <td> <code data-x="event-focus">focus</code> <!-- widely used -->
+    <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onfocusin">onfocusin</code></dfn> <td> <code data-x="event-focusin">focusin</code>
+    <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onfocusout">onfocusout</code></dfn> <td> <code data-x="event-focusout">focusout</code>
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onload">onload</code></dfn> <td> <code data-x="event-load">load</code>
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onresize">onresize</code></dfn> <td> <code data-x="event-resize">resize</code>
     <tr><td><dfn attribute for="GlobalEventHandlers"><code data-x="handler-onscroll">onscroll</code></dfn> <td> <code data-x="event-scroll">scroll</code>
@@ -111494,6 +111514,8 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
   attribute <span>EventHandler</span> <span data-x="handler-onended">onended</span>;
   attribute <span>OnErrorEventHandler</span> <span data-x="handler-onerror">onerror</span>;
   attribute <span>EventHandler</span> <span data-x="handler-onfocus">onfocus</span>;
+  attribute <span>EventHandler</span> <span data-x="handler-onfocusin">onfocusin</span>;
+  attribute <span>EventHandler</span> <span data-x="handler-onfocusout">onfocusout</span>;
   attribute <span>EventHandler</span> <span data-x="handler-onformdata">onformdata</span>;
   attribute <span>EventHandler</span> <span data-x="handler-oninput">oninput</span>;
   attribute <span>EventHandler</span> <span data-x="handler-oninvalid">oninvalid</span>;
@@ -140506,6 +140528,18 @@ interface <dfn interface>External</dfn> {
      <td> <code data-x="event-focus">focus</code> event handler
      <td> <span data-x="event handler content attributes">Event handler content attribute</span>
 
+    <tr>
+     <th id="ix-handler-onfocusin"> <code data-x="">onfocusin</code>
+     <td> <span data-x="handler-onfocusin">HTML elements</span>
+     <td> <code data-x="event-focusin">focusin</code> event handler
+     <td> <span data-x="event handler content attributes">Event handler content attribute</span>
+
+    <tr>
+     <th id="ix-handler-onfocusout"> <code data-x="">onfocusout</code>
+     <td> <span data-x="handler-onfocusout">HTML elements</span>
+     <td> <code data-x="event-focusout">focusout</code> event handler
+     <td> <span data-x="event handler content attributes">Event handler content attribute</span>
+
     <tr>
      <th id="ix-handler-onformdata"> <code data-x="">onformdata</code>
      <td> <span data-x="handler-onformdata">HTML elements</span>
@@ -141439,7 +141473,19 @@ INSERT INTERFACES HERE
      <td> <dfn event for="Window,HTMLElement"><code data-x="event-focus">focus</code></dfn>
      <td> <code>Event</code>
      <td> <code>Window</code>, elements
-     <td> Fired at nodes <span data-x="gains focus">gaining focus</span>
+     <td> Fired at nodes <span data-x="gains focus">gaining focus</span> without bubbling
+
+    <tr> <!-- focusin -->
+     <td> <dfn event for="Window,HTMLElement"><code data-x="event-focusin">focusin</code></dfn>
+     <td> <code>Event</code>
+     <td> <code>Window</code>, elements
+     <td> Fired at nodes <span data-x="gains focus">gaining focus</span> after the <code data-x="event-focus">focus</code> event with bubbling
+
+    <tr> <!-- focusout -->
+     <td> <dfn event for="Window,HTMLElement"><code data-x="event-focusout">focusout</code></dfn>
+     <td> <code>Event</code>
+     <td> <code>Window</code>, elements
+     <td> Fired at nodes when they stop being <span>focused</span> after the <code data-x="event-blur">blur</code> event with bubbling
 
     <tr> <!-- formdata -->
      <td> <dfn event for="HTMLElement"><code data-x="event-formdata">formdata</code></dfn>