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 natívní 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.