x-on и модификаторы событий

Директива x-on подписывает элемент на событие — клик, ввод, нажатие клавиши — и выполняет выражение, когда событие происходит. Это замена addEventListener из урока «События» учебника, только записанная прямо в разметке.

Обработчик

После двоеточия пишут имя события, в значении — код:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ count: 0 }">
  <button x-on:click="count++">Задач добавлено: <span x-text="count"></span></button>
</div>

Каждый клик увеличивает число на кнопке.

Сокращение @

x-on: пишут так часто, что для него есть короткая форма — знак @. Значением может быть и вызов метода:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{
  tasks: [],
  addTask() {
    this.tasks.push('Задача ' + (this.tasks.length + 1));
    console.log(this.tasks);
  }
}">
  <button @click="addTask()">Добавить задачу</button>
</div>

После каждого клика в консоли под примером выводится массив задач. Дальше в курсе используется форма @click.

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

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

Модификатор	Что делает
`.prevent`	Вызывает `preventDefault()`, например, форма не перезагружает страницу
`.stop`	Останавливает всплытие события
`.outside`	Срабатывает при клике вне элемента
`.window`	Слушает событие на всём окне
`.once`	Срабатывает один раз
`.debounce`	Ждёт паузы, по умолчанию 250 мс

Форма списка дел

Отправка формы по Enter и модификатор .prevent:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<form x-data="{ tasks: [] }" @submit.prevent="tasks.push($refs.input.value); $refs.input.value = ''">
  <input x-ref="input" placeholder="Новая задача">
  <button>Добавить</button>
  <p x-text="tasks.join(', ')"></p>
</form>

Введите задачу и нажмите Enter или кнопку — она появится в строке ниже, а страница не перезагрузится. x-ref и $refs дают доступ к полю; подробно они разобраны в отдельном уроке.

Клавиши

Для событий клавиатуры модификатор задаёт клавишу: @keydown.enter, @keydown.escape, @keydown.arrow-up.

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data>
  <input @keydown.escape="$el.value = ''" placeholder="Esc очищает поле">
</div>

Напишите что-нибудь и нажмите Esc — поле очистится. $el — сам элемент, на котором стоит директива.

Частая ошибка

Забыть .prevent у события submit. Браузер отправит форму по-своему и перезагрузит страницу, а все данные компонента пропадут — задача мелькнёт и исчезнет. Если форму обрабатывает Alpine, всегда пишите @submit.prevent.

Спасибо, что читаете!