Обработка событий ​

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

Можно использовать директиву v-on, которую обычно сокращают до символа @, чтобы прослушивать события DOM и запускать JavaScript-код по их наступлению. Используется как v-on:click="methodName" или в сокращённом виде @click="methodName".

Значение обработчика может быть одним из следующих:

1. Обработчик события в виде инлайн-кода: Код JavaScript будет выполняться при срабатывании события (аналогично как в нативном атрибуте onclick).

2. Обработчик события в виде метода: Имя свойства или путь, указывающий на метод, объявленный в компоненте.

Обработчик события в виде инлайн-кода ​

Обычно подобный подход используют лишь в очень простых случаях, например:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Добавить 1</button>
<p>Счётчик: {{ count }}</p>

Обработчик события в виде метода ​

Но чаще всего у многих обработчиков событий логика будет довольно сложной, поэтому оставлять JavaScript-код в значении атрибута v-on бессмысленно. Поэтому v-on также принимает имя метода, который потребуется вызвать.

Например:

const name = ref('Vue.js')

function greet(event) {
  alert(`Привет, ${name.value}!`)
  // `event` — нативное событие DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` в методе указывает на текущий активный экземпляр
    alert(`Привет, ${this.name}!`)
    // `event` — нативное событие DOM
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` — название метода, объявленного в компоненте выше -->
<button @click="greet">Поприветствовать</button>

Метод обработчика автоматически получает аргументом нативное событие DOM, которое его вызвало — например, в примере выше можно получить доступ к элементу, на котором произошло событие, через event.target.

Написание обработчика методом vs. инлайн ​

Компилятор шаблонов определяет методы обработчиков, проверяя является ли строка значения v-on допустимым идентификатором JavaScript или путём для обращения к свойству. Например, foo, foo.bar и foo['bar'] будут рассматриваться как обработчики методов, а foo() и count++ — как инлайн.

Вызов методов в инлайн-обработчиках ​

Вместо привязки непосредственно к имени метода, можно вызывать методы и в инлайн-обработчике. Это позволит передавать в метод вместо нативного события другие аргументы:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('привет')">Скажи привет</button>
<button @click="say('пока')">Скажи пока</button>

Доступ к событию через аргумент в инлайн-обработчиках ​

Иногда может потребоваться получить доступ к оригинальному событию DOM в инлайн-обработчике. Его можно явно передать в метод с помощью специальной переменной $event или воспользоваться стрелочной функцией:

<!-- использование специальной переменной $event -->
<button @click="warn('Форму пока ещё нельзя отправить.', $event)">
  Отправить
</button>

<!-- использование стрелочной функции в инлайн-выражении -->
<button @click="(event) => warn('Форму пока ещё нельзя отправить.', event)">
  Отправить
</button>

function warn(message, event) {
  // теперь есть доступ к нативному событию
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // теперь есть доступ к нативному событию
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

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

Часто необходимо вызвать event.preventDefault() или event.stopPropagation() внутри обработчиков события. Хотя это и легко можно делать внутри методов, но лучше когда методы содержат в себе только логику и не имеют дела с деталями реализации событий DOM.

Vue для решения этой задачи предоставляет модификаторы событий для v-on. Вспомните, что модификаторы — это постфиксы директивы, отделяемые точкой:

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- всплытие события click будет остановлено -->
<a @click.stop="doThis"></a>

<!-- событие submit перестанет перезагружать страницу -->
<form @submit.prevent="onSubmit"></form>

<!-- модификаторы можно объединять в цепочки -->
<a @click.stop.prevent="doThat"></a>

<!-- можно использовать без указания обработчиков -->
<form @submit.prevent></form>

<!-- вызов обработчика только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div @click.self="doThat">...</div>

Модификаторы .capture, .once и .passive зеркально отражают действия опций нативного метода addEventListener:

<!-- можно отслеживать события в режиме capture,     -->
<!-- т.е. событие, нацеленное на внутренний элемент, --> 
<!-- обработается здесь до обработки этим элементом  -->
<div @click.capture="doThis">...</div>

<!-- обработчик click будет вызван максимум 1 раз -->
<a @click.once="doThis"></a>

<!-- по умолчанию событие scroll (при прокрутке) произойдёт -->
<!-- незамедлительно, вместо ожидания окончания `onScroll`  -->
<!-- на случай, если там будет `event.preventDefault()`     -->
<div @scroll.passive="onScroll">...</div>

Модификатор .passive особенно полезен для улучшения производительности на мобильных устройствах.

Модификаторы клавиш ​

При прослушивании событий клавиатуры часто требуется отслеживать конкретные клавиши. Vue позволяет указывать модификаторы клавиш при использовании v-on или @ при прослушивании событий клавиш:

<!-- вызвать `vm.submit()` только если `key` клавиши будет `Enter` -->
<input @keyup.enter="submit" />

Можно использовать любые допустимые имена клавиш напрямую, используя в качестве модификаторов ключи KeyboardEvent.key и указывая их имена в формате kebab-case.

<input @keyup.page-down="onPageDown" />

В этом примере обработчик вызовется только когда $event.key будет 'PageDown'.

Псевдонимы клавиш ​

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

• .enter
• .tab
• .delete (ловит как «Delete», так и «Backspace»)
• .esc
• .space
• .up
• .down
• .left
• .right

Модификаторы системных клавиш ​

Можно использовать следующие модификаторы для прослушивания событий мыши или клавиатуры только при зажатой клавиши-модификатора:

• .ctrl
• .alt
• .shift
• .meta

Например:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Сделать что-нибудь</div>

Модификатор .exact ​

Модификатор .exact позволяет контролировать точную комбинацию модификаторов системных клавиш, необходимых для запуска события.

<!-- сработает, даже если также будут нажаты Alt или Shift -->
<button @click.ctrl="onClick">A</button>

<!-- сработает, только когда нажат Ctrl и не нажаты никакие другие клавиши -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- сработает, только когда не нажаты никакие системные модификаторы -->
<button @click.exact="onClick">A</button>

Модификаторы кнопок мыши ​

• .left
• .right
• .middle

Эти модификаторы ограничивают обработчик события только вызовами по определённой кнопке мыши.

Обратите внимание, однако, что модификаторы .left, .right и .middle основаны на типичной для правой руки раскладке мыши, но на самом деле они представляют собой триггеры событий указывающего устройства "основной", "вторичный" и "вспомогательный" соответственно, а не фактические физические кнопки. Таким образом, для раскладки мыши для левой руки "основная" кнопка может физически быть правой, но будет вызывать обработчик модификатора .left. Или трекпад может вызывать обработчик .left одним касанием пальцем, обработчик .right двумя касаниями и обработчик .middle тремя касаниями. Аналогично, другие устройства и источники событий, генерирующие события "мыши", могут иметь режимы срабатывания, которые вообще не связаны с "левым" и "правым".