Extend EventTarget to support event bubbling

cjs/interface/event-target.js

@@ -6,4 +6,26 @@ const EventTarget = (m => /* c8 ignore start */ m.__esModule ? m.default : m /*
 /**
  * @implements globalThis.EventTarget
  */
-exports.EventTarget = EventTarget;
+class DOMEventTarget extends EventTarget {
+
+  /**
+   * @protected
+   */
+  _getParent() {
+    return null;
+  }
+
+  dispatchEvent(event) {
+    const dispatched = super.dispatchEvent(event);
+
+    // intentionally simplified, specs imply way more code: https://dom.spec.whatwg.org/#event-path
+    if (dispatched && event.bubbles && !event._stopPropagationFlag) {
+      const parent = this._getParent();
+      if (parent && parent.dispatchEvent) 
+        return parent.dispatchEvent(event);
+    }
+    return dispatched;
+  }
+}
+
+exports.EventTarget = DOMEventTarget;

cjs/interface/event.js

@@ -20,6 +20,8 @@ const GlobalEvent = typeof Event === 'function' ?
     constructor(type, eventInitDict = {}) {
       this.type = type;
       this.bubbles = !!eventInitDict.bubbles;
+      this._stopPropagationFlag = false;
+      this._stopImmediatePropagationFlag = false;
       this.cancelable = !!eventInitDict.cancelable;
       this.eventPhase = this.BUBBLING_PHASE;
       this.timeStamp = Date.now();
@@ -36,8 +38,14 @@ const GlobalEvent = typeof Event === 'function' ?
     preventDefault() { this.defaultPrevented = true; }
 
     // TODO: what do these do in native NodeJS Event ?
-    stopPropagation() {}
-    stopImmediatePropagation() {}
+    stopPropagation() {
+      this._stopPropagationFlag = true;
+    }
+
+    stopImmediatePropagation() {
+      this._stopPropagationFlag = true;
+      this._stopImmediatePropagationFlag = true;
+    }
   };
 
 exports.Event = GlobalEvent;

cjs/interface/node.js

@@ -142,6 +142,13 @@ class Node extends EventTarget {
     return false;
   }
 
+  /**
+   * @protected
+   */
+  _getParent() {
+    return this.parentNode;
+  }
+
   getRootNode() {
     let root = this;
     while (root.parentNode)

esm/interface/event-target.js

@@ -5,4 +5,26 @@ import EventTarget from '@ungap/event-target';
 /**
  * @implements globalThis.EventTarget
  */
-export {EventTarget};
+class DOMEventTarget extends EventTarget {
+
+  /**
+   * @protected
+   */
+  _getParent() {
+    return null;
+  }
+
+  dispatchEvent(event) {
+    const dispatched = super.dispatchEvent(event);
+
+    // intentionally simplified, specs imply way more code: https://dom.spec.whatwg.org/#event-path
+    if (dispatched && event.bubbles && !event._stopPropagationFlag) {
+      const parent = this._getParent();
+      if (parent && parent.dispatchEvent) 
+        return parent.dispatchEvent(event);
+    }
+    return dispatched;
+  }
+}
+
+export { DOMEventTarget as EventTarget };

esm/interface/event.js

@@ -19,6 +19,8 @@ const GlobalEvent = typeof Event === 'function' ?
     constructor(type, eventInitDict = {}) {
       this.type = type;
       this.bubbles = !!eventInitDict.bubbles;
+      this._stopPropagationFlag = false;
+      this._stopImmediatePropagationFlag = false;
       this.cancelable = !!eventInitDict.cancelable;
       this.eventPhase = this.BUBBLING_PHASE;
       this.timeStamp = Date.now();
@@ -35,8 +37,14 @@ const GlobalEvent = typeof Event === 'function' ?
     preventDefault() { this.defaultPrevented = true; }
 
     // TODO: what do these do in native NodeJS Event ?
-    stopPropagation() {}
-    stopImmediatePropagation() {}
+    stopPropagation() {
+      this._stopPropagationFlag = true;
+    }
+
+    stopImmediatePropagation() {
+      this._stopPropagationFlag = true;
+      this._stopImmediatePropagationFlag = true;
+    }
   };
 
 export {GlobalEvent as Event};

esm/interface/node.js

@@ -141,6 +141,13 @@ export class Node extends EventTarget {
     return false;
   }
 
+  /**
+   * @protected
+   */
+  _getParent() {
+    return this.parentNode;
+  }
+
   getRootNode() {
     let root = this;
     while (root.parentNode)

test/interface/event-target.js

@@ -0,0 +1,94 @@
+const assert = require('../assert.js').for('EventTarget');
+
+const { parseHTML } = global[Symbol.for('linkedom')];
+
+const { Event, document, EventTarget } = parseHTML(
+  '<html><div id="container"><button id="buttonTarget" type="button">Click me!</button></div></html>',
+);
+
+// check basics
+
+let callCount = 0;
+const basicHandler = () => {
+  callCount++;
+};
+
+
+const eventTarget = new EventTarget();
+eventTarget.addEventListener('foo', basicHandler);
+eventTarget.dispatchEvent(new Event('foo'));
+assert(callCount, 1, 'basicHandler should have been called');
+
+assert(
+  eventTarget.dispatchEvent(new Event('click')),
+  true,
+  'Dispatching an event type with no handlers should return true',
+);
+assert(callCount, 1, 'Dispatching an event type should only call appropriate listeners');
+
+eventTarget.removeEventListener('foo', basicHandler);
+eventTarget.dispatchEvent(new Event('foo'));
+assert(callCount, 1, 'basicHandler should not have been called after being removed');
+
+assert(eventTarget._getParent(), null, 'getParent should return null');
+
+
+// check propagation now
+callCount = 0;
+const buttonTarget = document.getElementById('buttonTarget');
+const containerTarget = document.getElementById('container');
+const bodyTarget = document;
+buttonTarget.addEventListener('click', basicHandler, { once: true });
+containerTarget.addEventListener('click', basicHandler, { once: true });
+bodyTarget.addEventListener('click', basicHandler, { once: true });
+
+buttonTarget.dispatchEvent(new Event('click', { bubbles: true }));
+assert(callCount, 3, 'Event bubbling, listener should be called 3 times');
+
+
+// ensure once removed listeners
+buttonTarget.dispatchEvent(new Event('click', { bubbles: true }));
+assert(callCount, 3, 'listeners should only have been called once then removed');
+
+// check no bubbling
+callCount = 0;
+buttonTarget.addEventListener('click', basicHandler, { once: true });
+containerTarget.addEventListener('click', basicHandler, { once: true });
+bodyTarget.addEventListener('click', basicHandler, { once: true });
+
+buttonTarget.dispatchEvent(new Event('click', { bubbles: false }));
+assert(callCount, 1, 'Expect listener to be called once');
+
+// check stop propagation
+buttonTarget.addEventListener(
+  'click',
+  (event) => {
+    event.stopPropagation();
+    callCount++;
+  },
+  {
+    once: true,
+  },
+);
+containerTarget.addEventListener('click', basicHandler, { once: true });
+
+callCount = 0;
+buttonTarget.dispatchEvent(new Event('click', { bubbles: true }));
+assert(callCount, 1, 'listener should be called once before stopping bubbling');
+
+// check stop immediate propagation
+buttonTarget.addEventListener(
+  'click',
+  (event) => {
+    event.stopImmediatePropagation();
+    callCount++;
+  },
+  {
+    once: true,
+  },
+);
+containerTarget.addEventListener('click', basicHandler, { once: true });
+
+callCount = 0;
+buttonTarget.dispatchEvent(new Event('click', { bubbles: true }));
+assert(callCount, 1, 'listener should be called once before stopping bubbling');

types/interface/document.d.ts

@@ -221,8 +221,10 @@ export class Document extends NonElementParentNode implements globalThis.Documen
             isSameNode(node: any): boolean;
             compareDocumentPosition(target: any): number;
             isEqualNode(node: any): boolean;
+            _getParent(): any;
             getRootNode(): any;
             [PREV]: any;
+            dispatchEvent(event: any): any;
         };
         readonly observedAttributes: any[];
         readonly ELEMENT_NODE: number;
@@ -233,7 +235,7 @@ export class Document extends NonElementParentNode implements globalThis.Documen
         readonly DOCUMENT_FRAGMENT_NODE: number;
         readonly DOCUMENT_TYPE_NODE: number;
     };
-    [EVENT_TARGET]: any;
+    [EVENT_TARGET]: EventTarget;
 }
 import { NonElementParentNode } from "../mixin/non-element-parent-node.js";
 import { DocumentType } from "./document-type.js";
