События

Alpine позволяет легко прослушивать события браузера и реагировать на них.

Прослушивание простых событий

Используя x-on, можно прослушивать события браузера, отправляемые на элемент или внутри него.

Вот базовый пример прослушивания нажатия на кнопку:

<div x-data>
  <button x-on:click="alert('нажато')">Нажми меня</button>
</div>

Нажми меня

В качестве альтернативы можно использовать сокращённый синтаксис: @. Приведём тот же пример, что и раньше, но с использованием сокращённого синтаксиса (который мы будем использовать в дальнейшем):

<button @click="...">...</button>

Помимо click, можно прослушивать любое событие браузера по имени. Например: @mouseenter, @keyup и т. д. являются допустимым синтаксисом.

Прослушивание определённых клавиш

Допустим, вы хотите перехватить нажатие клавиши Enter внутри элемента <input>. Alpine упрощает эту задачу, добавляя .enter следующим образом:

<div x-data>
  <input @keyup.enter="alert('вы нажали Enter')" placeholder="Нажмите клавишу Enter" />
</div>

Вы даже можете комбинировать модификаторы клавиш, чтобы прослушивать комбинации, например, нажатие Enter при удержании Shift:

<div x-data>
  <input @keyup.shift.enter="alert('вы нажали Shift + Enter')" placeholder="Нажмите Shift и Enter" />
</div>

Предотвращение поведения по умолчанию

При реагировании на события браузера часто необходимо «предотвратить поведение по умолчанию» (предотвратить поведение события браузера по умолчанию).

Например, если вы хотите прослушивать отправку формы, но запретить браузеру отправлять запрос формы, можно использовать .prevent:

<form @submit.prevent="...">...</form>

Вы также можете применить .stop для достижения эквивалента event.stopPropagation().

Доступ к объекту события

Иногда вам может потребоваться доступ к собственному объекту событий браузера внутри вашего собственного кода. Чтобы упростить это, Alpine автоматически добавляет волшебную переменную $event:

<button @click="$event.target.remove()">Удалить меня</button>

Отправка пользовательских событий

Помимо прослушивания событий браузера, вы также можете их отправлять. Это чрезвычайно полезно для связи с другими компонентами Alpine или запуска событий в инструментах за пределами Alpine.

Для этого Alpine предоставляет магический хелпер под названием $dispatch:

<div x-data @foo="alert('Событие foo было отправлено')">
  <button @click="$dispatch('foo')">Отправить</button>
</div>

Отправить

Как вы можете видеть, при нажатии кнопки Alpine отправит событие браузера под названием «foo», а наш слушатель @foo в <div> отловит его и отреагирует.

Прослушивание событий в window

Из-за характера событий в браузере иногда полезно прослушивать события в объекте window верхнего уровня.

Это позволяет вам полностью взаимодействовать между компонентами, как показано в следующем примере:

<div x-data>
  <button @click="$dispatch('foo')">Отправить</button>
</div>

<div x-data @foo.window="alert('Событие foo было отправлено')" hidden></div>

Отправить

В приведённом выше примере, если мы нажмем кнопку в первом компоненте, Alpine отправит событие «foo». Из-за того, как события работают в браузере, они «проходят» через родительские элементы вплоть до window верхнего уровня.

Теперь, поскольку в нашем втором компоненте мы прослушиваем «foo» (с .window), при нажатии кнопки этот слушатель подхватит его и зарегистрирует сообщение «Событие foo было отправлено».

Подробнее об x-on

Проверка знаний

1. Какой из указанных вариантов синтаксиса неверен?

   1. <div x-data>
        <button x-on:click="alert('нажато')">Нажми меня</button>
      </div>

   2. <div x-data>
        <button onClick="alert('нажато')">Нажми меня</button>
      </div>

   3. <div x-data>
        <button @click="alert('нажато')">Нажми меня</button>
      </div>

   Отправить

2. Как получить доступ к объекту события?

   1. <button @click="$target.remove()">Удалить меня</button>

   2. <button @click="$object.remove()">Удалить меня</button>

   3. <button @click="$event.target.remove()">Удалить меня</button>

   Отправить

3. Как прослушивать пользовательские события?

   1. <div x-data @foo="alert('Событие foo было отправлено')">
       <button @click="$dispatch('foo')">Отправить</button>
      </div>

   2. <div x-data @foo="alert('Событие foo было отправлено')">
       <button @click="$customEvent('foo')">Отправить</button>
      </div>

   3. <div x-data @foo="alert('Событие foo было отправлено')">
       <button @click="$event('foo')">Отправить</button>
      </div>

   Отправить