Skip to content

chore: use unbound event listeners #12165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/svelte/src/internal/client/dom/elements/events.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function create_event(event_name, dom, handler, options) {
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(dom, event);
handle_event_propagation.call(dom, event);
}
if (!event.cancelBubble) {
return handler.call(this, event);
Expand Down Expand Up @@ -143,11 +143,12 @@ export function delegate(events) {
}

/**
* @param {EventTarget} handler_element
* @this {EventTarget}
* @param {Event} event
* @returns {void}
*/
export function handle_event_propagation(handler_element, event) {
export function handle_event_propagation(event) {
var handler_element = this;
var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
var event_name = event.type;
var path = event.composedPath?.() || [];
Expand Down
32 changes: 9 additions & 23 deletions packages/svelte/src/internal/client/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,38 +196,23 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro

const registered_events = new Set();

const bound_event_listener = handle_event_propagation.bind(null, target);
const bound_document_event_listener = handle_event_propagation.bind(null, document);

/** @param {Array<string>} events */
const event_handle = (events) => {
for (let i = 0; i < events.length; i++) {
const event_name = events[i];
const passive = PassiveDelegatedEvents.includes(event_name);

if (!registered_events.has(event_name)) {
registered_events.add(event_name);

// Add the event listener to both the container and the document.
// The container listener ensures we catch events from within in case
// the outer content stops propagation of the event.
target.addEventListener(
event_name,
bound_event_listener,
PassiveDelegatedEvents.includes(event_name)
? {
passive: true
}
: undefined
);
target.addEventListener(event_name, handle_event_propagation, { passive });

// The document listener ensures we catch events that originate from elements that were
// manually moved outside of the container (e.g. via manual portals).
document.addEventListener(
event_name,
bound_document_event_listener,
PassiveDelegatedEvents.includes(event_name)
? {
passive: true
}
: undefined
);
document.addEventListener(event_name, handle_event_propagation, { passive });
}
}
};
Expand Down Expand Up @@ -264,9 +249,10 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro

return () => {
for (const event_name of registered_events) {
target.removeEventListener(event_name, bound_event_listener);
document.removeEventListener(event_name, bound_document_event_listener);
target.removeEventListener(event_name, handle_event_propagation);
document.removeEventListener(event_name, handle_event_propagation);
}

root_event_handles.delete(event_handle);
mounted_components.delete(component);
};
Expand Down
Loading