Add capturing support to on function

demiazz · May 4, 2017 · a035784 · a035784
1 parent 0487629
commit a035784
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 13 deletions.
diff --git a/d.ts/homey.d.ts b/d.ts/homey.d.ts
@@ -56,7 +56,7 @@ export function remove(element: Element): boolean;
  * Events
  */
 
-export function on(element: Element, eventType: EventType, listener: EventListener): () => void;
+export function on(element: Element, eventType: EventType, listener: EventListener, useCapture?: boolean): () => void;
 export function once(element: Element, eventType: EventType, listener: EventListener): () => void;
 export function delegate(element: Element, selector: Selector, eventType: EventType, listener: EventListener): () => void;
 export function dispatch(element: Element, eventType: EventType, listener: EventListener): boolean;
diff --git a/spec/events/on.spec.js b/spec/events/on.spec.js
@@ -1,19 +1,14 @@
 import { on } from "../../src";
 
 describe("on", () => {
-  let subject;
-  let listener;
+  afterEach(clearFixtures);
 
-  beforeEach(() => {
+  it("adds listener for DOM event", () => {
     useFixture(`<div class="root"></div>`);
 
-    subject = document.querySelector(".root");
-    listener = jasmine.createSpy("listener");
-  });
-
-  afterEach(clearFixtures);
+    const subject = document.querySelector(".root");
+    const listener = jasmine.createSpy("listener");
 
-  it("adds listener for DOM event", () => {
     on(subject, "click", listener);
 
     expect(listener).not.toHaveBeenCalled();
@@ -27,6 +22,11 @@ describe("on", () => {
   });
 
   it("adds listener for custom event", () => {
+    useFixture(`<div class="root"></div>`);
+
+    const subject = document.querySelector(".root");
+    const listener = jasmine.createSpy("listener");
+
     on(subject, "custom", listener);
 
     expect(listener).not.toHaveBeenCalled();
@@ -40,6 +40,11 @@ describe("on", () => {
   });
 
   it("adds listener which called on each event trigger", () => {
+    useFixture(`<div class="root"></div>`);
+
+    const subject = document.querySelector(".root");
+    const listener = jasmine.createSpy("listener");
+
     on(subject, "click", listener);
 
     expect(listener).not.toHaveBeenCalled();
@@ -56,6 +61,11 @@ describe("on", () => {
   });
 
   it("returns function for removing listener", () => {
+    useFixture(`<div class="root"></div>`);
+
+    const subject = document.querySelector(".root");
+    const listener = jasmine.createSpy("listener");
+
     const off = on(subject, "click", listener);
 
     expect(listener).not.toHaveBeenCalled();
@@ -76,4 +86,70 @@ describe("on", () => {
     expect(listener).toHaveBeenCalledTimes(1);
     expect(listener).toHaveBeenCalledWith(listenedEvent);
   });
+
+  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");
+
+      on(parent, "click", parentListener);
+      on(subject, "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");
+
+      on(parent, "click", parentListener, true);
+      on(subject, "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/on.js b/src/events/on.js
@@ -5,11 +5,12 @@ import type { EventType } from "../types";
 function on(
   element: Element,
   eventType: EventType,
-  listener: EventListener
+  listener: EventListener,
+  useCapture?: boolean = false
 ): () => void {
-  element.addEventListener(eventType, listener);
+  element.addEventListener(eventType, listener, useCapture);
 
-  return () => element.removeEventListener(eventType, listener);
+  return () => element.removeEventListener(eventType, listener, useCapture);
 }
 
 export default on;