From 267da68ef78a09a8cbec79c0e1854ba7c0d1c352 Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Sat, 9 Dec 2017 15:33:42 -0500
Subject: [PATCH 01/17] Locally attach wheel, scroll and touch events

---
 fixtures/dom/src/components/Header.js         |  1 +
 .../src/components/fixtures/scroll/index.js   | 72 +++++++++++++++++++
 .../ReactBrowserEventEmitter-test.internal.js | 43 +++++++++--
 .../src/__tests__/ReactDOMComponent-test.js   | 15 ++++
 .../react-dom/src/client/ReactDOMComponent.js | 22 +++---
 .../src/events/ReactBrowserEventEmitter.js    | 30 +++++---
 6 files changed, 159 insertions(+), 24 deletions(-)
 create mode 100644 fixtures/dom/src/components/fixtures/scroll/index.js

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index de71a7dca606b..fd4efbe96e0cb 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -67,6 +67,7 @@ class Header extends React.Component {
                 <option value="/pointer-events">Pointer Events</option>
                 <option value="/mouse-events">Mouse Events</option>
                 <option value="/selection-events">Selection Events</option>
+                <option value="/scroll">Scroll Events</option>
               </select>
             </label>
             <label htmlFor="react_version">
diff --git a/fixtures/dom/src/components/fixtures/scroll/index.js b/fixtures/dom/src/components/fixtures/scroll/index.js
new file mode 100644
index 0000000000000..dea15c0e1a6b6
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/scroll/index.js
@@ -0,0 +1,72 @@
+const React = global.React;
+
+function wait(time) {
+  console.log('Blocking!');
+  var startTime = new Date().getTime();
+  var endTime = startTime + time;
+  while (new Date().getTime() < endTime) {
+    // wait for it...
+  }
+  console.log('Not blocking!');
+}
+
+var scrollable = {
+  width: 300,
+  height: 200,
+  overflowY: 'auto',
+  margin: '0 auto',
+  background: '#ededed',
+};
+
+class ScrollFixture extends React.Component {
+  componentDidMount() {
+    // jank up the main thread!
+    this.jank = setInterval(() => wait(3000), 4000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.jank);
+  }
+
+  onWheel() {
+    console.log('wheel');
+  }
+
+  onTouchStart() {
+    console.log('touch start');
+  }
+
+  onTouchMove() {
+    console.log('touch move');
+  }
+
+  render() {
+    let listItems = [];
+
+    // This is to produce a long enough page to allow for scrolling
+    for (var i = 0; i < 50; i++) {
+      listItems.push(<li key={i}>List item #{i + 1}</li>);
+    }
+
+    return (
+      <section>
+        <h2>Scroll Testing</h2>
+        <p>
+          Mouse wheel, track pad scroll, and touch events should not be blocked
+          by JS execution in IE Edge, Safari, and Firefox.
+        </p>
+        <div
+          style={scrollable}
+          onTouchStart={this.onTouchStart}
+          onTouchMove={this.onTouchMove}
+          onWheel={this.onWheel}>
+          <h2>I am scrollable!</h2>
+          <ul>{listItems}</ul>
+        </div>
+        <ul>{listItems}</ul>
+      </section>
+    );
+  }
+}
+
+export default ScrollFixture;
diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
index 86a668a4bbc17..b286a72eb588c 100644
--- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -331,15 +331,16 @@ describe('ReactBrowserEventEmitter', () => {
 
   it('should listen to events only once', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
+    expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
     expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('should work with event plugins without dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
 
     expect(EventTarget.prototype.addEventListener.calls.argsFor(0)[0]).toBe(
       'click',
@@ -349,7 +350,7 @@ describe('ReactBrowserEventEmitter', () => {
   it('should work with event plugins with dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document);
+    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document, document);
 
     const setEventListeners = [];
     const listenCalls = EventTarget.prototype.addEventListener.calls.allArgs();
@@ -365,4 +366,38 @@ describe('ReactBrowserEventEmitter', () => {
       expect(dependencies.indexOf(setEventListeners[i])).toBeTruthy();
     }
   });
+
+  describe('local listener attachment', function() {
+    it('does attach a new listener for the same event type', () => {
+      var container = document.createElement('div');
+      var spy = jest.fn();
+
+      ReactDOM.render(<div onTouchMove={() => spy()} />, container);
+      ReactDOM.render(<div onTouchMove={() => spy()} />, container);
+
+      var el = container.querySelector('div');
+
+      el.dispatchEvent(new Event('touchmove'));
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call old listeners on a second update with a new handler', () => {
+      var container = document.createElement('div');
+      var a = jest.fn();
+      var b = jest.fn();
+
+      ReactDOM.render(<div onTouchMove={a} />, container);
+      ReactDOM.render(<div onTouchMove={b} />, container);
+
+      var el = container.querySelector('div');
+
+      el.dispatchEvent(new Event('touchmove'));
+
+      // The first handler should have been torn down
+      expect(a).toHaveBeenCalledTimes(0);
+      // The second handler is now attached
+      expect(b).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 4dc613805c94f..4eba7ee588344 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2659,4 +2659,19 @@ describe('ReactDOMComponent', () => {
       document.body.removeChild(container);
     }
   });
+
+  describe('Trapping local event listeners', () => {
+    it('triggers load if onload is not present on an image', () => {
+      return new Promise(function(resolve, reject) {
+        const el = ReactTestUtils.renderIntoDocument(
+          <div onLoad={resolve} onError={reject}>
+            <img />
+          </div>,
+        );
+
+        el.querySelector('img').src =
+          'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+      });
+    });
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index d62df23466e1a..9ab90776bfb5f 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -222,14 +222,14 @@ if (__DEV__) {
   };
 }
 
-function ensureListeningTo(rootContainerElement, registrationName) {
+function ensureListeningTo(rootContainerElement, registrationName, domElement) {
   const isDocumentOrFragment =
     rootContainerElement.nodeType === DOCUMENT_NODE ||
     rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc);
+  listenTo(registrationName, doc, domElement);
 }
 
 function getOwnerDocumentFromRootContainer(
@@ -308,7 +308,7 @@ function setInitialDOMProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        ensureListeningTo(rootContainerElement, propKey);
+        ensureListeningTo(rootContainerElement, propKey, domElement);
       }
     } else if (nextProp != null) {
       DOMPropertyOperations.setValueForProperty(
@@ -508,7 +508,7 @@ export function setInitialProperties(
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
     case 'option':
       ReactDOMOption.validateProps(domElement, rawProps);
@@ -520,7 +520,7 @@ export function setInitialProperties(
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
     case 'textarea':
       ReactDOMTextarea.initWrapperState(domElement, rawProps);
@@ -528,7 +528,7 @@ export function setInitialProperties(
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
     default:
       props = rawProps;
@@ -749,7 +749,7 @@ export function diffProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        ensureListeningTo(rootContainerElement, propKey);
+        ensureListeningTo(rootContainerElement, propKey, domElement);
       }
       if (!updatePayload && lastProp !== nextProp) {
         // This is a special case. If any listener updates we need to ensure
@@ -892,7 +892,7 @@ export function diffHydratedProperties(
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
     case 'option':
       ReactDOMOption.validateProps(domElement, rawProps);
@@ -902,14 +902,14 @@ export function diffHydratedProperties(
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
     case 'textarea':
       ReactDOMTextarea.initWrapperState(domElement, rawProps);
       trapBubbledEvent(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');
+      ensureListeningTo(rootContainerElement, 'onChange', domElement);
       break;
   }
 
@@ -976,7 +976,7 @@ export function diffHydratedProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        ensureListeningTo(rootContainerElement, propKey);
+        ensureListeningTo(rootContainerElement, propKey, domElement);
       }
     } else if (
       __DEV__ &&
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index a0f38c5fb1f4e..d84ff891c8127 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -17,6 +17,7 @@ import {
   TOP_RESET,
   TOP_SCROLL,
   TOP_SUBMIT,
+  TOP_WHEEL,
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
@@ -27,6 +28,12 @@ import {
   trapCapturedEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
+import BrowserEventConstants from './BrowserEventConstants';
+import invariant from 'fbjs/lib/invariant';
+
+export * from 'events/ReactEventEmitterMixin';
+
+const {topLevelTypes} = BrowserEventConstants;
 
 /**
  * Summary of `ReactBrowserEventEmitter` event handling:
@@ -92,16 +99,19 @@ let reactTopListenersCounter = 0;
  */
 const topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
 
-function getListeningForDocument(mountAt: any) {
-  // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
+function getListenerTrackingFor(node) {
+  // In IE8, `node` is a host object and doesn't have `hasOwnProperty`
   // directly.
-  if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
-    mountAt[topListenersIDKey] = reactTopListenersCounter++;
-    alreadyListeningTo[mountAt[topListenersIDKey]] = {};
+  if (!Object.prototype.hasOwnProperty.call(node, topListenersIDKey)) {
+    node[topListenersIDKey] = reactTopListenersCounter++;
+    alreadyListeningTo[node[topListenersIDKey]] = {};
   }
-  return alreadyListeningTo[mountAt[topListenersIDKey]];
+  return alreadyListeningTo[node[topListenersIDKey]];
 }
 
+const BUBBLE = 0;
+const CAPTURE = 1;
+
 /**
  * We listen for bubbled touch events on the document object.
  *
@@ -126,8 +136,9 @@ function getListeningForDocument(mountAt: any) {
 export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
+  domElement: Element
 ) {
-  const isListening = getListeningForDocument(mountAt);
+  const isListening = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
 
   for (let i = 0; i < dependencies.length; i++) {
@@ -135,7 +146,8 @@ export function listenTo(
     if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
       switch (dependency) {
         case TOP_SCROLL:
-          trapCapturedEvent(TOP_SCROLL, mountAt);
+        case TOP_WHEEL:
+          trapCapturedEvent(TOP_SCROLL, domElement);
           break;
         case TOP_FOCUS:
         case TOP_BLUR:
@@ -176,7 +188,7 @@ export function isListeningToAllDependencies(
   registrationName: string,
   mountAt: Document | Element,
 ) {
-  const isListening = getListeningForDocument(mountAt);
+  const isListening = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];

From 9b034e73a1f64fdca93e6046564e454f543ad8e1 Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Thu, 14 Dec 2017 07:14:35 -0500
Subject: [PATCH 02/17] Add test coverage for doubly nested event handlers

---
 .../src/__tests__/ReactDOMComponent-test.js   | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 4eba7ee588344..88a90f4bafea0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2673,5 +2673,78 @@ describe('ReactDOMComponent', () => {
           'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
       });
     });
+
+    it('triggers events local captured events from children without listeners', () => {
+      const callback = jest.fn();
+      const container = document.createElement('div');
+
+      ReactDOM.render(
+        <div id="top" onTouchEnd={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchend', true, true);
+      container.querySelector('#bottom').dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not double dispatch captured 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" onTouchEnd={top}>
+          <div id="middle" onTouchEnd={middle}>
+            <div id="bottom" onTouchEnd={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#bottom');
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchend', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not double dispatch captured 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" onTouchEnd={top}>
+          <div id="middle" onTouchEnd={middle}>
+            <div id="bottom" onTouchEnd={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#middle');
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchend', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
   });
 });

From f81f8dbb41c91d474ba2b97db8c31ec7b237369f Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 20 Aug 2018 15:59:47 -0700
Subject: [PATCH 03/17] Attach scroll and wheel events to owner

---
 .../ReactBrowserEventEmitter-test.internal.js | 33 ++++++++---------
 .../src/__tests__/ReactDOMComponent-test.js   | 37 ++++++-------------
 .../react-dom/src/client/ReactDOMComponent.js |  2 +-
 .../src/events/ReactBrowserEventEmitter.js    | 37 +++++++++----------
 4 files changed, 45 insertions(+), 64 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
index b286a72eb588c..a3464e72aaad3 100644
--- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -331,16 +331,15 @@ describe('ReactBrowserEventEmitter', () => {
 
   it('should listen to events only once', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
-    expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
     expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('should work with event plugins without dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document, document);
+    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
 
     expect(EventTarget.prototype.addEventListener.calls.argsFor(0)[0]).toBe(
       'click',
@@ -350,7 +349,7 @@ describe('ReactBrowserEventEmitter', () => {
   it('should work with event plugins with dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document, document);
+    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document);
 
     const setEventListeners = [];
     const listenCalls = EventTarget.prototype.addEventListener.calls.allArgs();
@@ -369,30 +368,28 @@ describe('ReactBrowserEventEmitter', () => {
 
   describe('local listener attachment', function() {
     it('does attach a new listener for the same event type', () => {
-      var container = document.createElement('div');
-      var spy = jest.fn();
+      const spy = jest.fn();
 
-      ReactDOM.render(<div onTouchMove={() => spy()} />, container);
-      ReactDOM.render(<div onTouchMove={() => spy()} />, container);
+      ReactDOM.render(<div onScroll={() => spy()} />, container);
+      ReactDOM.render(<div onScroll={() => spy()} />, container);
 
-      var el = container.querySelector('div');
+      const el = container.querySelector('div');
 
-      el.dispatchEvent(new Event('touchmove'));
+      el.dispatchEvent(new Event('scroll'));
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('does not call old listeners on a second update with a new handler', () => {
-      var container = document.createElement('div');
-      var a = jest.fn();
-      var b = jest.fn();
+      const a = jest.fn();
+      const b = jest.fn();
 
-      ReactDOM.render(<div onTouchMove={a} />, container);
-      ReactDOM.render(<div onTouchMove={b} />, container);
+      ReactDOM.render(<div onScroll={a} />, container);
+      ReactDOM.render(<div onScroll={b} />, container);
 
-      var el = container.querySelector('div');
+      const el = container.querySelector('div');
 
-      el.dispatchEvent(new Event('touchmove'));
+      el.dispatchEvent(new Event('scroll'));
 
       // The first handler should have been torn down
       expect(a).toHaveBeenCalledTimes(0);
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 88a90f4bafea0..a4f5020a59043 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2661,25 +2661,12 @@ describe('ReactDOMComponent', () => {
   });
 
   describe('Trapping local event listeners', () => {
-    it('triggers load if onload is not present on an image', () => {
-      return new Promise(function(resolve, reject) {
-        const el = ReactTestUtils.renderIntoDocument(
-          <div onLoad={resolve} onError={reject}>
-            <img />
-          </div>,
-        );
-
-        el.querySelector('img').src =
-          'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
-      });
-    });
-
     it('triggers events local captured events from children without listeners', () => {
       const callback = jest.fn();
       const container = document.createElement('div');
 
       ReactDOM.render(
-        <div id="top" onTouchEnd={callback}>
+        <div id="top" onScroll={callback}>
           <div id="middle">
             <div id="bottom" />
           </div>
@@ -2689,22 +2676,22 @@ describe('ReactDOMComponent', () => {
 
       const event = document.createEvent('Event');
 
-      event.initEvent('touchend', true, true);
+      event.initEvent('scroll', true, true);
       container.querySelector('#bottom').dispatchEvent(event);
 
       expect(callback).toHaveBeenCalledTimes(1);
     });
 
-    it('does not double dispatch captured events at the deepest leaf', () => {
+    it('does not double dispatch 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" onTouchEnd={top}>
-          <div id="middle" onTouchEnd={middle}>
-            <div id="bottom" onTouchEnd={bottom} />
+        <div id="top" onScroll={top}>
+          <div id="middle" onScroll={middle}>
+            <div id="bottom" onScroll={bottom} />
           </div>
         </div>,
         container,
@@ -2713,7 +2700,7 @@ describe('ReactDOMComponent', () => {
       const target = container.querySelector('#bottom');
       const event = document.createEvent('Event');
 
-      event.initEvent('touchend', true, true);
+      event.initEvent('scroll', true, true);
       target.dispatchEvent(event);
 
       expect(top).toHaveBeenCalledTimes(1);
@@ -2721,16 +2708,16 @@ describe('ReactDOMComponent', () => {
       expect(bottom).toHaveBeenCalledTimes(1);
     });
 
-    it('does not double dispatch captured events at the middle leaf', () => {
+    it('does not double dispatch 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" onTouchEnd={top}>
-          <div id="middle" onTouchEnd={middle}>
-            <div id="bottom" onTouchEnd={bottom} />
+        <div id="top" onScroll={top}>
+          <div id="middle" onScroll={middle}>
+            <div id="bottom" onScroll={bottom} />
           </div>
         </div>,
         container,
@@ -2739,7 +2726,7 @@ describe('ReactDOMComponent', () => {
       const target = container.querySelector('#middle');
       const event = document.createEvent('Event');
 
-      event.initEvent('touchend', true, true);
+      event.initEvent('scroll', true, true);
       target.dispatchEvent(event);
 
       expect(top).toHaveBeenCalledTimes(1);
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 9ab90776bfb5f..6b41dc97ca4b6 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -229,7 +229,7 @@ function ensureListeningTo(rootContainerElement, registrationName, domElement) {
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc, domElement);
+  listenTo(registrationName, doc, rootContainerElement);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index d84ff891c8127..388b2cbb23f03 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -28,12 +28,6 @@ import {
   trapCapturedEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
-import BrowserEventConstants from './BrowserEventConstants';
-import invariant from 'fbjs/lib/invariant';
-
-export * from 'events/ReactEventEmitterMixin';
-
-const {topLevelTypes} = BrowserEventConstants;
 
 /**
  * Summary of `ReactBrowserEventEmitter` event handling:
@@ -99,7 +93,7 @@ let reactTopListenersCounter = 0;
  */
 const topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
 
-function getListenerTrackingFor(node) {
+function getListenerTrackingFor(node: Document | Element) {
   // In IE8, `node` is a host object and doesn't have `hasOwnProperty`
   // directly.
   if (!Object.prototype.hasOwnProperty.call(node, topListenersIDKey)) {
@@ -109,9 +103,6 @@ function getListenerTrackingFor(node) {
   return alreadyListeningTo[node[topListenersIDKey]];
 }
 
-const BUBBLE = 0;
-const CAPTURE = 1;
-
 /**
  * We listen for bubbled touch events on the document object.
  *
@@ -136,27 +127,33 @@ const CAPTURE = 1;
 export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
-  domElement: Element
+  owner: Element,
 ) {
-  const isListening = getListenerTrackingFor(mountAt);
+  const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
 
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
-    if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
+
+    if (!mountAtListeners.hasOwnProperty(dependency)) {
       switch (dependency) {
         case TOP_SCROLL:
         case TOP_WHEEL:
-          trapCapturedEvent(TOP_SCROLL, domElement);
-          break;
+          const ownerListeners = getListenerTrackingFor(owner);
+
+          if (!ownerListeners.hasOwnProperty(dependency)) {
+            trapCapturedEvent(dependency, owner);
+            ownerListeners[dependency] = true;
+          }
+          return;
         case TOP_FOCUS:
         case TOP_BLUR:
           trapCapturedEvent(TOP_FOCUS, mountAt);
           trapCapturedEvent(TOP_BLUR, mountAt);
           // We set the flag for a single dependency later in this function,
           // but this ensures we mark both as attached rather than just one.
-          isListening[TOP_BLUR] = true;
-          isListening[TOP_FOCUS] = true;
+          mountAtListeners[TOP_BLUR] = true;
+          mountAtListeners[TOP_FOCUS] = true;
           break;
         case TOP_CANCEL:
         case TOP_CLOSE:
@@ -179,7 +176,7 @@ export function listenTo(
           }
           break;
       }
-      isListening[dependency] = true;
+      mountAtListeners[dependency] = true;
     }
   }
 }
@@ -188,11 +185,11 @@ export function isListeningToAllDependencies(
   registrationName: string,
   mountAt: Document | Element,
 ) {
-  const isListening = getListenerTrackingFor(mountAt);
+  const isListeningListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
-    if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
+    if (!isListeningListeners.hasOwnProperty(dependency)) {
       return false;
     }
   }

From 6376bc595f0607f1c01839477281ddf78d4984bd Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Tue, 21 Aug 2018 07:05:48 -0700
Subject: [PATCH 04/17] Track event dispatches to prevent duplicate local
 events

Scroll events need to be attached locally in order to receive
rendering optimizations in Firefox, Edge, and Safari.

Unfortunately, scroll events can be nested. When attached locally,
events bubble up through both the DOM and React event systems.

This commit adds a module that tracks what events have
dispatched. When possible, it uses a WeakSet to test membership. When
the event is fully dispatched, it should be released with GC.

For browsers that do not support WeakSets, this module modifies the
event with a flag. This needs to be tested in IE.
---
 .../react-dom/src/client/ReactDOMComponent.js |  2 +-
 .../src/events/ReactBrowserEventEmitter.js    | 10 +++---
 .../src/events/ReactDOMEventListener.js       |  9 +++++-
 .../src/events/ReactEventDispatchTracker.js   | 32 +++++++++++++++++++
 4 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-dom/src/events/ReactEventDispatchTracker.js

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 6b41dc97ca4b6..9ab90776bfb5f 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -229,7 +229,7 @@ function ensureListeningTo(rootContainerElement, registrationName, domElement) {
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc, rootContainerElement);
+  listenTo(registrationName, doc, domElement);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 388b2cbb23f03..26a41c87e05ed 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -127,7 +127,7 @@ function getListenerTrackingFor(node: Document | Element) {
 export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
-  owner: Element,
+  element: Element,
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
@@ -139,11 +139,11 @@ export function listenTo(
       switch (dependency) {
         case TOP_SCROLL:
         case TOP_WHEEL:
-          const ownerListeners = getListenerTrackingFor(owner);
+          const elementListeners = getListenerTrackingFor(element);
 
-          if (!ownerListeners.hasOwnProperty(dependency)) {
-            trapCapturedEvent(dependency, owner);
-            ownerListeners[dependency] = true;
+          if (!elementListeners.hasOwnProperty(dependency)) {
+            trapCapturedEvent(dependency, element);
+            elementListeners[dependency] = true;
           }
           return;
         case TOP_FOCUS:
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 0a464cbd559c1..abdb90ceb2c1e 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -21,6 +21,10 @@ import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 import SimpleEventPlugin from './SimpleEventPlugin';
 import {getRawEventName} from './DOMTopLevelEventTypes';
+import {
+  hasEventDispatched,
+  trackEventDispatch,
+} from './ReactEventDispatchTracker';
 
 const {isInteractiveTopLevelEventType} = SimpleEventPlugin;
 
@@ -189,12 +193,15 @@ export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,
 ) {
-  if (!_enabled) {
+  if (!_enabled || hasEventDispatched(nativeEvent)) {
     return;
   }
 
+  trackEventDispatch(nativeEvent);
+
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+
   if (
     targetInst !== null &&
     typeof targetInst.tag === 'number' &&
diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
new file mode 100644
index 0000000000000..74ad9f3a6f3fe
--- /dev/null
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {AnyNativeEvent} from 'events/PluginModuleType';
+
+const tracker = typeof WeakSet === 'undefined' ? null : new WeakSet();
+const trackedProperty = '__react_event_tracking:' + Math.random();
+
+export function trackEventDispatch(event: AnyNativeEvent) {
+  if (tracker != null) {
+    tracker.add(event);
+  } else {
+    // Only process each native event once
+    Object.defineProperty(event, trackedProperty, {
+      value: true,
+    });
+  }
+}
+
+export function hasEventDispatched(event: AnyNativeEvent): boolean {
+  if (tracker != null) {
+    return tracker.has(event);
+  }
+
+  return tracker.hasOwnProperty(trackedProperty);
+}

From 92fb9d838361d2e564ac0e9323e853124f4dfa2e Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Tue, 21 Aug 2018 07:12:33 -0700
Subject: [PATCH 05/17] Bubble scroll/wheel for consistency. Capturing does not
 matter

---
 packages/react-dom/src/events/ReactBrowserEventEmitter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 26a41c87e05ed..6179b5a9d0801 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -142,7 +142,7 @@ export function listenTo(
           const elementListeners = getListenerTrackingFor(element);
 
           if (!elementListeners.hasOwnProperty(dependency)) {
-            trapCapturedEvent(dependency, element);
+            trapBubbledEvent(dependency, element);
             elementListeners[dependency] = true;
           }
           return;

From c6216e9cbf707a79437003c1be5871517b00b7bb Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Tue, 21 Aug 2018 08:44:00 -0700
Subject: [PATCH 06/17] Check event, not tracker

---
 packages/react-dom/src/events/ReactEventDispatchTracker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
index 74ad9f3a6f3fe..c11fc31d796f8 100644
--- a/packages/react-dom/src/events/ReactEventDispatchTracker.js
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -28,5 +28,5 @@ export function hasEventDispatched(event: AnyNativeEvent): boolean {
     return tracker.has(event);
   }
 
-  return tracker.hasOwnProperty(trackedProperty);
+  return event.hasOwnProperty(trackedProperty);
 }

From e3e4eb500d0079958a89e10dde469d71b9a77e93 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Tue, 21 Aug 2018 08:58:36 -0700
Subject: [PATCH 07/17] Revert flow-type change

---
 packages/react-dom/src/events/ReactBrowserEventEmitter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 6179b5a9d0801..6b041dad93af6 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -93,7 +93,7 @@ let reactTopListenersCounter = 0;
  */
 const topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
 
-function getListenerTrackingFor(node: Document | Element) {
+function getListenerTrackingFor(node: any) {
   // In IE8, `node` is a host object and doesn't have `hasOwnProperty`
   // directly.
   if (!Object.prototype.hasOwnProperty.call(node, topListenersIDKey)) {

From 079474dcc0a53db0d49d9f0f48f9daf04b432361 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Sat, 25 Aug 2018 18:05:00 +0000
Subject: [PATCH 08/17] Release events from tracking when they bubble to the
 root

---
 .../src/__tests__/LocalEventListeners-test.js | 138 ++++++++++++++++++
 .../react-dom/src/client/ReactDOMComponent.js |   2 +-
 .../src/events/ReactBrowserEventEmitter.js    |  72 +++++----
 .../src/events/ReactDOMEventListener.js       |  49 ++++++-
 .../src/events/ReactEventDispatchTracker.js   |  16 +-
 5 files changed, 244 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/LocalEventListeners-test.js

diff --git a/packages/react-dom/src/__tests__/LocalEventListeners-test.js b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
new file mode 100644
index 0000000000000..0be6924b68fc7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('Local event listeners', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('triggers events local captured events from children without listeners', () => {
+    const callback = jest.fn();
+
+    ReactDOM.render(
+      <div id="top" onScroll={callback}>
+        <div id="middle" onScroll={callback}>
+          <div id="bottom" />
+        </div>
+      </div>,
+      container,
+    );
+
+    const event = document.createEvent('Event');
+
+    event.initEvent('scroll', true, true);
+    container.querySelector('#bottom').dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('can re-dispatch the same event', () => {
+    const callback = jest.fn();
+
+    ReactDOM.render(
+      <div id="top" onScroll={callback}>
+        <div id="bottom" />
+      </div>,
+      container,
+    );
+
+    const event = document.createEvent('Event');
+    const bottom = container.querySelector('#bottom');
+
+    event.initEvent('scroll', true, true);
+
+    bottom.dispatchEvent(event);
+    bottom.dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('can re-dispatch non-local events', () => {
+    const callback = jest.fn();
+
+    ReactDOM.render(
+      <div id="top" onMouseOver={callback}>
+        <div id="bottom" />
+      </div>,
+      container,
+    );
+
+    const event = document.createEvent('Event');
+    const bottom = container.querySelector('#bottom');
+
+    event.initEvent('mouseover', true, true);
+
+    bottom.dispatchEvent(event);
+    bottom.dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not double dispatch events at the deepest leaf', () => {
+    const top = jest.fn();
+    const middle = jest.fn();
+    const bottom = jest.fn();
+
+    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');
+
+    event.initEvent('scroll', true, true);
+    target.dispatchEvent(event);
+
+    expect(top).toHaveBeenCalledTimes(1);
+    expect(middle).toHaveBeenCalledTimes(1);
+    expect(bottom).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not double dispatch events at the middle leaf', () => {
+    const top = jest.fn();
+    const middle = jest.fn();
+    const bottom = jest.fn();
+
+    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');
+
+    event.initEvent('scroll', true, true);
+    target.dispatchEvent(event);
+
+    expect(top).toHaveBeenCalledTimes(1);
+    expect(middle).toHaveBeenCalledTimes(1);
+    expect(bottom).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 9ab90776bfb5f..3ffbd4de8d578 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -229,7 +229,7 @@ function ensureListeningTo(rootContainerElement, registrationName, domElement) {
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc, domElement);
+  listenTo(registrationName, doc, domElement, rootContainerElement);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 6b041dad93af6..1e6e483e999a7 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -18,6 +18,10 @@ import {
   TOP_SCROLL,
   TOP_SUBMIT,
   TOP_WHEEL,
+  TOP_TOUCH_START,
+  TOP_TOUCH_END,
+  TOP_TOUCH_MOVE,
+  TOP_TOUCH_CANCEL,
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
@@ -26,6 +30,7 @@ import {
   isEnabled,
   trapBubbledEvent,
   trapCapturedEvent,
+  releaseLocalEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
 
@@ -128,6 +133,7 @@ export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
   element: Element,
+  root: Element,
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
@@ -135,49 +141,63 @@ export function listenTo(
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
 
-    if (!mountAtListeners.hasOwnProperty(dependency)) {
-      switch (dependency) {
-        case TOP_SCROLL:
-        case TOP_WHEEL:
-          const elementListeners = getListenerTrackingFor(element);
+    switch (dependency) {
+      case TOP_TOUCH_START:
+      case TOP_TOUCH_END:
+      case TOP_TOUCH_MOVE:
+      case TOP_TOUCH_CANCEL:
+      case TOP_SCROLL:
+      case TOP_WHEEL:
+        const elementListeners = getListenerTrackingFor(element);
+        const rootListeners = getListenerTrackingFor(root);
 
-          if (!elementListeners.hasOwnProperty(dependency)) {
-            trapBubbledEvent(dependency, element);
-            elementListeners[dependency] = true;
-          }
-          return;
-        case TOP_FOCUS:
-        case TOP_BLUR:
+        if (!elementListeners.hasOwnProperty(dependency)) {
+          trapCapturedEvent(dependency, element, mountAt);
+          elementListeners[dependency] = true;
+        }
+
+        if (!rootListeners.hasOwnProperty(dependency)) {
+          releaseLocalEvent(dependency, root);
+          rootListeners[dependency] = true;
+        }
+        break;
+      case TOP_FOCUS:
+      case TOP_BLUR:
+        if (!mountAtListeners.hasOwnProperty(dependency)) {
           trapCapturedEvent(TOP_FOCUS, mountAt);
           trapCapturedEvent(TOP_BLUR, mountAt);
           // We set the flag for a single dependency later in this function,
           // but this ensures we mark both as attached rather than just one.
           mountAtListeners[TOP_BLUR] = true;
           mountAtListeners[TOP_FOCUS] = true;
-          break;
-        case TOP_CANCEL:
-        case TOP_CLOSE:
+        }
+        break;
+      case TOP_CANCEL:
+      case TOP_CLOSE:
+        if (!mountAtListeners.hasOwnProperty(dependency)) {
           if (isEventSupported(getRawEventName(dependency))) {
             trapCapturedEvent(dependency, mountAt);
           }
-          break;
-        case TOP_INVALID:
-        case TOP_SUBMIT:
-        case TOP_RESET:
-          // We listen to them on the target DOM elements.
-          // Some of them bubble so we don't want them to fire twice.
-          break;
-        default:
+        }
+        break;
+      case TOP_INVALID:
+      case TOP_SUBMIT:
+      case TOP_RESET:
+        // We listen to them on the target DOM elements.
+        // Some of them bubble so we don't want them to fire twice.
+        break;
+      default:
+        if (!mountAtListeners.hasOwnProperty(dependency)) {
           // By default, listen on the top level to all non-media events.
           // Media events don't bubble so adding the listener wouldn't do anything.
           const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
           if (!isMediaEvent) {
             trapBubbledEvent(dependency, mountAt);
           }
-          break;
-      }
-      mountAtListeners[dependency] = true;
+        }
     }
+
+    mountAtListeners[dependency] = true;
   }
 }
 
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index abdb90ceb2c1e..59df00f5efbe0 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -24,7 +24,16 @@ import {getRawEventName} from './DOMTopLevelEventTypes';
 import {
   hasEventDispatched,
   trackEventDispatch,
+  removeTrackedEvent,
 } from './ReactEventDispatchTracker';
+import {
+  TOP_SCROLL,
+  TOP_WHEEL,
+  TOP_TOUCH_START,
+  TOP_TOUCH_END,
+  TOP_TOUCH_MOVE,
+  TOP_TOUCH_CANCEL,
+} from './DOMTopLevelEventTypes';
 
 const {isInteractiveTopLevelEventType} = SimpleEventPlugin;
 
@@ -185,6 +194,28 @@ export function trapCapturedEvent(
   );
 }
 
+/**
+ * Scroll and touch events are attached locally. To prevent multiple
+ * dispatches of nested events, they are tracked. When tracked events hit
+ * the root element, they are removed from tracking so that an event can be
+ * dispatched multiple times (usually when testing).
+ *
+ * @param {number} topLevelType Number from `TopLevelEventTypes`.
+ * @param {object} element Root element on which the event should be released.
+ *
+ * @internal
+ */
+export function releaseLocalEvent(
+  topLevelType: DOMTopLevelEventType,
+  element: Element,
+) {
+  if (!element) {
+    return null;
+  }
+
+  addEventCaptureListener(element, topLevelType, removeTrackedEvent);
+}
+
 function dispatchInteractiveEvent(topLevelType, nativeEvent) {
   interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
 }
@@ -193,11 +224,25 @@ export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,
 ) {
-  if (!_enabled || hasEventDispatched(nativeEvent)) {
+  if (!_enabled) {
     return;
   }
 
-  trackEventDispatch(nativeEvent);
+  switch (topLevelType) {
+    case TOP_TOUCH_START:
+    case TOP_TOUCH_END:
+    case TOP_TOUCH_MOVE:
+    case TOP_TOUCH_CANCEL:
+    case TOP_SCROLL:
+    case TOP_WHEEL:
+      if (hasEventDispatched(nativeEvent)) {
+        return;
+      }
+      trackEventDispatch(nativeEvent);
+      break;
+    default:
+    // Do nothing
+  }
 
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
index c11fc31d796f8..53eea4d483d04 100644
--- a/packages/react-dom/src/events/ReactEventDispatchTracker.js
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -17,9 +17,15 @@ export function trackEventDispatch(event: AnyNativeEvent) {
     tracker.add(event);
   } else {
     // Only process each native event once
-    Object.defineProperty(event, trackedProperty, {
-      value: true,
-    });
+    event[trackedProperty] = true;
+  }
+}
+
+export function removeTrackedEvent(event: AnyNativeEvent) {
+  if (tracker != null) {
+    tracker.delete(event);
+  } else {
+    event[trackedProperty] = false;
   }
 }
 
@@ -28,5 +34,7 @@ export function hasEventDispatched(event: AnyNativeEvent): boolean {
     return tracker.has(event);
   }
 
-  return event.hasOwnProperty(trackedProperty);
+  return (
+    event.hasOwnProperty(trackedProperty) && event[trackedProperty] === true
+  );
 }

From adb099255696181cd215a400355790e623580113 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 27 Aug 2018 16:29:11 +0000
Subject: [PATCH 09/17] Fix flow

---
 .../react-dom/src/events/ReactBrowserEventEmitter.js   |  4 ++--
 packages/react-dom/src/events/ReactDOMEventListener.js |  8 ++++++--
 .../react-dom/src/events/ReactEventDispatchTracker.js  | 10 +++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 1e6e483e999a7..bfd599c1a151d 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -133,7 +133,7 @@ export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
   element: Element,
-  root: Element,
+  root: Document | Element,
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
@@ -152,7 +152,7 @@ export function listenTo(
         const rootListeners = getListenerTrackingFor(root);
 
         if (!elementListeners.hasOwnProperty(dependency)) {
-          trapCapturedEvent(dependency, element, mountAt);
+          trapCapturedEvent(dependency, element);
           elementListeners[dependency] = true;
         }
 
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 59df00f5efbe0..c07b6fc85f076 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -207,13 +207,17 @@ export function trapCapturedEvent(
  */
 export function releaseLocalEvent(
   topLevelType: DOMTopLevelEventType,
-  element: Element,
+  element: Document | Element,
 ) {
   if (!element) {
     return null;
   }
 
-  addEventCaptureListener(element, topLevelType, removeTrackedEvent);
+  addEventCaptureListener(
+    element,
+    getRawEventName(topLevelType),
+    removeTrackedEvent,
+  );
 }
 
 function dispatchInteractiveEvent(topLevelType, nativeEvent) {
diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
index 53eea4d483d04..9192df7a14d3a 100644
--- a/packages/react-dom/src/events/ReactEventDispatchTracker.js
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -12,7 +12,11 @@ import type {AnyNativeEvent} from 'events/PluginModuleType';
 const tracker = typeof WeakSet === 'undefined' ? null : new WeakSet();
 const trackedProperty = '__react_event_tracking:' + Math.random();
 
-export function trackEventDispatch(event: AnyNativeEvent) {
+type TrackableEvent = AnyNativeEvent & {
+  [trackedProperty: string]: boolean,
+};
+
+export function trackEventDispatch(event: TrackableEvent) {
   if (tracker != null) {
     tracker.add(event);
   } else {
@@ -21,7 +25,7 @@ export function trackEventDispatch(event: AnyNativeEvent) {
   }
 }
 
-export function removeTrackedEvent(event: AnyNativeEvent) {
+export function removeTrackedEvent(event: TrackableEvent) {
   if (tracker != null) {
     tracker.delete(event);
   } else {
@@ -29,7 +33,7 @@ export function removeTrackedEvent(event: AnyNativeEvent) {
   }
 }
 
-export function hasEventDispatched(event: AnyNativeEvent): boolean {
+export function hasEventDispatched(event: TrackableEvent): boolean {
   if (tracker != null) {
     return tracker.has(event);
   }

From 310b87bea986b39e57786d635932abeeae44f54f Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 27 Aug 2018 20:41:15 +0000
Subject: [PATCH 10/17] Add WeakSet to eslint config

---
 scripts/rollup/validate/eslintrc.cjs.js | 1 +
 scripts/rollup/validate/eslintrc.fb.js  | 1 +
 scripts/rollup/validate/eslintrc.rn.js  | 1 +
 scripts/rollup/validate/eslintrc.umd.js | 1 +
 4 files changed, 4 insertions(+)

diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 82c236f7c2228..0c85918fe3a8b 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -12,6 +12,7 @@ module.exports = {
     Proxy: true,
     Symbol: true,
     WeakMap: true,
+    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 527fd0a473c98..66c244d0fe593 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -12,6 +12,7 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
+    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 527fd0a473c98..66c244d0fe593 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -12,6 +12,7 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
+    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 7ee1e112f2b09..f32dcee36ec17 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -11,6 +11,7 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
+    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,

From 635ee1745527ecdde83bc51ba0640f2e06ac350f Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 27 Aug 2018 23:43:25 +0000
Subject: [PATCH 11/17] Eliminate root listener by tracking target

Prior work included an event listener on the root container that would
release events from tracking. This is not necessary. Instead, we can
track the last currentTarget to see if the dispatch should be counted.

This appears to work for both bubbling and capture. Assuming the
following markup:

```html
<div id="top" onScroll={...}>
  <div id="middle" onScroll={...}>
    <div id="bottom" onScroll={...} />
  </div>
</div>
```

Assume all levels have a local scroll listener. If we dispatch from
the bottom:

1. The first target is the "top", because we assign it as
  captured. Capture works in reverse.
2. "middle" is skipped because the event is tracked to "top"
3. "bottom" is skipped because the event is trakced to "top"

This means that only one synthetic event dispatch occurs once.
---
 .../src/__tests__/LocalEventListeners-test.js | 44 +++++++++++++++---
 .../react-dom/src/client/ReactDOMComponent.js |  2 +-
 .../src/events/ReactBrowserEventEmitter.js    | 10 +----
 .../src/events/ReactDOMEventListener.js       | 45 +------------------
 .../src/events/ReactEventDispatchTracker.js   | 28 +++---------
 scripts/rollup/validate/eslintrc.cjs.js       |  1 -
 scripts/rollup/validate/eslintrc.fb.js        |  1 -
 scripts/rollup/validate/eslintrc.rn.js        |  1 -
 scripts/rollup/validate/eslintrc.umd.js       |  1 -
 9 files changed, 48 insertions(+), 85 deletions(-)

diff --git a/packages/react-dom/src/__tests__/LocalEventListeners-test.js b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
index 0be6924b68fc7..71a5252a2938e 100644
--- a/packages/react-dom/src/__tests__/LocalEventListeners-test.js
+++ b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
@@ -44,41 +44,73 @@ describe('Local event listeners', () => {
     expect(callback).toHaveBeenCalledTimes(2);
   });
 
-  it('can re-dispatch the same event', () => {
+  it('can re-dispatch the same event from lower in the tree', () => {
     const callback = jest.fn();
 
     ReactDOM.render(
       <div id="top" onScroll={callback}>
-        <div id="bottom" />
+        <div id="middle">
+          <div id="bottom" />
+        </div>
       </div>,
       container,
     );
 
     const event = document.createEvent('Event');
+    const top = container.querySelector('#top');
+    const middle = container.querySelector('#middle');
     const bottom = container.querySelector('#bottom');
 
     event.initEvent('scroll', true, true);
 
+    top.dispatchEvent(event);
+    middle.dispatchEvent(event);
     bottom.dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it('can re-dispatch the same event from higher in the tree', () => {
+    const callback = jest.fn();
+
+    ReactDOM.render(
+      <div id="top" onScroll={callback}>
+        <div id="middle">
+          <div id="bottom" />
+        </div>
+      </div>,
+      container,
+    );
+
+    const event = document.createEvent('Event');
+    const top = container.querySelector('#top');
+    const bottom = container.querySelector('#bottom');
+
+    event.initEvent('scroll', true, true);
+
     bottom.dispatchEvent(event);
+    top.dispatchEvent(event);
 
     expect(callback).toHaveBeenCalledTimes(2);
   });
 
-  it('can re-dispatch non-local events', () => {
+  it('can re-dispatch the same event from the same point in the tree', () => {
     const callback = jest.fn();
 
     ReactDOM.render(
-      <div id="top" onMouseOver={callback}>
-        <div id="bottom" />
+      <div id="top" onScroll={callback}>
+        <div id="middle">
+          <div id="bottom" />
+        </div>
       </div>,
       container,
     );
 
     const event = document.createEvent('Event');
+
     const bottom = container.querySelector('#bottom');
 
-    event.initEvent('mouseover', true, true);
+    event.initEvent('scroll', true, true);
 
     bottom.dispatchEvent(event);
     bottom.dispatchEvent(event);
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 3ffbd4de8d578..9ab90776bfb5f 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -229,7 +229,7 @@ function ensureListeningTo(rootContainerElement, registrationName, domElement) {
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc, domElement, rootContainerElement);
+  listenTo(registrationName, doc, domElement);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index bfd599c1a151d..67e7152d4fe12 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -30,7 +30,6 @@ import {
   isEnabled,
   trapBubbledEvent,
   trapCapturedEvent,
-  releaseLocalEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
 
@@ -132,8 +131,7 @@ function getListenerTrackingFor(node: any) {
 export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
-  element: Element,
-  root: Document | Element,
+  element: Element
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
@@ -149,17 +147,11 @@ export function listenTo(
       case TOP_SCROLL:
       case TOP_WHEEL:
         const elementListeners = getListenerTrackingFor(element);
-        const rootListeners = getListenerTrackingFor(root);
 
         if (!elementListeners.hasOwnProperty(dependency)) {
           trapCapturedEvent(dependency, element);
           elementListeners[dependency] = true;
         }
-
-        if (!rootListeners.hasOwnProperty(dependency)) {
-          releaseLocalEvent(dependency, root);
-          rootListeners[dependency] = true;
-        }
         break;
       case TOP_FOCUS:
       case TOP_BLUR:
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index c07b6fc85f076..0b908d6caf048 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -24,7 +24,6 @@ import {getRawEventName} from './DOMTopLevelEventTypes';
 import {
   hasEventDispatched,
   trackEventDispatch,
-  removeTrackedEvent,
 } from './ReactEventDispatchTracker';
 import {
   TOP_SCROLL,
@@ -194,32 +193,6 @@ export function trapCapturedEvent(
   );
 }
 
-/**
- * Scroll and touch events are attached locally. To prevent multiple
- * dispatches of nested events, they are tracked. When tracked events hit
- * the root element, they are removed from tracking so that an event can be
- * dispatched multiple times (usually when testing).
- *
- * @param {number} topLevelType Number from `TopLevelEventTypes`.
- * @param {object} element Root element on which the event should be released.
- *
- * @internal
- */
-export function releaseLocalEvent(
-  topLevelType: DOMTopLevelEventType,
-  element: Document | Element,
-) {
-  if (!element) {
-    return null;
-  }
-
-  addEventCaptureListener(
-    element,
-    getRawEventName(topLevelType),
-    removeTrackedEvent,
-  );
-}
-
 function dispatchInteractiveEvent(topLevelType, nativeEvent) {
   interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
 }
@@ -228,25 +201,11 @@ export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,
 ) {
-  if (!_enabled) {
+  if (!_enabled || hasEventDispatched(nativeEvent)) {
     return;
   }
 
-  switch (topLevelType) {
-    case TOP_TOUCH_START:
-    case TOP_TOUCH_END:
-    case TOP_TOUCH_MOVE:
-    case TOP_TOUCH_CANCEL:
-    case TOP_SCROLL:
-    case TOP_WHEEL:
-      if (hasEventDispatched(nativeEvent)) {
-        return;
-      }
-      trackEventDispatch(nativeEvent);
-      break;
-    default:
-    // Do nothing
-  }
+  trackEventDispatch(nativeEvent);
 
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
index 9192df7a14d3a..51e5e934eafdd 100644
--- a/packages/react-dom/src/events/ReactEventDispatchTracker.js
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -9,36 +9,20 @@
 
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 
-const tracker = typeof WeakSet === 'undefined' ? null : new WeakSet();
-const trackedProperty = '__react_event_tracking:' + Math.random();
+const lastTarget = '__$react_event_tracking:' + Math.random();
 
 type TrackableEvent = AnyNativeEvent & {
-  [trackedProperty: string]: boolean,
+  [lastTarget: string]: Node,
 };
 
 export function trackEventDispatch(event: TrackableEvent) {
-  if (tracker != null) {
-    tracker.add(event);
-  } else {
-    // Only process each native event once
-    event[trackedProperty] = true;
-  }
-}
-
-export function removeTrackedEvent(event: TrackableEvent) {
-  if (tracker != null) {
-    tracker.delete(event);
-  } else {
-    event[trackedProperty] = false;
-  }
+  event[lastTarget] = event.currentTarget;
 }
 
 export function hasEventDispatched(event: TrackableEvent): boolean {
-  if (tracker != null) {
-    return tracker.has(event);
+  if (!event.hasOwnProperty(lastTarget)) {
+    return false
   }
 
-  return (
-    event.hasOwnProperty(trackedProperty) && event[trackedProperty] === true
-  );
+  return event[lastTarget] !== event.currentTarget
 }
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 0c85918fe3a8b..82c236f7c2228 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -12,7 +12,6 @@ module.exports = {
     Proxy: true,
     Symbol: true,
     WeakMap: true,
-    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 66c244d0fe593..527fd0a473c98 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -12,7 +12,6 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
-    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 66c244d0fe593..527fd0a473c98 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -12,7 +12,6 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
-    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index f32dcee36ec17..7ee1e112f2b09 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -11,7 +11,6 @@ module.exports = {
     Symbol: true,
     Proxy: true,
     WeakMap: true,
-    WeakSet: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,

From 635854d1459a040c9ccd02363efb2513ff7c3356 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 27 Aug 2018 23:57:23 +0000
Subject: [PATCH 12/17] Add additional test cases from commit

---
 .../src/__tests__/LocalEventListeners-test.js | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/LocalEventListeners-test.js b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
index 71a5252a2938e..5f11e06beacc1 100644
--- a/packages/react-dom/src/__tests__/LocalEventListeners-test.js
+++ b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
@@ -118,7 +118,7 @@ describe('Local event listeners', () => {
     expect(callback).toHaveBeenCalledTimes(2);
   });
 
-  it('does not double dispatch events at the deepest leaf', () => {
+  it('does not double dispatch events at the top leaf', () => {
     const top = jest.fn();
     const middle = jest.fn();
     const bottom = jest.fn();
@@ -132,15 +132,15 @@ describe('Local event listeners', () => {
       container,
     );
 
-    const target = container.querySelector('#bottom');
+    const target = container.querySelector('#top');
     const event = document.createEvent('Event');
 
     event.initEvent('scroll', true, true);
     target.dispatchEvent(event);
 
     expect(top).toHaveBeenCalledTimes(1);
-    expect(middle).toHaveBeenCalledTimes(1);
-    expect(bottom).toHaveBeenCalledTimes(1);
+    expect(middle).toHaveBeenCalledTimes(0);
+    expect(bottom).toHaveBeenCalledTimes(0);
   });
 
   it('does not double dispatch events at the middle leaf', () => {
@@ -167,4 +167,30 @@ describe('Local event listeners', () => {
     expect(middle).toHaveBeenCalledTimes(1);
     expect(bottom).toHaveBeenCalledTimes(0);
   });
+
+  it('does not double dispatch events at the deepest leaf', () => {
+    const top = jest.fn();
+    const middle = jest.fn();
+    const bottom = jest.fn();
+
+    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');
+
+    event.initEvent('scroll', true, true);
+    target.dispatchEvent(event);
+
+    expect(top).toHaveBeenCalledTimes(1);
+    expect(middle).toHaveBeenCalledTimes(1);
+    expect(bottom).toHaveBeenCalledTimes(1);
+  });
+
 });

From 4967ed1e07890be5d58337372020d1dfa06e75cf Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 27 Aug 2018 23:58:52 +0000
Subject: [PATCH 13/17] Make the linter happy

---
 .../react-dom/src/__tests__/LocalEventListeners-test.js   | 1 -
 packages/react-dom/src/events/ReactBrowserEventEmitter.js | 2 +-
 packages/react-dom/src/events/ReactDOMEventListener.js    | 8 --------
 .../react-dom/src/events/ReactEventDispatchTracker.js     | 4 ++--
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/LocalEventListeners-test.js b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
index 5f11e06beacc1..3863364393746 100644
--- a/packages/react-dom/src/__tests__/LocalEventListeners-test.js
+++ b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
@@ -192,5 +192,4 @@ describe('Local event listeners', () => {
     expect(middle).toHaveBeenCalledTimes(1);
     expect(bottom).toHaveBeenCalledTimes(1);
   });
-
 });
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 67e7152d4fe12..30b0328d6f234 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -131,7 +131,7 @@ function getListenerTrackingFor(node: any) {
 export function listenTo(
   registrationName: string,
   mountAt: Document | Element,
-  element: Element
+  element: Element,
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 0b908d6caf048..abdb90ceb2c1e 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -25,14 +25,6 @@ import {
   hasEventDispatched,
   trackEventDispatch,
 } from './ReactEventDispatchTracker';
-import {
-  TOP_SCROLL,
-  TOP_WHEEL,
-  TOP_TOUCH_START,
-  TOP_TOUCH_END,
-  TOP_TOUCH_MOVE,
-  TOP_TOUCH_CANCEL,
-} from './DOMTopLevelEventTypes';
 
 const {isInteractiveTopLevelEventType} = SimpleEventPlugin;
 
diff --git a/packages/react-dom/src/events/ReactEventDispatchTracker.js b/packages/react-dom/src/events/ReactEventDispatchTracker.js
index 51e5e934eafdd..87f103f9b3b5f 100644
--- a/packages/react-dom/src/events/ReactEventDispatchTracker.js
+++ b/packages/react-dom/src/events/ReactEventDispatchTracker.js
@@ -21,8 +21,8 @@ export function trackEventDispatch(event: TrackableEvent) {
 
 export function hasEventDispatched(event: TrackableEvent): boolean {
   if (!event.hasOwnProperty(lastTarget)) {
-    return false
+    return false;
   }
 
-  return event[lastTarget] !== event.currentTarget
+  return event[lastTarget] !== event.currentTarget;
 }

From ebf431b2ae4e540c3887af4a02403f041c2390f1 Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Wed, 5 Sep 2018 12:26:39 -0700
Subject: [PATCH 14/17] Eliminate duplicate local listener tests in
 ReactDOMComponent-test

---
 .../src/__tests__/ReactDOMComponent-test.js   | 75 -------------------
 1 file changed, 75 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index a4f5020a59043..4dc613805c94f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2659,79 +2659,4 @@ describe('ReactDOMComponent', () => {
       document.body.removeChild(container);
     }
   });
-
-  describe('Trapping local event listeners', () => {
-    it('triggers events local captured events from children without listeners', () => {
-      const callback = jest.fn();
-      const container = document.createElement('div');
-
-      ReactDOM.render(
-        <div id="top" onScroll={callback}>
-          <div id="middle">
-            <div id="bottom" />
-          </div>
-        </div>,
-        container,
-      );
-
-      const event = document.createEvent('Event');
-
-      event.initEvent('scroll', true, true);
-      container.querySelector('#bottom').dispatchEvent(event);
-
-      expect(callback).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not double dispatch 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');
-
-      event.initEvent('scroll', true, true);
-      target.dispatchEvent(event);
-
-      expect(top).toHaveBeenCalledTimes(1);
-      expect(middle).toHaveBeenCalledTimes(1);
-      expect(bottom).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not double dispatch 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');
-
-      event.initEvent('scroll', true, true);
-      target.dispatchEvent(event);
-
-      expect(top).toHaveBeenCalledTimes(1);
-      expect(middle).toHaveBeenCalledTimes(1);
-      expect(bottom).toHaveBeenCalledTimes(0);
-    });
-  });
 });

From ec4c2e2c4b7ce18c7ea847ff5399cc95a3fbf34d Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Wed, 5 Sep 2018 12:27:33 -0700
Subject: [PATCH 15/17] Touch events should be bubbled

---
 .../src/events/ReactBrowserEventEmitter.js          | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 30b0328d6f234..2e000b938a20a 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -140,16 +140,23 @@ export function listenTo(
     const dependency = dependencies[i];
 
     switch (dependency) {
+      case TOP_SCROLL:
+      case TOP_WHEEL:
+        const elementListeners = getListenerTrackingFor(element);
+
+        if (!elementListeners.hasOwnProperty(dependency)) {
+          trapCapturedEvent(dependency, element);
+          elementListeners[dependency] = true;
+        }
+        break;
       case TOP_TOUCH_START:
       case TOP_TOUCH_END:
       case TOP_TOUCH_MOVE:
       case TOP_TOUCH_CANCEL:
-      case TOP_SCROLL:
-      case TOP_WHEEL:
         const elementListeners = getListenerTrackingFor(element);
 
         if (!elementListeners.hasOwnProperty(dependency)) {
-          trapCapturedEvent(dependency, element);
+          trapBubbledEvent(dependency, element);
           elementListeners[dependency] = true;
         }
         break;

From e7884fce0b3c1f9e45ec3d8ad1b8476ca84f17a9 Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Wed, 5 Sep 2018 13:08:03 -0700
Subject: [PATCH 16/17] Attach touch events locally, add tests to ensure bubble
 order

---
 .../src/__tests__/EventDispatchOrder-test.js  | 124 ++++++++++++++++++
 .../src/__tests__/ReactDOMComponent-test.js   |  56 --------
 .../src/events/ReactBrowserEventEmitter.js    |   7 +-
 3 files changed, 127 insertions(+), 60 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/EventDispatchOrder-test.js

diff --git a/packages/react-dom/src/__tests__/EventDispatchOrder-test.js b/packages/react-dom/src/__tests__/EventDispatchOrder-test.js
new file mode 100644
index 0000000000000..47680fe362cf6
--- /dev/null
+++ b/packages/react-dom/src/__tests__/EventDispatchOrder-test.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+
+describe('EventDispatchOrder', () => {
+  let container;
+
+  // The order we receive here is not ideal since it is expected that the
+  // capture listener fire before all bubble listeners. Other React apps
+  // might depend on this.
+  //
+  // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674
+  const expectedOrder = [
+    'document capture',
+    'inner capture',
+    'inner bubble',
+    'outer capture',
+    'outer bubble',
+    'document bubble',
+  ];
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  function produceDispatchOrder(event, reactEvent) {
+    const eventOrder = [];
+    const track = tag => () => eventOrder.push(tag);
+    const outerRef = React.createRef();
+    const innerRef = React.createRef();
+
+    function OuterReactApp() {
+      return React.createElement('div', {
+        ref: outerRef,
+        [reactEvent]: track('outer bubble'),
+        [reactEvent + 'Capture']: track('outer capture'),
+      });
+    }
+
+    function InnerReactApp() {
+      return React.createElement('div', {
+        ref: innerRef,
+        [reactEvent]: track('inner bubble'),
+        [reactEvent + 'Capture']: track('inner capture'),
+      });
+    }
+
+    ReactDOM.unmountComponentAtNode(container);
+    ReactDOM.render(<OuterReactApp />, container);
+
+    ReactDOM.unmountComponentAtNode(outerRef.current);
+    ReactDOM.render(<InnerReactApp />, outerRef.current);
+
+    const trackDocBubble = track('document bubble');
+    const trackDocCapture = track('document capture');
+
+    document.addEventListener(event, trackDocBubble);
+    document.addEventListener(event, trackDocCapture, true);
+
+    innerRef.current.dispatchEvent(new Event(event, {bubbles: true}));
+
+    document.removeEventListener(event, trackDocBubble);
+    document.removeEventListener(event, trackDocCapture, true);
+
+    return eventOrder;
+  }
+
+  it('dispatches standard events in the correct order', () => {
+    expect(produceDispatchOrder('click', 'onClick')).toEqual(expectedOrder);
+  });
+
+  // Scroll and Wheel are attached as captured events directly to the element
+  describe('scrolling events', () => {
+    it('dispatches scroll events in the correct order', () => {
+      expect(produceDispatchOrder('scroll', 'onScroll')).toEqual(expectedOrder);
+    });
+
+    it('dispatches scroll events in the correct order', () => {
+      expect(produceDispatchOrder('wheel', 'onWheel')).toEqual(expectedOrder);
+    });
+  });
+
+  // Touch events are attached as bubbled events directly to the element
+  describe('touch events', () => {
+    it('dispatches touchstart in the correct order', () => {
+      expect(produceDispatchOrder('touchstart', 'onTouchStart')).toEqual(
+        expectedOrder,
+      );
+    });
+
+    it('dispatches touchend in the correct order', () => {
+      expect(produceDispatchOrder('touchend', 'onTouchEnd')).toEqual(
+        expectedOrder,
+      );
+    });
+
+    it('dispatches touchmove in the correct order', () => {
+      expect(produceDispatchOrder('touchmove', 'onTouchMove')).toEqual(
+        expectedOrder,
+      );
+    });
+
+    it('dispatches touchmove in the correct order', () => {
+      expect(produceDispatchOrder('touchcancel', 'onTouchCancel')).toEqual(
+        expectedOrder,
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 4dc613805c94f..b83ce5d5e1f36 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2603,60 +2603,4 @@ describe('ReactDOMComponent', () => {
       expect(node.getAttribute('onx')).toBe('bar');
     });
   });
-
-  it('receives events in specific order', () => {
-    let eventOrder = [];
-    let track = tag => () => eventOrder.push(tag);
-    let outerRef = React.createRef();
-    let innerRef = React.createRef();
-
-    function OuterReactApp() {
-      return (
-        <div
-          ref={outerRef}
-          onClick={track('outer bubble')}
-          onClickCapture={track('outer capture')}
-        />
-      );
-    }
-
-    function InnerReactApp() {
-      return (
-        <div
-          ref={innerRef}
-          onClick={track('inner bubble')}
-          onClickCapture={track('inner capture')}
-        />
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    try {
-      ReactDOM.render(<OuterReactApp />, container);
-      ReactDOM.render(<InnerReactApp />, outerRef.current);
-
-      document.addEventListener('click', track('document bubble'));
-      document.addEventListener('click', track('document capture'), true);
-
-      innerRef.current.click();
-
-      // The order we receive here is not ideal since it is expected that the
-      // capture listener fire before all bubble listeners. Other React apps
-      // might depend on this.
-      //
-      // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674
-      expect(eventOrder).toEqual([
-        'document capture',
-        'inner capture',
-        'inner bubble',
-        'outer capture',
-        'outer bubble',
-        'document bubble',
-      ]);
-    } finally {
-      document.body.removeChild(container);
-    }
-  });
 });
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 2e000b938a20a..eeb280549e560 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -135,6 +135,7 @@ export function listenTo(
 ) {
   const mountAtListeners = getListenerTrackingFor(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
+  let elementListeners;
 
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
@@ -142,8 +143,7 @@ export function listenTo(
     switch (dependency) {
       case TOP_SCROLL:
       case TOP_WHEEL:
-        const elementListeners = getListenerTrackingFor(element);
-
+        elementListeners = getListenerTrackingFor(element);
         if (!elementListeners.hasOwnProperty(dependency)) {
           trapCapturedEvent(dependency, element);
           elementListeners[dependency] = true;
@@ -153,8 +153,7 @@ export function listenTo(
       case TOP_TOUCH_END:
       case TOP_TOUCH_MOVE:
       case TOP_TOUCH_CANCEL:
-        const elementListeners = getListenerTrackingFor(element);
-
+        elementListeners = getListenerTrackingFor(element);
         if (!elementListeners.hasOwnProperty(dependency)) {
           trapBubbledEvent(dependency, element);
           elementListeners[dependency] = true;

From 62ce2ff98a7243f572bc5fb6553bc1b322afeabf Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Wed, 5 Sep 2018 16:55:56 -0700
Subject: [PATCH 17/17] Add additional test cases and restructure tests

---
 .../src/__tests__/LocalEventListeners-test.js | 551 ++++++++++++------
 1 file changed, 387 insertions(+), 164 deletions(-)

diff --git a/packages/react-dom/src/__tests__/LocalEventListeners-test.js b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
index 3863364393746..0d9fb1b3d4edb 100644
--- a/packages/react-dom/src/__tests__/LocalEventListeners-test.js
+++ b/packages/react-dom/src/__tests__/LocalEventListeners-test.js
@@ -24,172 +24,395 @@ describe('Local event listeners', () => {
     container.remove();
   });
 
-  it('triggers events local captured events from children without listeners', () => {
-    const callback = jest.fn();
+  describe('capturing', () => {
+    it('triggers events local captured events from children without listeners', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onScroll={callback}>
+          <div id="middle" onScroll={callback}>
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
 
-    ReactDOM.render(
-      <div id="top" onScroll={callback}>
-        <div id="middle" onScroll={callback}>
-          <div id="bottom" />
-        </div>
-      </div>,
-      container,
-    );
-
-    const event = document.createEvent('Event');
-
-    event.initEvent('scroll', true, true);
-    container.querySelector('#bottom').dispatchEvent(event);
-
-    expect(callback).toHaveBeenCalledTimes(2);
-  });
-
-  it('can re-dispatch the same event from lower in the tree', () => {
-    const callback = jest.fn();
-
-    ReactDOM.render(
-      <div id="top" onScroll={callback}>
-        <div id="middle">
-          <div id="bottom" />
-        </div>
-      </div>,
-      container,
-    );
-
-    const event = document.createEvent('Event');
-    const top = container.querySelector('#top');
-    const middle = container.querySelector('#middle');
-    const bottom = container.querySelector('#bottom');
-
-    event.initEvent('scroll', true, true);
-
-    top.dispatchEvent(event);
-    middle.dispatchEvent(event);
-    bottom.dispatchEvent(event);
-
-    expect(callback).toHaveBeenCalledTimes(3);
-  });
-
-  it('can re-dispatch the same event from higher in the tree', () => {
-    const callback = jest.fn();
-
-    ReactDOM.render(
-      <div id="top" onScroll={callback}>
-        <div id="middle">
-          <div id="bottom" />
-        </div>
-      </div>,
-      container,
-    );
-
-    const event = document.createEvent('Event');
-    const top = container.querySelector('#top');
-    const bottom = container.querySelector('#bottom');
-
-    event.initEvent('scroll', true, true);
-
-    bottom.dispatchEvent(event);
-    top.dispatchEvent(event);
-
-    expect(callback).toHaveBeenCalledTimes(2);
-  });
-
-  it('can re-dispatch the same event from the same point in the tree', () => {
-    const callback = jest.fn();
-
-    ReactDOM.render(
-      <div id="top" onScroll={callback}>
-        <div id="middle">
-          <div id="bottom" />
-        </div>
-      </div>,
-      container,
-    );
-
-    const event = document.createEvent('Event');
-
-    const bottom = container.querySelector('#bottom');
-
-    event.initEvent('scroll', true, true);
-
-    bottom.dispatchEvent(event);
-    bottom.dispatchEvent(event);
-
-    expect(callback).toHaveBeenCalledTimes(2);
-  });
-
-  it('does not double dispatch events at the top leaf', () => {
-    const top = jest.fn();
-    const middle = jest.fn();
-    const bottom = jest.fn();
-
-    ReactDOM.render(
-      <div id="top" onScroll={top}>
-        <div id="middle" onScroll={middle}>
-          <div id="bottom" onScroll={bottom} />
-        </div>
-      </div>,
-      container,
-    );
-
-    const target = container.querySelector('#top');
-    const event = document.createEvent('Event');
-
-    event.initEvent('scroll', true, true);
-    target.dispatchEvent(event);
-
-    expect(top).toHaveBeenCalledTimes(1);
-    expect(middle).toHaveBeenCalledTimes(0);
-    expect(bottom).toHaveBeenCalledTimes(0);
-  });
-
-  it('does not double dispatch events at the middle leaf', () => {
-    const top = jest.fn();
-    const middle = jest.fn();
-    const bottom = jest.fn();
-
-    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');
-
-    event.initEvent('scroll', true, true);
-    target.dispatchEvent(event);
-
-    expect(top).toHaveBeenCalledTimes(1);
-    expect(middle).toHaveBeenCalledTimes(1);
-    expect(bottom).toHaveBeenCalledTimes(0);
+      event.initEvent('scroll', true, true);
+      container.querySelector('#bottom').dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('can re-dispatch the same event from lower in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onScroll={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      const top = container.querySelector('#top');
+      const middle = container.querySelector('#middle');
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('scroll', true, true);
+
+      top.dispatchEvent(event);
+      middle.dispatchEvent(event);
+      bottom.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+
+    it('can re-dispatch the same event from higher in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onScroll={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      const top = container.querySelector('#top');
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('scroll', true, true);
+
+      bottom.dispatchEvent(event);
+      top.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('can re-dispatch the same event from the same point in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onScroll={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('scroll', true, true);
+
+      bottom.dispatchEvent(event);
+      bottom.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('does not double dispatch events at the top leaf', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onScroll={top}>
+          <div id="middle" onScroll={middle}>
+            <div id="bottom" onScroll={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#top');
+      const event = document.createEvent('Event');
+
+      event.initEvent('scroll', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(0);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not double dispatch events at the middle leaf', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      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');
+
+      event.initEvent('scroll', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not double dispatch events at the deepest leaf for captured events', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      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');
+
+      event.initEvent('scroll', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it('does not double dispatch events at the deepest leaf', () => {
-    const top = jest.fn();
-    const middle = jest.fn();
-    const bottom = jest.fn();
-
-    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');
-
-    event.initEvent('scroll', true, true);
-    target.dispatchEvent(event);
-
-    expect(top).toHaveBeenCalledTimes(1);
-    expect(middle).toHaveBeenCalledTimes(1);
-    expect(bottom).toHaveBeenCalledTimes(1);
+  describe('bubbling', () => {
+    it('triggers events local bubbled events from children without listeners', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={callback}>
+          <div id="middle" onTouchStart={callback}>
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchstart', true, true);
+      container.querySelector('#bottom').dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('can re-dispatch the same event from lower in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      const top = container.querySelector('#top');
+      const middle = container.querySelector('#middle');
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('touchstart', true, true);
+
+      top.dispatchEvent(event);
+      middle.dispatchEvent(event);
+      bottom.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+
+    it('can re-dispatch the same event from higher in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      const top = container.querySelector('#top');
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('touchstart', true, true);
+
+      bottom.dispatchEvent(event);
+      top.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('can re-dispatch the same event from higher in the tree with multiple listeners', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={top}>
+          <div id="middle" onTouchStart={middle}>
+            <div id="bottom" onTouchStart={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      event.initEvent('touchstart', true, true);
+
+      container.querySelector('#top').dispatchEvent(event);
+      container.querySelector('#middle').dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(2);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('can re-dispatch the same event from lower in the tree with multiple listeners', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={top}>
+          <div id="middle" onTouchStart={middle}>
+            <div id="bottom" onTouchStart={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+      event.initEvent('touchstart', true, true);
+
+      container.querySelector('#middle').dispatchEvent(event);
+      container.querySelector('#top').dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(2);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('can re-dispatch the same event from the same point in the tree', () => {
+      const callback = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={callback}>
+          <div id="middle">
+            <div id="bottom" />
+          </div>
+        </div>,
+        container,
+      );
+
+      const event = document.createEvent('Event');
+
+      const bottom = container.querySelector('#bottom');
+
+      event.initEvent('touchstart', true, true);
+
+      bottom.dispatchEvent(event);
+      bottom.dispatchEvent(event);
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('does not double dispatch events at the top leaf', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={top}>
+          <div id="middle" onTouchStart={middle}>
+            <div id="bottom" onTouchStart={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#top');
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchstart', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(0);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not double dispatch events at the middle leaf', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={top}>
+          <div id="middle" onTouchStart={middle}>
+            <div id="bottom" onTouchStart={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#middle');
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchstart', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not double dispatch events at the deepest leaf for captured events', () => {
+      const top = jest.fn();
+      const middle = jest.fn();
+      const bottom = jest.fn();
+
+      ReactDOM.render(
+        <div id="top" onTouchStart={top}>
+          <div id="middle" onTouchStart={middle}>
+            <div id="bottom" onTouchStart={bottom} />
+          </div>
+        </div>,
+        container,
+      );
+
+      const target = container.querySelector('#bottom');
+      const event = document.createEvent('Event');
+
+      event.initEvent('touchstart', true, true);
+      target.dispatchEvent(event);
+
+      expect(top).toHaveBeenCalledTimes(1);
+      expect(middle).toHaveBeenCalledTimes(1);
+      expect(bottom).toHaveBeenCalledTimes(1);
+    });
   });
 });