Как использовать директиву "on:" в Svelte?

@rudolph_senger 

Директива "on:" в Svelte используется для прослушивания событий, которые могут происходить на элементах DOM.

Синтаксис директивы "on:" в Svelte выглядит следующим образом:

1

<button on:click={handleClick}>Click me</button>

В этом примере мы слушаем событие "click" на кнопке и вызываем функцию "handleClick", когда происходит это событие.

Также можно использовать сокращенную запись директивы "on:" для наиболее распространенных событий, например:

1

<button on:click={() => alert('Clicked!')}>Click me</button>

В этом примере мы используем сокращенную запись и вызываем анонимную функцию, которая выводит сообщение об успешном клике на кнопку.

Кроме события "click" можно прослушивать множество других событий на элементах DOM, таких как "mouseenter", "mouseleave", "submit", "keydown" и т.д.