Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке модифікатори подій?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Модифікатори подій** - це спеціальні суфікси (наприклад, `.stop`, `.prevent`, `.once`), які додаються до директиви `v-on` і дозволяють змінювати поведінку події без написання додаткового JavaScript-коду. **Ключове:** вони автоматично виконують часто використовувані дії на кшталт `event.stopPropagation()` чи `event.preventDefault()`, роблячи шаблон чистішим.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Модифікатори подій** - це спеціальні суфікси (наприклад: `.stop`, `.prevent`, `.once`), які додаються до директиви `v-on` і дозволяють *змінювати поведінку події* без написання додаткового JavaScript-коду. Простіше кажучи: > **Модифікатори подій - це спосіб вказати Vue, як саме потрібно обробляти подію, виконуючи часто використовувані** `event.*` **дії автоматично.** Вони зроблені для зручності, чистоти шаблону і зменшення кількості шаблонного коду. --- ## Як виглядають модифікатори подій? ```html <button @click.stop="doSomething"></button> <button @submit.prevent="onSubmit"></button> <input @keyup.enter="search"> ``` --- ## Навіщо потрібні модифікатори? Вони дозволяють: - зупинити спливання (`stopPropagation`) - скасувати стандартну поведінку (`preventDefault`) - зробити обробник одноразовим - слухати події тільки на самому елементі - працювати з клавішами - покращити продуктивність (passive) І все це без написання зайвого коду: ```html <button @click="event.stopPropagation(); event.preventDefault(); doStuff()">...</button> ``` стає: ```html <button @click.stop.prevent="doStuff"> ``` --- ## Основні модифікатори подій ### 1. `.stop` Зупиняє спливання події. ```html @click.stop ``` Еквівалент: ```js event.stopPropagation() ``` --- ### 2. `.prevent` Скасовує стандартну поведінку браузера. ```html @submit.prevent ``` Еквівалент: ```js event.preventDefault() ``` --- ### 3. `.once` Обробник спрацьовує тільки один раз. ```html @click.once ``` Після першого виклику Vue сам видалить слухача. --- ### 4. `.self` Спрацьовує тільки якщо подія прийшла **від самого елемента**, а не від дочірніх. ```html @click.self ``` --- ### 5. `.capture` Слухає подію на фазі **capture** (перед спливанням). ```html @click.capture ``` --- ### 6. `.passive` Створює passive-listener, корисно для scroll-обробників. ```html @scroll.passive ``` Підвищує продуктивність. --- ## Модифікатори клавіш (key modifiers) Застосовуються для `keyup` / `keydown`: ```html @keyup.enter @keyup.esc @keyup.space @keyup.up @keyup.ctrl.enter ``` Це теж вважається **модифікаторами подій**. --- ## Комбінації модифікаторів Можна комбінувати: ```html @click.stop.prevent.once="save" ``` Порядок має значення: Vue генерує обробник у тому порядку, в якому написані модифікатори. --- ## Де не можна використовувати модифікатори? - Всередині компонентів для довільних custom events (вони працюють тільки з DOM-подіями та системними подіями)Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.