Always use event capturing. Remove media events.

This commit changes event subscription such that all events are
attached with capturing. This prevents the need to eagerly attach
media event listeners to video, audio, and source tags, and simplifies
the event subscription process.

I think we can probably extend this to more event types; requiring
much more testing. Until that time, this commit lays the foundation
for that work by demonstrating that capturing is applicable in cases
where bubbling does not occur.

Author: nhunzaker

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -966,26 +966,29 @@ describe('ReactDOMComponent', () => {
     });
 
     it('should work error event on <source> element', () => {
-      spyOnDevAndProd(console, 'log');
+      const onError = jest.fn();
       const container = document.createElement('div');
       ReactDOM.render(
         <video>
           <source
             src="http://example.org/video"
             type="video/mp4"
-            onError={e => console.log('onError called')}
+            onError={onError}
           />
         </video>,
         container,
       );
 
-      const errorEvent = document.createEvent('Event');
-      errorEvent.initEvent('error', false, false);
-      container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
+      try {
+        document.body.appendChild(container);
 
-      if (__DEV__) {
-        expect(console.log.calls.count()).toBe(1);
-        expect(console.log.calls.argsFor(0)[0]).toContain('onError called');
+        const errorEvent = document.createEvent('Event');
+        errorEvent.initEvent('error', false, false);
+        container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
+
+        expect(onError).toHaveBeenCalledTimes(1);
+      } finally {
+        container.remove();
       }
     });
 

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

@@ -271,49 +271,7 @@ describe('ReactDOMEventListener', () => {
     document.body.removeChild(container);
   });
 
-  it('should dispatch loadstart only for media elements', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const imgRef = React.createRef();
-    const videoRef = React.createRef();
-
-    const handleImgLoadStart = jest.fn();
-    const handleVideoLoadStart = jest.fn();
-    ReactDOM.render(
-      <div>
-        <img ref={imgRef} onLoadStart={handleImgLoadStart} />
-        <video ref={videoRef} onLoadStart={handleVideoLoadStart} />
-      </div>,
-      container,
-    );
-
-    // Note for debugging: loadstart currently doesn't fire in Chrome.
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
-    imgRef.current.dispatchEvent(
-      new ProgressEvent('loadstart', {
-        bubbles: false,
-      }),
-    );
-    // Historically, we happened to not support onLoadStart
-    // on <img>, and this test documents that lack of support.
-    // If we decide to support it in the future, we should change
-    // this line to expect 1 call. Note that fixing this would
-    // be simple but would require attaching a handler to each
-    // <img>. So far nobody asked us for it.
-    expect(handleImgLoadStart).toHaveBeenCalledTimes(0);
-
-    videoRef.current.dispatchEvent(
-      new ProgressEvent('loadstart', {
-        bubbles: false,
-      }),
-    );
-    expect(handleVideoLoadStart).toHaveBeenCalledTimes(1);
-
-    document.body.removeChild(container);
-  });
-
-  it('should not attempt to listen to unnecessary events on the top level', () => {
+  it('should dispatch media events', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -345,13 +303,6 @@ describe('ReactDOMEventListener', () => {
       onWaiting() {},
     };
 
-    const originalAddEventListener = document.addEventListener;
-    document.addEventListener = function(type) {
-      throw new Error(
-        `Did not expect to add a top-level listener for the "${type}" event.`,
-      );
-    };
-
     try {
       // We expect that mounting this tree will
       // *not* attach handlers for any top-level events.
@@ -374,8 +325,71 @@ describe('ReactDOMEventListener', () => {
       );
       expect(handleVideoPlay).toHaveBeenCalledTimes(1);
     } finally {
-      document.addEventListener = originalAddEventListener;
       document.body.removeChild(container);
     }
   });
+
+  it('does not double dispatch scroll events at the deepest leaf', () => {
+    const top = jest.fn();
+    const middle = jest.fn();
+    const bottom = jest.fn();
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <div id="top" onScroll={top}>
+        <div id="middle" onScroll={middle}>
+          <div id="bottom" onScroll={bottom} />
+        </div>
+      </div>,
+      container,
+    );
+
+    const target = container.querySelector('#bottom');
+    const event = document.createEvent('Event');
+
+    try {
+      document.body.appendChild(container);
+
+      event.initEvent('scroll', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(1);
+    } finally {
+      container.remove();
+    }
+  });
+
+  it('does not double dispatch scroll events at the middle leaf', () => {
+    const top = jest.fn();
+    const middle = jest.fn();
+    const bottom = jest.fn();
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <div id="top" onScroll={top}>
+        <div id="middle" onScroll={middle}>
+          <div id="bottom" onScroll={bottom} />
+        </div>
+      </div>,
+      container,
+    );
+
+    const target = container.querySelector('#middle');
+    const event = document.createEvent('Event');
+
+    try {
+      document.body.appendChild(container);
+
+      event.initEvent('scroll', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    } finally {
+      container.remove();
+    }
+  });
 });

packages/react-dom/src/client/ReactDOMFiberComponent.js

@@ -29,8 +29,7 @@ import {
   TOP_SUBMIT,
   TOP_TOGGLE,
 } from '../events/DOMTopLevelEventTypes';
-import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
-import {mediaEventTypes} from '../events/DOMTopLevelEventTypes';
+import {listenTo, trapEvent} from '../events/ReactBrowserEventEmitter';
 import * as CSSPropertyOperations from '../shared/CSSPropertyOperations';
 import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces';
 import {
@@ -452,41 +451,29 @@ export function setInitialProperties(
   switch (tag) {
     case 'iframe':
     case 'object':
-      trapBubbledEvent(TOP_LOAD, domElement);
-      props = rawProps;
-      break;
-    case 'video':
-    case 'audio':
-      // Create listener for each media event
-      for (let i = 0; i < mediaEventTypes.length; i++) {
-        trapBubbledEvent(mediaEventTypes[i], domElement);
-      }
-      props = rawProps;
-      break;
-    case 'source':
-      trapBubbledEvent(TOP_ERROR, domElement);
+      trapEvent(TOP_LOAD, domElement);
       props = rawProps;
       break;
     case 'img':
     case 'image':
     case 'link':
-      trapBubbledEvent(TOP_ERROR, domElement);
-      trapBubbledEvent(TOP_LOAD, domElement);
+      trapEvent(TOP_ERROR, domElement);
+      trapEvent(TOP_LOAD, domElement);
       props = rawProps;
       break;
     case 'form':
-      trapBubbledEvent(TOP_RESET, domElement);
-      trapBubbledEvent(TOP_SUBMIT, domElement);
+      trapEvent(TOP_RESET, domElement);
+      trapEvent(TOP_SUBMIT, domElement);
       props = rawProps;
       break;
     case 'details':
-      trapBubbledEvent(TOP_TOGGLE, domElement);
+      trapEvent(TOP_TOGGLE, domElement);
       props = rawProps;
       break;
     case 'input':
       ReactDOMFiberInput.initWrapperState(domElement, rawProps);
       props = ReactDOMFiberInput.getHostProps(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');
@@ -498,15 +485,15 @@ export function setInitialProperties(
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
       props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');
       break;
     case 'textarea':
       ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
       props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');
@@ -843,34 +830,27 @@ export function diffHydratedProperties(
   switch (tag) {
     case 'iframe':
     case 'object':
-      trapBubbledEvent(TOP_LOAD, domElement);
-      break;
-    case 'video':
-    case 'audio':
-      // Create listener for each media event
-      for (let i = 0; i < mediaEventTypes.length; i++) {
-        trapBubbledEvent(mediaEventTypes[i], domElement);
-      }
+      trapEvent(TOP_LOAD, domElement);
       break;
     case 'source':
-      trapBubbledEvent(TOP_ERROR, domElement);
+      trapEvent(TOP_ERROR, domElement);
       break;
     case 'img':
     case 'image':
     case 'link':
-      trapBubbledEvent(TOP_ERROR, domElement);
-      trapBubbledEvent(TOP_LOAD, domElement);
+      trapEvent(TOP_ERROR, domElement);
+      trapEvent(TOP_LOAD, domElement);
       break;
     case 'form':
-      trapBubbledEvent(TOP_RESET, domElement);
-      trapBubbledEvent(TOP_SUBMIT, domElement);
+      trapEvent(TOP_RESET, domElement);
+      trapEvent(TOP_SUBMIT, domElement);
       break;
     case 'details':
-      trapBubbledEvent(TOP_TOGGLE, domElement);
+      trapEvent(TOP_TOGGLE, domElement);
       break;
     case 'input':
       ReactDOMFiberInput.initWrapperState(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');
@@ -880,14 +860,14 @@ export function diffHydratedProperties(
       break;
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');
       break;
     case 'textarea':
       ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
-      trapBubbledEvent(TOP_INVALID, domElement);
+      trapEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange');

packages/react-dom/src/events/DOMTopLevelEventTypes.js

@@ -148,35 +148,6 @@ export const TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType(
 export const TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');
 export const TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');
 
-// List of events that need to be individually attached to media elements.
-// Note that events in this list will *not* be listened to at the top level
-// unless they're explicitly whitelisted in `ReactBrowserEventEmitter.listenTo`.
-export const mediaEventTypes = [
-  TOP_ABORT,
-  TOP_CAN_PLAY,
-  TOP_CAN_PLAY_THROUGH,
-  TOP_DURATION_CHANGE,
-  TOP_EMPTIED,
-  TOP_ENCRYPTED,
-  TOP_ENDED,
-  TOP_ERROR,
-  TOP_LOADED_DATA,
-  TOP_LOADED_METADATA,
-  TOP_LOAD_START,
-  TOP_PAUSE,
-  TOP_PLAY,
-  TOP_PLAYING,
-  TOP_PROGRESS,
-  TOP_RATE_CHANGE,
-  TOP_SEEKED,
-  TOP_SEEKING,
-  TOP_STALLED,
-  TOP_SUSPEND,
-  TOP_TIME_UPDATE,
-  TOP_VOLUME_CHANGE,
-  TOP_WAITING,
-];
-
 export function getRawEventName(topLevelType: DOMTopLevelEventType): string {
   return unsafeCastDOMTopLevelTypeToString(topLevelType);
 }

packages/react-dom/src/events/EventListener.js

@@ -7,14 +7,6 @@
  * @flow
  */
 
-export function addEventBubbleListener(
-  element: Document | Element,
-  eventType: string,
-  listener: Function,
-): void {
-  element.addEventListener(eventType, listener, false);
-}
-
 export function addEventCaptureListener(
   element: Document | Element,
   eventType: string,