Модификаторы событий

Petite-Vue, облегчённая альтернатива Vue.js, сохраняет большинство концепций реактивности и управления событиями. Одной из важных особенностей работы с событиями являются модификаторы событий, позволяющие управлять поведением обработчиков без необходимости писать лишний код.

Основные модификаторы

Модификаторы в Petite-Vue применяются к директиве @event через точку после имени события: @click.stop, @submit.prevent и т.д. Они изменяют стандартное поведение браузера или поток событий.

Примеры ключевых модификаторов:

  • stop — останавливает распространение события (event propagation).
  • prevent — предотвращает стандартное поведение браузера.
  • self — срабатывает только если событие инициировано на текущем элементе, а не на его потомках.
  • once — обработчик выполняется только один раз.
  • capture — слушает событие на фазе захвата.
  • passive — указывает, что обработчик не будет вызывать preventDefault(), оптимизация для скроллинга и жестов.
<div @click.stop="handleClick">Клик с остановкой всплытия</div>
<form @submit.prevent="handleSubmit">
  <button type="submit">Отправить</button>
</form>
<button @click.once="handleOnce">Нажать один раз</button>

Модификатор stop

Модификатор stop эквивалентен вызову event.stopPropagation() внутри обработчика. Он предотвращает всплытие события вверх по дереву DOM.

<div @click="parentClick">
  Родитель
  <button @click.stop="childClick">Дочерняя кнопка</button>
</div>
<script>
  const app = {
    parentClick() { console.log('Родитель'); },
    childClick() { console.log('Дочерний'); }
  }
  PetiteVue.createApp(app).mount()
</script>

При клике на кнопку будет выведено только 'Дочерний', потому что всплытие остановлено.

Модификатор prevent

prevent предотвращает стандартное поведение браузера. Обычно используется с формами и ссылками.

<a href="https://example.com" @click.prevent="linkClick">Ссылка</a>
<script>
  const app = {
    linkClick() { console.log('Ссылка кликнута'); }
  }
  PetiteVue.createApp(app).mount()
</script>

Событие не приведёт к переходу по ссылке, но вызовет обработчик linkClick.

Модификатор self

self срабатывает только если событие произошло на самом элементе, игнорируя потомков.

<div @click.self="parentOnlyClick">
  Родитель
  <button>Кнопка</button>
</div>
<script>
  const app = {
    parentOnlyClick() { console.log('Клик по родителю'); }
  }
  PetiteVue.createApp(app).mount()
</script>

Клик по кнопке внутри div не вызовет обработчик parentOnlyClick.

Модификатор once

once гарантирует выполнение обработчика один раз, после чего он автоматически удаляется.

<button @click.once="sayHello">Привет</button>
<script>
  const app = {
    sayHello() { console.log('Привет!'); }
  }
  PetiteVue.createApp(app).mount()
</script>

Любые последующие клики будут игнорироваться.

Модификаторы capture и passive

  • capture переводит событие в фазу захвата, срабатывая до того, как событие дойдёт до целевого элемента.
  • passive используется для оптимизации скроллинга и жестов, предотвращая блокировку основного потока браузера.
<div @scroll.passive="onScroll">Скролл контейнера</div>
<script>
  const app = {
    onScroll(e) { console.log('Скролл', e); }
  }
  PetiteVue.createApp(app).mount()
</script>

passive гарантирует, что вызов preventDefault() внутри onScroll вызовет предупреждение, но увеличит производительность.

Комбинирование модификаторов

Модификаторы можно комбинировать, перечисляя их через точку:

<button @click.stop.prevent.once="handleClick">Комбинированный клик</button>

Здесь:

  • stop — предотвращает всплытие,
  • prevent — предотвращает стандартное действие,
  • once — срабатывает только один раз.

Пользовательские события и модификаторы

Petite-Vue позволяет использовать модификаторы и с пользовательскими событиями. Важно, чтобы события были инициированы через $emit:

<child @custom-event.prevent="handleCustom"></child>
<script>
  const app = {
    handleCustom() { console.log('Поймано кастомное событие'); }
  }
  PetiteVue.createApp(app).mount()
</script>

Внутри компонента child событие custom-event может быть вызвано через this.$emit('custom-event'), и модификатор prevent будет корректно применён.

Модификаторы событий в Petite-Vue обеспечивают компактный и декларативный способ управления поведением обработчиков, позволяя сократить количество кода и улучшить читаемость приложений. Они поддерживают большинство сценариев, характерных для интерактивных интерфейсов, включая предотвращение стандартного поведения, управление всплытием и однократное выполнение событий.

Оглавление