happy-dom 9.8.0 → 9.8.2

package/src/event/Event.ts

@@ -6,6 +6,7 @@ import IEventTarget from './IEventTarget';
 import NodeTypeEnum from '../nodes/node/NodeTypeEnum';
 import { performance } from 'perf_hooks';
 import EventPhaseEnum from './EventPhaseEnum';
+import IDocument from '../nodes/document/IDocument';
 
 /**
  * Event.
@@ -77,28 +78,28 @@ export default class Event {
 	 * @returns Composed path.
 	 */
 	public composedPath(): IEventTarget[] {
-		if (!this.target) {
+		if (!this._target) {
 			return [];
 		}
 
 		const composedPath = [];
-		let eventTarget: INode | IShadowRoot | IWindow = <INode | IShadowRoot>(<unknown>this.target);
+		let eventTarget: INode | IShadowRoot | IWindow = <INode | IShadowRoot>(<unknown>this._target);
 
 		while (eventTarget) {
 			composedPath.push(eventTarget);
 
-			if (this.bubbles) {
-				if (
-					this.composed &&
-					(<INode>eventTarget).nodeType === NodeTypeEnum.documentFragmentNode &&
-					(<IShadowRoot>eventTarget).host
-				) {
-					eventTarget = (<IShadowRoot>eventTarget).host;
-				} else if ((<INode>(<unknown>this.target)).ownerDocument === eventTarget) {
-					eventTarget = (<INode>(<unknown>this.target)).ownerDocument.defaultView;
-				} else {
-					eventTarget = (<INode>(<unknown>eventTarget)).parentNode || null;
-				}
+			if ((<INode>(<unknown>eventTarget)).parentNode) {
+				eventTarget = (<INode>(<unknown>eventTarget)).parentNode;
+			} else if (
+				this.composed &&
+				(<INode>eventTarget).nodeType === NodeTypeEnum.documentFragmentNode &&
+				(<IShadowRoot>eventTarget).host
+			) {
+				eventTarget = (<IShadowRoot>eventTarget).host;
+			} else if ((<INode>eventTarget).nodeType === NodeTypeEnum.documentNode) {
+				eventTarget = (<IDocument>(<unknown>eventTarget)).defaultView;
+			} else {
+				break;
 			}
 		}
 

package/src/event/EventTarget.ts

@@ -3,6 +3,9 @@ import Event from './Event';
 import IEventTarget from './IEventTarget';
 import IEventListenerOptions from './IEventListenerOptions';
 import EventPhaseEnum from './EventPhaseEnum';
+import INode from '../nodes/node/INode';
+import IDocument from '../nodes/document/IDocument';
+import IWindow from '../window/IWindow';
 
 /**
  * Handles events.
@@ -28,13 +31,23 @@ export default abstract class EventTarget implements IEventTarget {
 		listener: ((event: Event) => void) | IEventListener,
 		options?: boolean | IEventListenerOptions
 	): void {
+		const listenerOptions = typeof options === 'boolean' ? { capture: options } : options || null;
+
 		this._listeners[type] = this._listeners[type] || [];
 		this._listenerOptions[type] = this._listenerOptions[type] || [];
 
 		this._listeners[type].push(listener);
-		this._listenerOptions[type].push(
-			typeof options === 'boolean' ? { capture: options } : options || null
-		);
+		this._listenerOptions[type].push(listenerOptions);
+
+		// Tracks the amount of capture event listeners to improve performance when they are not used.
+		if (listenerOptions && listenerOptions.capture) {
+			const window = this._getWindow();
+			if (window) {
+				window['_captureEventListenerCount'][type] =
+					window['_captureEventListenerCount'][type] ?? 0;
+				window['_captureEventListenerCount'][type]++;
+			}
+		}
 	}
 
 	/**
@@ -50,6 +63,14 @@ export default abstract class EventTarget implements IEventTarget {
 		if (this._listeners[type]) {
 			const index = this._listeners[type].indexOf(listener);
 			if (index !== -1) {
+				// Tracks the amount of capture event listeners to improve performance when they are not used.
+				if (this._listenerOptions[type][index] && this._listenerOptions[type][index].capture) {
+					const window = this._getWindow();
+					if (window && window['_captureEventListenerCount'][type]) {
+						window['_captureEventListenerCount'][type]--;
+					}
+				}
+
 				this._listeners[type].splice(index, 1);
 				this._listenerOptions[type].splice(index, 1);
 			}
@@ -59,21 +80,63 @@ export default abstract class EventTarget implements IEventTarget {
 	/**
 	 * Dispatches an event.
 	 *
+	 * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
+	 * @see https://www.quirksmode.org/js/events_order.html#link4
 	 * @param event Event.
 	 * @returns The return value is false if event is cancelable and at least one of the event handlers which handled this event called Event.preventDefault().
 	 */
 	public dispatchEvent(event: Event): boolean {
-		if (!event._target) {
+		if (event.eventPhase === EventPhaseEnum.none) {
 			event._target = this;
+
+			const composedPath = event.composedPath();
+			const window = this._getWindow();
+
+			// Capturing phase
+
+			// We only need to iterate over the composed path if there are capture event listeners.
+			if (window && window['_captureEventListenerCount'][event.type]) {
+				event.eventPhase = EventPhaseEnum.capturing;
+
+				for (let i = composedPath.length - 1; i >= 0; i--) {
+					composedPath[i].dispatchEvent(event);
+					if (event._propagationStopped || event._immediatePropagationStopped) {
+						break;
+					}
+				}
+			}
+
+			// At target phase
 			event.eventPhase = EventPhaseEnum.atTarget;
+
+			this.dispatchEvent(event);
+
+			// Bubbling phase
+			if (event.bubbles && !event._propagationStopped && !event._immediatePropagationStopped) {
+				event.eventPhase = EventPhaseEnum.bubbling;
+
+				for (let i = 1; i < composedPath.length; i++) {
+					composedPath[i].dispatchEvent(event);
+					if (event._propagationStopped || event._immediatePropagationStopped) {
+						break;
+					}
+				}
+			}
+
+			// None phase (completed)
+			event.eventPhase = EventPhaseEnum.none;
+
+			return !(event.cancelable && event.defaultPrevented);
 		}
 
 		event._currentTarget = this;
 
-		const onEventName = 'on' + event.type.toLowerCase();
+		if (event.eventPhase !== EventPhaseEnum.capturing) {
+			const onEventName = 'on' + event.type.toLowerCase();
 
-		if (typeof this[onEventName] === 'function') {
-			this[onEventName].call(this, event);
+			if (typeof this[onEventName] === 'function') {
+				this[onEventName].call(this, event);
+			}
 		}
 
 		if (this._listeners[event.type]) {
@@ -85,7 +148,10 @@ export default abstract class EventTarget implements IEventTarget {
 				const listener = listeners[i];
 				const options = listenerOptions[i];
 
-				if (options?.capture && event.eventPhase !== EventPhaseEnum.capturing) {
+				if (
+					(options?.capture && event.eventPhase !== EventPhaseEnum.capturing) ||
+					(!options?.capture && event.eventPhase === EventPhaseEnum.capturing)
+				) {
 					continue;
 				}
 
@@ -141,4 +207,22 @@ export default abstract class EventTarget implements IEventTarget {
 	public detachEvent(type: string, listener: ((event: Event) => void) | IEventListener): void {
 		this.removeEventListener(type.replace('on', ''), listener);
 	}
+
+	/**
+	 * Finds and returns window if possible.
+	 *
+	 * @returns Window.
+	 */
+	public _getWindow(): IWindow | null {
+		if ((<INode>(<unknown>this)).ownerDocument) {
+			return (<INode>(<unknown>this)).ownerDocument.defaultView;
+		}
+		if ((<IDocument>(<unknown>this)).defaultView) {
+			return (<IDocument>(<unknown>this)).defaultView;
+		}
+		if ((<IWindow>(<unknown>this)).document) {
+			return <IWindow>(<unknown>this);
+		}
+		return null;
+	}
 }

package/src/nodes/document/Document.ts

@@ -70,12 +70,6 @@ export default class Document extends Node implements IDocument {
 	// Public in order to be accessible by the fetch and xhr.
 	public _cookie = new CookieJar();
 
-	// List of all nodes that has capture listeners.
-	// We need to keep track of them globally as capture listeners are called before other listeners.
-	public readonly _captureEventListenerNodes: {
-		[eventType: string]: INode[];
-	} = {};
-
 	protected _isFirstWrite = true;
 	protected _isFirstWriteAfterOpen = false;
 
@@ -969,19 +963,6 @@ export default class Document extends Node implements IDocument {
 		return !!this.activeElement;
 	}
 
-	/**
-	 * @override
-	 */
-	public dispatchEvent(event: Event): boolean {
-		const returnValue = super.dispatchEvent(event);
-
-		if (event.bubbles && !event._propagationStopped) {
-			return this.defaultView.dispatchEvent(event);
-		}
-
-		return returnValue;
-	}
-
 	/**
 	 * Triggered by window when it is ready.
 	 */

package/src/nodes/element/Element.ts

@@ -31,6 +31,7 @@ import Event from '../../event/Event';
 import ElementUtility from './ElementUtility';
 import HTMLCollection from './HTMLCollection';
 import CharacterDataUtility from '../character-data/CharacterDataUtility';
+import EventPhaseEnum from '../../event/EventPhaseEnum';
 
 /**
  * Element.
@@ -1041,10 +1042,17 @@ export default class Element extends Node implements IElement {
 	 */
 	public override dispatchEvent(event: Event): boolean {
 		const returnValue = super.dispatchEvent(event);
-		const attribute = this.getAttribute('on' + event.type);
 
-		if (attribute && !event._immediatePropagationStopped) {
-			this.ownerDocument.defaultView.eval(attribute);
+		if (
+			(event.eventPhase === EventPhaseEnum.atTarget ||
+				event.eventPhase === EventPhaseEnum.bubbling) &&
+			!event._immediatePropagationStopped
+		) {
+			const attribute = this.getAttribute('on' + event.type);
+
+			if (attribute && !event._immediatePropagationStopped) {
+				this.ownerDocument.defaultView.eval(attribute);
+			}
 		}
 
 		return returnValue;

package/src/nodes/html-button-element/HTMLButtonElement.ts

@@ -1,4 +1,5 @@
 import Event from '../../event/Event';
+import EventPhaseEnum from '../../event/EventPhaseEnum';
 import ValidityState from '../../validity-state/ValidityState';
 import IAttr from '../attr/IAttr';
 import IDocument from '../document/IDocument';
@@ -210,13 +211,19 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 * @override
 	 */
 	public override dispatchEvent(event: Event): boolean {
-		if (event.type === 'click' && this.disabled) {
+		if (event.type === 'click' && event.eventPhase === EventPhaseEnum.none && this.disabled) {
 			return false;
 		}
 
 		const returnValue = super.dispatchEvent(event);
 
-		if (event.type === 'click' && this._formNode && this.isConnected) {
+		if (
+			event.type === 'click' &&
+			(event.eventPhase === EventPhaseEnum.atTarget ||
+				event.eventPhase === EventPhaseEnum.bubbling) &&
+			this._formNode &&
+			this.isConnected
+		) {
 			const form = <IHTMLFormElement>this._formNode;
 			switch (this.type) {
 				case 'submit':

package/src/nodes/html-input-element/HTMLInputElement.ts

@@ -21,6 +21,7 @@ import IHTMLLabelElement from '../html-label-element/IHTMLLabelElement';
 import IDocument from '../document/IDocument';
 import IShadowRoot from '../shadow-root/IShadowRoot';
 import NodeList from '../node/NodeList';
+import EventPhaseEnum from '../../event/EventPhaseEnum';
 
 /**
  * HTML Input Element.
@@ -1039,19 +1040,30 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	 * @override
 	 */
 	public override dispatchEvent(event: Event): boolean {
-		if (event.type === 'click' && this.disabled) {
+		if (event.type === 'click' && event.eventPhase === EventPhaseEnum.none && this.disabled) {
 			return false;
 		}
 
+		if (
+			event.type === 'click' &&
+			(event.eventPhase === EventPhaseEnum.atTarget ||
+				event.eventPhase === EventPhaseEnum.bubbling) &&
+			this.isConnected &&
+			(this.type === 'checkbox' || this.type === 'radio')
+		) {
+			this.checked = this.type === 'checkbox' ? !this.checked : true;
+		}
+
 		const returnValue = super.dispatchEvent(event);
 
 		if (
 			event.type === 'click' &&
+			(event.eventPhase === EventPhaseEnum.atTarget ||
+				event.eventPhase === EventPhaseEnum.bubbling) &&
 			this.isConnected &&
 			(!this.readOnly || this.type === 'checkbox' || this.type === 'radio')
 		) {
 			if (this.type === 'checkbox' || this.type === 'radio') {
-				this.checked = this.type === 'checkbox' ? !this.checked : true;
 				this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
 				this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
 			} else if (this.type === 'submit') {

package/src/nodes/node/Node.ts

@@ -2,7 +2,6 @@ import EventTarget from '../../event/EventTarget';
 import MutationRecord from '../../mutation-observer/MutationRecord';
 import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum';
 import MutationListener from '../../mutation-observer/MutationListener';
-import Event from '../../event/Event';
 import INode from './INode';
 import DOMException from '../../exception/DOMException';
 import IDocument from '../document/IDocument';
@@ -14,10 +13,6 @@ import NodeUtility from './NodeUtility';
 import IAttr from '../attr/IAttr';
 import NodeList from './NodeList';
 import INodeList from './INodeList';
-import IShadowRoot from '../shadow-root/IShadowRoot';
-import IEventListener from '../../event/IEventListener';
-import IEventListenerOptions from '../../event/IEventListenerOptions';
-import EventPhaseEnum from '../../event/EventPhaseEnum';
 
 const JSON_CIRCULAR_PROPERTIES = [
 	'ownerDocument',
@@ -481,106 +476,6 @@ export default class Node extends EventTarget implements INode {
 		return oldChild;
 	}
 
-	/**
-	 * @override
-	 */
-	public override addEventListener(
-		type: string,
-		listener: ((event: Event) => void) | IEventListener,
-		options?: boolean | IEventListenerOptions
-	): void {
-		super.addEventListener(type, listener, options);
-
-		if (options === true || (options && options.capture)) {
-			const captureEventListenerNodes = this.ownerDocument
-				? <{ [eventType: string]: INode[] }>this.ownerDocument['_captureEventListenerNodes']
-				: <{ [eventType: string]: INode[] }>this['_captureEventListenerNodes'];
-
-			captureEventListenerNodes[type] = captureEventListenerNodes[type] || [];
-
-			if (!captureEventListenerNodes[type].includes(this)) {
-				captureEventListenerNodes[type].push(this);
-			}
-		}
-	}
-
-	/**
-	 * Adds an event listener.
-	 *
-	 * @param type Event type.
-	 * @param listener Listener.
-	 */
-	public override removeEventListener(
-		type: string,
-		listener: ((event: Event) => void) | IEventListener
-	): void {
-		const index = this._listeners[type]?.indexOf(listener) || -1;
-		const options = index !== -1 ? this._listenerOptions[type][index] : null;
-
-		if (options?.capture) {
-			const captureEventListenerNodes = this.ownerDocument
-				? <{ [eventType: string]: INode[] }>this.ownerDocument['_captureEventListenerNodes']
-				: <{ [eventType: string]: INode[] }>this['_captureEventListenerNodes'];
-
-			if (captureEventListenerNodes[type]) {
-				const index = captureEventListenerNodes[type].indexOf(this);
-				if (index !== -1) {
-					captureEventListenerNodes[type].splice(index, 1);
-				}
-			}
-		}
-
-		super.removeEventListener(type, listener);
-	}
-
-	/**
-	 * @override
-	 */
-	public override dispatchEvent(event: Event): boolean {
-		// Capture phase
-		if (!event._target) {
-			const captureEventListenerNodes = this.ownerDocument
-				? <{ [eventType: string]: INode[] }>this.ownerDocument['_captureEventListenerNodes']
-				: <{ [eventType: string]: INode[] }>this['_captureEventListenerNodes'];
-
-			if (captureEventListenerNodes[event.type]) {
-				event._target = this;
-				event.eventPhase = EventPhaseEnum.capturing;
-
-				for (const node of captureEventListenerNodes[event.type]) {
-					if (node !== this && NodeUtility.contains(node, this, event.composed)) {
-						node.dispatchEvent(event);
-					}
-				}
-
-				event.eventPhase = EventPhaseEnum.atTarget;
-			}
-		}
-
-		const returnValue = super.dispatchEvent(event);
-
-		// Bubbling phase
-		if (event.bubbles && !event._propagationStopped && !event._immediatePropagationStopped) {
-			event.eventPhase = EventPhaseEnum.bubbling;
-
-			if (this.parentNode) {
-				return this.parentNode.dispatchEvent(event);
-			}
-
-			// eslint-disable-next-line
-			if (
-				event.composed &&
-				this.nodeType === NodeTypeEnum.documentFragmentNode &&
-				(<IShadowRoot>(<unknown>this)).host
-			) {
-				// eslint-disable-next-line
-				return (<IShadowRoot>(<unknown>this)).host.dispatchEvent(event);
-			}
-		}
-
-		return returnValue;
-	}
-
 	/**
 	 * Converts the node to a string.
 	 *

package/src/window/Window.ts

@@ -393,6 +393,12 @@ export default class Window extends EventTarget implements IWindow {
 	public Object;
 	public Function;
 
+	// Public internal properties
+
+	// Used for tracking capture event listeners to improve performance when they are not used.
+	// See EventTarget class.
+	public _captureEventListenerCount: { [eventType: string]: number } = {};
+
 	// Private properties
 	private _setTimeout;
 	private _clearTimeout;