Extend EventTarget to support event bubbling

cjs/interface/event-target.js

@@ -6,4 +6,33 @@ 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.cancelBubble) {
+      const parent = this._getParent();
+      if (parent && parent.dispatchEvent) {
+        const options = {
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+          composed: event.composed,
+        };
+        // in Node 16.5 the same event can't be used for another dispatch
+        return parent.dispatchEvent(new event.constructor(event.type, options));
+      }
+    }
+    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.cancelBubble = false;
+      this._stopImmediatePropagationFlag = false;
       this.cancelable = !!eventInitDict.cancelable;
       this.eventPhase = this.BUBBLING_PHASE;
       this.timeStamp = Date.now();
@@ -36,10 +38,32 @@ const GlobalEvent = typeof Event === 'function' ?
     preventDefault() { this.defaultPrevented = true; }
 
     // TODO: what do these do in native NodeJS Event ?
-    stopPropagation() {}
-    stopImmediatePropagation() {}
+    stopPropagation() {
+      this.cancelBubble = true;
+    }
+
+    stopImmediatePropagation() {
+      this._stopImmediatePropagationFlag = true;
+    }
   };
 
-exports.Event = GlobalEvent;
+
+
+/**
+ * @implements globalThis.Event
+ */
+class DOMEvent extends GlobalEvent {
+    // specs: "set this’s stop propagation flag and this’s stop immediate propagation flag"
+    // https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation
+    // but Node don't do that so for now we extend it
+    stopImmediatePropagation() {
+      super.stopPropagation();
+      if (typeof super.stopImmediatePropagation === 'function')
+        super.stopImmediatePropagation();
+    }
+  }
+
+
+exports.Event = DOMEvent;
 
 /* c8 ignore stop */

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,33 @@ 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.cancelBubble) {
+      const parent = this._getParent();
+      if (parent && parent.dispatchEvent) {
+        const options = {
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+          composed: event.composed,
+        };
+        // in Node 16.5 the same event can't be used for another dispatch
+        return parent.dispatchEvent(new event.constructor(event.type, options));
+      }
+    }
+    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.cancelBubble = false;
+      this._stopImmediatePropagationFlag = false;
       this.cancelable = !!eventInitDict.cancelable;
       this.eventPhase = this.BUBBLING_PHASE;
       this.timeStamp = Date.now();
@@ -35,10 +37,32 @@ const GlobalEvent = typeof Event === 'function' ?
     preventDefault() { this.defaultPrevented = true; }
 
     // TODO: what do these do in native NodeJS Event ?
-    stopPropagation() {}
-    stopImmediatePropagation() {}
+    stopPropagation() {
+      this.cancelBubble = true;
+    }
+
+    stopImmediatePropagation() {
+      this._stopImmediatePropagationFlag = true;
+    }
   };
 
-export {GlobalEvent as Event};
+
+
+/**
+ * @implements globalThis.Event
+ */
+class DOMEvent extends GlobalEvent {
+    // specs: "set this’s stop propagation flag and this’s stop immediate propagation flag"
+    // https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation
+    // but Node don't do that so for now we extend it
+    stopImmediatePropagation() {
+      super.stopPropagation();
+      if (typeof super.stopImmediatePropagation === 'function')
+        super.stopImmediatePropagation();
+    }
+  }
+
+
+export {DOMEvent as Event};
 
 /* c8 ignore stop */

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)

package.json

@@ -56,7 +56,7 @@
     "./worker": "./worker.js"
   },
   "dependencies": {
-    "@ungap/event-target": "^0.2.2",
+    "@ungap/event-target": "^0.2.3",
     "css-select": "^4.1.3",
     "cssom": "^0.5.0",
     "html-escaper": "^3.0.3",

test/interface/event-target.js

@@ -0,0 +1,96 @@
+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', () => callCount++, { once: true });
+buttonTarget.addEventListener(
+  'click',
+  (event) => {
+    event.stopImmediatePropagation();
+    callCount++;
+  },
+  {
+    once: true,
+  },
+);
+buttonTarget.addEventListener('click', () => callCount++, { once: true });
+containerTarget.addEventListener('click', basicHandler, { once: true });
+
+callCount = 0;
+buttonTarget.dispatchEvent(new Event('click', { bubbles: true }));
+assert(callCount, 2, '2 listeners should be called before stopping');

types/interface/custom-event.d.ts

@@ -5,5 +5,6 @@ export { GlobalCustomEvent as CustomEvent };
 declare const GlobalCustomEvent: {
     new (type: any, eventInitDict?: {}): {
         detail: any;
+        stopImmediatePropagation(): void;
     };
 };

types/interface/document.d.ts

@@ -219,8 +219,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;
@@ -231,7 +233,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";
@@ -251,3 +253,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

@@ -1,32 +1,7 @@
-export { GlobalEvent as Event };
+export { DOMEvent as Event };
 /**
  * @implements globalThis.Event
  */
-declare const GlobalEvent: {
-    new (type: string, eventInitDict?: EventInit): Event;
-    prototype: Event;
-    readonly AT_TARGET: number;
-    readonly BUBBLING_PHASE: number;
-    readonly CAPTURING_PHASE: number;
-    readonly NONE: number;
-} | {
-    new (type: any, eventInitDict?: {}): {
-        type: any;
-        bubbles: boolean;
-        cancelable: boolean;
-        eventPhase: number;
-        timeStamp: number;
-        defaultPrevented: boolean;
-        originalTarget: any;
-        returnValue: any;
-        srcElement: any;
-        target: any;
-        readonly BUBBLING_PHASE: number;
-        readonly CAPTURING_PHASE: number;
-        preventDefault(): void;
-        stopPropagation(): void;
-        stopImmediatePropagation(): void;
-    };
-    readonly BUBBLING_PHASE: number;
-    readonly CAPTURING_PHASE: number;
-};
+declare class DOMEvent implements globalThis.Event {
+    stopImmediatePropagation(): void;
+}

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;