svelte 组件中的事件处理

Question

let's say we create a custom element called MyAnchor, which will have click event handler, and intercept click, and for some, we will have custom dialog, then my question is, does svelte assigns event handler over every instance of that component in a page, or one delegated event handler to all instances, passing ref? question is generic for any component.

Answer 1

Svelte assigns your event handler to each instance.

You can see this by looking at the output of the compiler. (See "JS output" tab in https://svelte.dev/repl )

For example:

<MyAnchor on:click={handleClick}/>
<MyAnchor on:click={handleClick}/>

Will result in:

const myanchor0 = new MyAnchor();
myanchor0.$on("click", handleClick);

const myanchor1 = new MyAnchor();
myanchor1.$on("click", handleClick);