svelte Architecture Docs
Home / File/ events.js — svelte Source File

events.js — svelte Source File

Architecture documentation for events.js, a javascript file in the svelte codebase. 13 imports, 3 dependents.

File javascript ClientRuntime Hydration 13 imports 3 dependents 7 functions

Entity Profile

Dependency Diagram

graph LR
  2c990bd1_acff_5910_3af2_ab75f655b31b["events.js"]
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 20340432_01a2_6741_abf4_60ccab51cdb3
  cb946435_ce66_d1e8_6bee_287bdb07e7c5["utils.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> cb946435_ce66_d1e8_6bee_287bdb07e7c5
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  8e9a8b22_9754_09a3_8bf1_af0aeb68deca["task.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 8e9a8b22_9754_09a3_8bf1_af0aeb68deca
  2cab0f64_6d19_d981_66e2_d2555c252702["queue_micro_task"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 2cab0f64_6d19_d981_66e2_d2555c252702
  73865c3c_2786_c9ac_d34f_b51d28b3a29e["constants.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 73865c3c_2786_c9ac_d34f_b51d28b3a29e
  df278ca2_0a6c_fefe_09f2_b397500fe3c2["warnings.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> df278ca2_0a6c_fefe_09f2_b397500fe3c2
  bde4209f_8ffc_1594_4024_b1835a44bcf6["runtime.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> bde4209f_8ffc_1594_4024_b1835a44bcf6
  55623862_10b7_5361_e30b_34ec6941f1a7["set_active_effect"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 55623862_10b7_5361_e30b_34ec6941f1a7
  311ef9f4_9b68_c178_c1db_3b8696f7d964["set_active_reaction"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> 311ef9f4_9b68_c178_c1db_3b8696f7d964
  af7441d2_339a_2db1_88df_90dba2875c10["shared.js"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> af7441d2_339a_2db1_88df_90dba2875c10
  e95d0513_ce71_430f_7ef3_577e736f42c1["without_reactive_context"]
  2c990bd1_acff_5910_3af2_ab75f655b31b --> e95d0513_ce71_430f_7ef3_577e736f42c1
  0acd2537_e1bf_d7ae_30d5_407378cfa4d3["attributes.js"]
  0acd2537_e1bf_d7ae_30d5_407378cfa4d3 --> 2c990bd1_acff_5910_3af2_ab75f655b31b
  style 2c990bd1_acff_5910_3af2_ab75f655b31b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { teardown } from '../../reactivity/effects.js';
import { define_property } from '../../../shared/utils.js';
import { hydrating } from '../hydration.js';
import { queue_micro_task } from '../task.js';
import { FILENAME } from '../../../../constants.js';
import * as w from '../../warnings.js';
import {
	active_effect,
	active_reaction,
	set_active_effect,
	set_active_reaction
} from '../../runtime.js';
import { without_reactive_context } from './bindings/shared.js';

/** @type {Set<string>} */
export const all_registered_events = new Set();

/** @type {Set<(events: Array<string>) => void>} */
export const root_event_handles = new Set();

/**
 * SSR adds onload and onerror attributes to catch those events before the hydration.
 * This function detects those cases, removes the attributes and replays the events.
 * @param {HTMLElement} dom
 */
export function replay_events(dom) {
	if (!hydrating) return;

	dom.removeAttribute('onload');
	dom.removeAttribute('onerror');
	// @ts-expect-error
	const event = dom.__e;
	if (event !== undefined) {
		// @ts-expect-error
		dom.__e = undefined;
		queueMicrotask(() => {
			if (dom.isConnected) {
				dom.dispatchEvent(event);
			}
		});
	}
}

/**
 * @param {string} event_name
 * @param {EventTarget} dom
 * @param {EventListener} [handler]
 * @param {AddEventListenerOptions} [options]
 */
export function create_event(event_name, dom, handler, options = {}) {
	/**
	 * @this {EventTarget}
	 */
	function target_handler(/** @type {Event} */ event) {
		if (!options.capture) {
			// Only call in the bubble phase, else delegated events would be called before the capturing events
			handle_event_propagation.call(dom, event);
		}
		if (!event.cancelBubble) {
			return without_reactive_context(() => {
// ... (279 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does events.js do?
events.js is a source file in the svelte codebase, written in javascript. It belongs to the ClientRuntime domain, Hydration subdomain.
What functions are defined in events.js?
events.js defines 7 function(s): apply, create_event, delegate, event, handle_event_propagation, on, replay_events.
What does events.js depend on?
events.js imports 13 module(s): constants.js, effects.js, hydration.js, queue_micro_task, runtime.js, set_active_effect, set_active_reaction, shared.js, and 5 more.
What files import events.js?
events.js is imported by 3 file(s): attributes.js, event-modifiers.js, render.js.
Where is events.js in the architecture?
events.js is located at packages/svelte/src/internal/client/dom/elements/events.js (domain: ClientRuntime, subdomain: Hydration, directory: packages/svelte/src/internal/client/dom/elements).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free