@@ -253,3 +255,4 @@ import { DOCTYPE } from "../shared/symbols.js";
 import { DOM_PARSER } from "../shared/symbols.js";
 import { IMAGE } from "../shared/symbols.js";
 import { EVENT_TARGET } from "../shared/symbols.js";
+import { EventTarget } from "./event-target.js";

types/interface/event-target.d.ts

@@ -1 +1,11 @@
-export { EventTarget };
+export { DOMEventTarget as EventTarget };
+/**
+ * @implements globalThis.EventTarget
+ */
+declare class DOMEventTarget implements globalThis.EventTarget {
+    /**
+     * @protected
+     */
+    protected _getParent(): any;
+    dispatchEvent(event: any): any;
+}

types/interface/event.d.ts

@@ -13,6 +13,8 @@ declare const GlobalEvent: {
     new (type: any, eventInitDict?: {}): {
         type: any;
         bubbles: boolean;
+        _stopPropagationFlag: boolean;
+        _stopImmediatePropagationFlag: boolean;
         cancelable: boolean;
         eventPhase: number;
         timeStamp: number;

types/interface/image.d.ts

@@ -181,8 +181,10 @@ export function ImageClass(ownerDocument: any): {
         isSameNode(node: any): boolean;
         compareDocumentPosition(target: any): number;
         isEqualNode(node: any): boolean;
+        _getParent(): any;
         getRootNode(): any;
         [PREV]: any;
+        dispatchEvent(event: any): any;
     };
     readonly observedAttributes: any[];
     readonly ELEMENT_NODE: number;

types/interface/node.d.ts

@@ -1,7 +1,7 @@
 /**
  * @implements globalThis.Node
  */
-export class Node implements globalThis.Node {
+export class Node extends EventTarget implements globalThis.Node {
     static get ELEMENT_NODE(): number;
     static get ATTRIBUTE_NODE(): number;
     static get TEXT_NODE(): number;
@@ -42,7 +42,6 @@ export class Node implements globalThis.Node {
     appendChild(): void;
     replaceChild(): void;
     removeChild(): void;
-    toString(): string;
     hasChildNodes(): boolean;
     isSameNode(node: any): boolean;
     compareDocumentPosition(target: any): number;
@@ -51,6 +50,7 @@ export class Node implements globalThis.Node {
     [NEXT]: any;
     [PREV]: any;
 }
+import { EventTarget } from "./event-target.js";
 import { NodeList } from "./node-list.js";
 import { NEXT } from "../shared/symbols.js";
 import { PREV } from "../shared/symbols.js";

types/shared/node.d.ts

@@ -6,7 +6,7 @@ export function parentElement({ parentNode }: {
     parentNode: any;
 }): any;
 export function previousSibling({ [PREV]: prev }: {
-    "__@PREV@37916": any;
+    "__@PREV@38087": any;
 }): any;
 export function nextSibling(node: any): any;
 import { PREV } from "./symbols.js";