Модификаторы событий: preventDefault stopPropagation once
Изменяйте поведение событий с помощью модификаторов, разделённых вертикальной чертой, без дополнительного кода
«Модификаторы событий: preventDefault stopPropagation once» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Синтаксис модификаторов
Добавляйте модификаторы к имени события с помощью символа вертикальной черты.
<form on:submit|preventDefault={save}>preventDefault
Вызывает event.preventDefault() до запуска вашего обработчика. Вручную вызывать его не нужно.
stopPropagation
Вызывает event.stopPropagation(), чтобы событие не всплывало.
<div on:click|stopPropagation={inner}>Однократный вызов
Обработчик удаляется после первого вызова. Это удобно для событий, необходимых только при первоначальной настройке.
<button on:click|once={track}>Buy</button>Пассивный режим
Помечает обработчик как пассивный и сообщает браузеру, что он не будет вызывать preventDefault. Это повышает производительность прокрутки.
<div on:touchstart|passive={start}>Фаза захвата
Обработчик выполняется на фазе захвата, а не на фазе всплытия.
Только сам элемент
Событие возникает только тогда, когда его целью является сам элемент, а не его дочерний элемент.
<div on:click|self={close}>Непассивный режим
Принудительно делает событие, пассивное по умолчанию, непассивным, чтобы вы могли вызвать для него preventDefault.
Доверенные события
Событие возникает только при действиях пользователя, но не при запуске скрипта.
Сочетание модификаторов
Объединяйте несколько модификаторов, разделяя их вертикальными чертами.
<a on:click|preventDefault|stopPropagation={go}>Click</a>Зачем нужны модификаторы
Они позволяют сосредоточить обработчики на логике приложения и убрать шаблонный код.
Быстрая проверка
Что делает модификатор |once?
Итоги
Модификаторы, такие как preventDefault, stopPropagation, once и passive, упрощают распространённые изменения поведения событий.
Часто задаваемые вопросы
Урок «Модификаторы событий: preventDefault stopPropagation once» бесплатный?
Да — полный текст урока «Модификаторы событий: preventDefault stopPropagation once» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Модификаторы событий: preventDefault stopPropagation once»?
Изменяйте поведение событий с помощью модификаторов, разделённых вертикальной чертой, без дополнительного кода Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Модификаторы событий: preventDefault stopPropagation once»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- on:click on:input on:submit
- Модификаторы событий: preventDefault stopPropagation once
- Пользовательские события с createEventDispatcher
- Передача событий с on:click