Add capturing support to delegate function

demiazz · May 4, 2017 · b53f527 · b53f527
1 parent 1b35ee7
commit b53f527
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 3 deletions.
diff --git a/d.ts/homey.d.ts b/d.ts/homey.d.ts
@@ -58,5 +58,5 @@ export function remove(element: Element): boolean;
 
 export function on(element: Element, eventType: EventType, listener: EventListener, useCapture?: boolean): () => void;
 export function once(element: Element, eventType: EventType, listener: EventListener, useCapture?: boolean): () => void;
-export function delegate(element: Element, selector: Selector, eventType: EventType, listener: EventListener): () => void;
+export function delegate(element: Element, selector: Selector, eventType: EventType, listener: EventListener, useCapture?: boolean): () => void;
 export function dispatch(element: Element, eventType: EventType, listener: EventListener): boolean;
diff --git a/spec/events/delegate.spec.js b/spec/events/delegate.spec.js
@@ -292,4 +292,70 @@ describe("delegate", () => {
       expect(listener).not.toHaveBeenCalled();
     });
   });
+
+  describe("supports events capturing", () => {
+    it("doesn't use capturing by default", () => {
+      useFixture(`
+        <div class="parent">
+          <div class="root">
+            <div class="child"></child>
+          </div>
+        </div>
+      `);
+
+      const parent = document.querySelector(".parent");
+      const subject = document.querySelector(".root");
+      const child = document.querySelector(".child");
+      const parentListener = jasmine.createSpy("parentListener");
+      const subjectListener = jasmine.createSpy("subjectListener");
+
+      delegate(parent, ".child", "click", parentListener);
+      delegate(subject, ".child", "click", subjectListener);
+
+      expect(parentListener).not.toHaveBeenCalled();
+      expect(subjectListener).not.toHaveBeenCalled();
+
+      const event = createEvent("click");
+
+      child.dispatchEvent(event);
+
+      expect(parentListener).toHaveBeenCalledTimes(1);
+      expect(parentListener).toHaveBeenCalledWith(event);
+      expect(subjectListener).toHaveBeenCalledTimes(1);
+      expect(subjectListener).toHaveBeenCalledWith(event);
+      expect(subjectListener).toHaveBeenCalledBefore(parentListener);
+    });
+
+    it("uses capturing when flag given", () => {
+      useFixture(`
+        <div class="parent">
+          <div class="root">
+            <div class="child"></child>
+          </div>
+        </div>
+      `);
+
+      const parent = document.querySelector(".parent");
+      const subject = document.querySelector(".root");
+      const child = document.querySelector(".child");
+      const parentListener = jasmine.createSpy("parentListener");
+      const subjectListener = jasmine.createSpy("subjectListener");
+
+      delegate(parent, ".child", "click", parentListener, true);
+      delegate(subject, ".child", "click", subjectListener, true);
+
+      expect(parentListener).not.toHaveBeenCalled();
+      expect(subjectListener).not.toHaveBeenCalled();
+
+      const event = createEvent("click");
+
+      child.dispatchEvent(event);
+
+      expect(parentListener).toHaveBeenCalledTimes(1);
+      expect(parentListener).toHaveBeenCalledWith(event);
+      expect(subjectListener).toHaveBeenCalledTimes(1);
+      expect(subjectListener).toHaveBeenCalledWith(event);
+      expect(parentListener).toHaveBeenCalledBefore(subjectListener);
+    });
+  });
 });
diff --git a/src/events/delegate.js b/src/events/delegate.js
@@ -11,7 +11,8 @@ function delegate(
   element: Element,
   selector: Selector,
   eventType: EventType,
-  listener: EventListener
+  listener: EventListener,
+  useCapture?: boolean = false
 ): () => void {
   function wrappedListener(event) {
     if (!(event.target instanceof Element)) {
@@ -35,7 +36,7 @@ function delegate(
     }
   }
 
-  return on(element, eventType, wrappedListener);
+  return on(element, eventType, wrappedListener, useCapture);
 }
 
 export default delegate;