on:click on:input on:submit
Подключайте обработчики событий DOM непосредственно в синтаксисе шаблонов Svelte
«on:click on:input on:submit» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Директивы событий
Используйте on:, за которым следует имя события DOM, чтобы добавить слушатель.
<button on:click={handleClick}>Click</button>Встроенные обработчики
Передавайте стрелочную функцию для встроенной логики.
<button on:click={() => count++}>+</button>Именованные обработчики
Определите функцию в скрипте и ссылайтесь на неё по имени.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Получение объекта события
Обработчик получает нативное событие Event в качестве аргумента.
function onChange(e) { value = e.target.value; }on:input
Событие input возникает каждый раз, когда пользователь вводит текст в текстовое поле.
<input on:input={(e) => text = e.target.value} />on:submit
Добавьте его к <form>, чтобы обработать отправку формы. Используйте модификаторы, чтобы предотвратить действие по умолчанию.
<form on:submit|preventDefault={save}>...</form>on:keydown
Отслеживайте события клавиатуры во входных полях или глобально в документе.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change и on:input
Событие change возникает, когда пользователь заканчивает редактирование, а input — при каждом нажатии клавиши.
События мыши
Поддерживаются все стандартные события мыши DOM: mouseenter, mouseleave, mousemove.
События касания
Мобильные события касания, такие как touchstart, поддерживаются аналогичным образом.
<div on:touchstart={start} on:touchend={end}>Несколько обработчиков
Можно добавить несколько директив on: к одному элементу для разных событий.
<button on:click={a} on:focus={b}>...</button>Быстрая проверка
Каким синтаксисом подключается обработчик щелчка?
Итоги
Используйте директивы on:event для любого события DOM. Обработчик может быть встроенным или именованной функцией и получает объект события.
Часто задаваемые вопросы
Урок «on:click on:input on:submit» бесплатный?
Да — полный текст урока «on:click on:input on:submit» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «on:click on:input on:submit»?
Подключайте обработчики событий DOM непосредственно в синтаксисе шаблонов Svelte Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «on:click on:input on:submit»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- on:click on:input on:submit
- Модификаторы событий: preventDefault stopPropagation once
- Пользовательские события с createEventDispatcher
- Передача событий с on:click