docs: event delegation tweaks #12597
Conversation
|
| - when you dispatch events manually, make sure to set the `{ bubbles: true }` option | ||
| - when listening to events programmatically (i.e. not through `<button onclick={...}>` but through `node.addEventListener`), be careful to not call `stopPropagation` or else the delegated event handler won't be reached and handlers won't be invoked. For this reaon it's best to use `on` (which properly handles `stopPropagation`) from `svelte/events` instead of `addEventListener` to make sure the chain of events is preserved | ||
| - when you manually dispatch an event with the same name as one of the delegated ones, make sure to set the `{ bubbles: true }` option | ||
| - when listening to events programmatically (i.e. not through `<button onclick={...}>` but through `node.addEventListener`), be careful to not call `stopPropagation` or else the delegated event handler won't be reached and handlers won't be invoked. Similarly, event listeners added manually and higher up the DOM tree will be invoked _before_ events that are delegated and deeper down the DOM tree (because the actual event reaction happens in the delegated handler at the root). For these reasons it's best to use `on` (which properly handles `stopPropagation`) from `svelte/events` instead of `addEventListener` to make sure the chain of events is preserved |
There was a problem hiding this comment.
i don't think this change is correct? event listeners added above the application root will only be invoked before delegated event handlers if they're capturing. opening a new PR
There was a problem hiding this comment.
I think it kind of makes sense. You can have an event listener manually added above an element and that will indeed fire before the root event listener. Now you mention it though, we could definitely explain this differently to be clearer.
There was a problem hiding this comment.
No it does fire before them; "higher up the dom tree" does mean "but below the application root"
There was a problem hiding this comment.
ah wait, higher up but below the root. that needs clarification
closes #11317
Before submitting the PR, please make sure you do the following
feat:,fix:,chore:, ordocs:.Tests and linting
pnpm testand lint the project withpnpm lint