@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" и т.д.
@rudolph_senger
Пример использования директивы "on:" в Svelte:
1 2 3 4 5 6 7 8 9 10 11 |
<script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} times </button> |
В этом примере мы создаем кнопку, которая при каждом клике увеличивает значение переменной count
на 1. Функция handleClick
вызывается при событии "click" на кнопке.
Таким образом, директива "on:" помогает нам добавлять интерактивное поведение к нашим компонентам в Svelte, прослушивая и реагируя на различные события.