Obsluha událostí ​

Naslouchání událostem ​

Pro naslouchání DOM událostem (events) můžeme použít direktivu v-on, která se typicky zapisuje zkráceně symbolem @. Poté, co jsou události vyvolány, můžeme skrz ni spustit nějaký JavaScript kód. Použití bude v-on:click="handler" nebo zkráceným zápisem @click="handler".

Handler může mít jednu z následujících hodnot:

1. Inline handlery: Inline JavaScript, který je spuštěn po vyvolání události (stejně jako nativní atribut onclick).

2. Method handlery: Název proměnné nebo cesta, která ukazuje na funkci definovanou v rámci komponenty.

Inline handlery ​

Inline handlery se typicky používají v jednoduchých případech, například:

const pocet = ref(0)

data() {  return {  pocet: 0  } }

<button @click="pocet++">Přidat 1</button> <p>Počet je: {{ pocet }}</p>

Method handlery ​

Logika mnoha event handlerů však bude složitější a pravděpodobně nebude jen s inline handlery proveditelná. To je důvod, proč může v-on přijmout i název funkce, kterou chcete v rámci komponenty volat, nebo cestu k ní.

Například:

const jmeno = ref('Vue.js')  function greet(event) {  alert(`Ahoj, ${jmeno.value}!`)  // `event` je nativní událost DOM  if (event) {  alert(event.target.tagName)  } }

data() {  return {  jmeno: 'Vue.js'  } }, methods: {  greet(event) {  // `this` uvnitř funkce odkazuje na právě aktivní instanci  alert(`Ahoj, ${this.jmeno}!`)  // `event` je nativní událost DOM  if (event) {  alert(event.target.tagName)  }  } }

<!-- `greet` je název funkce definované výše --> <button @click="greet">Pozdravit</button>

Method handler automaticky přijímá objekt nativní události DOM, který ji vyvolá – ve výše uvedeném příkladu jsme schopni přistupovat k elementu odesílajícímu událost přes event.target.

Detekce Method vs. Inline ​

Kompilátor šablon detekuje method handlery kontrolou, zda je hodnota v-on platným JavaScript identifikátorem nebo přístupovou cestou k vlastnosti. Například foo, foo.bar a foo['bar'] jsou považovány za method handlery, zatímco foo() a count++ jsou vyhodnoceny jako inline handlery.

Volání funkcí v Inline handleru ​

Namísto bindingu přímo na název funkce můžeme tyto funkce také volat přímo v inline handleru. To nám umožňuje předat funkci vlastní parametry namísto nativní události:

function say(message) {  alert(message) }

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

<button @click="say('ahoj')">Pozdrav</button> <button @click="say('nashledanou')">Rozluč se</button>

Přístup k parametru nativní události in Inline handleru ​

Někdy potřebujeme přistupovat k původní události DOM i přímo v inline handleru. Můžete jej předat do funkce pomocí speciální proměnné $event nebo použít inline arrow funkci:

<!-- použití speciální proměnné $event --> <button @click="warn('Formulář ještě nelze odeslat', $event)">  Odeslat </button>  <!-- použití inline arrow funkce --> <button @click="(event) => warn('Formulář ještě nelze odeslat', event)">  Odeslat </button>

function warn(message, event) {  // nyní máme přístup k nativnému eventu  if (event) {  event.preventDefault()  }  alert(message) }

methods: {  warn(message, event) {  // nyní máme přístup k nativnému eventu  if (event) {  event.preventDefault()  }  alert(message)  } }

Modifikátory události ​

Uvnitř event handlerů je vcelku běžné volat event.preventDefault() nebo event.stopPropagation(). Ačkoli to můžeme snadno udělat uvnitř funkcí, bylo by lepší, kdyby funkce mohly být čistě o datové logice, než aby se musely zabývat detaily událostí DOM.

K vyřešení tohoto požadavku poskytuje Vue pro v-on modifikátory události.
Jde o direktivní postfixy označené tečkou.

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

<!-- šíření události kliknutí bude zastaveno --> <a @click.stop="doThis"></a>  <!-- událost odeslání nebude znovu načítat stránku --> <form @submit.prevent="onSubmit"></form>  <!-- modifikátory lze řetězit --> <a @click.stop.prevent="doThat"></a>  <!-- nebo napsat pouze samotný modifikátor --> <form @submit.prevent></form>  <!-- vyvolat handler pouze tehdy, pokud je event.target samotný element --> <!-- t.j. např. ne z potomka --> <div @click.self="doThat">...</div>

Modifikátory .capture, .once a .passive představují možnosti nativní funkce addEventListener:

<!-- při přidávání event listeneru použít capture mód --> <!-- tj. událost zacílená na vnitřní element je dříve --> <!-- zpracována zde, než je zpracována uvnitř --> <div @click.capture="doThis">...</div>  <!-- událost kliknutí bude vyvolána nejvýš jednou --> <a @click.once="doThis"></a>  <!-- výchozí chování události scroll (scrolling) nastane --> <!-- okamžitě místo čekání na dokončení `onScroll` --> <!-- v případě, že obsahuje `event.preventDefault()` --> <div @scroll.passive="onScroll">...</div>

Modifikátor .passive je typicky používán s dotykovými event listenery pro zlepšení výkonu na mobilních zařízeních.

Modifikátory kláves ​

Když nasloucháme událostem klávesnice, často potřebujeme zkontrolovat konkrétní klávesy. Vue proto umožňuje při poslechu událostí klávesnice přidávat pro v-on nebo @ modifikátory kláves:

<!-- zavolat `submit` pouze pokud byl stisknut `Enter` --> <input @keyup.enter="submit" />

Jakékoli platné názvy kláves vystavené prostřednictvím KeyboardEvent.key můžete přímo použít jako modifikátory převedením na kebab-case.

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

Ve výše uvedeném příkladu je handler zavolán pouze, pokud se $event.key rovná 'PageDown'.

Aliasy kláves ​

Vue poskytuje aliasy pro nejčastěji používané klávesy:

• .enter
• .tab
• .delete (zachytí jak „Delete“, tak „Backspace“)
• .esc
• .space
• .up
• .down
• .left
• .right

Systémové klávesy ​

Následující modifikátory můžete použít k vyvolání event listenerů naslouchajících myši nebo klávesnici pouze, pokud je stisknuta odpovídající modifikační klávesa:

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

Například:

<!-- Alt + Enter --> <input @keyup.alt.enter="clear" />  <!-- Ctrl + Click --> <div @click.ctrl="foo">Udělej něco</div>

Modifikátor .exact ​

Modifikátor .exact umožňuje ovládat přesnou kombinaci systémových modifikátorů potřebných k vyvolání události.

<!-- bude aktivováno i když je zároveň stisknuto Alt nebo Shift --> <button @click.ctrl="onClick">A</button>  <!-- bude aktivováno pouze když je jen samotné Ctrl --> <button @click.ctrl.exact="onCtrlClick">A</button>  <!-- bude aktivováno pouze když není stisknut žádný systémový modifikátor --> <button @click.exact="onClick">A</button>

Modifikátory tlačítek myši ​

• .left
• .right
• .middle

Tyto modifikátory omezují vyvolání event handlerů spouštěných určitým tlačítkem myši.

Pozor však, že ačkoliv jsou názvy modifikátorů .left, .right a .middle odvozeny od typického rozložení myši pro praváky, ve skutečnosti reprezentují triggery událostí main, secondary a auxiliary a nikoliv samotná tlačítka. Proto pro levorukou myš sice může být hlavní tlačítko fyzicky napravo, ale stále bude vyvolávat modifikátor .left. Trackpad může spustit .left poklepáním jednoho, .right dvou a .middle tří prstů. Stejně tak jiná zařízení a zdroje událostí, které generují události myši, mohou mít režimy spouštění, které se pojmů „left“ a „right“ vůbec netýkají.