Skip to content

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:

js
const pocet = ref(0)
js
data() {
  return {
    pocet: 0
  }
}
template
<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:

js
const jmeno = ref('Vue.js')

function greet(event) {
  alert(`Ahoj, ${jmeno.value}!`)
  // `event` je nativní událost DOM
  if (event) {
    alert(event.target.tagName)
  }
}
js
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)
    }
  }
}
template
<!-- `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()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:

js
function say(message) {
  alert(message)
}
js
methods: {
  say(message) {
    alert(message)
  }
}
template
<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:

template
<!-- 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>
js
function warn(message, event) {
  // nyní máme přístup k nativnému eventu
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
js
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
template
<!-- šíř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>

TIP

Při použití modifikátorů záleží na pořadí, protože příslušný kód je ve stejném pořadí generován. Proto použití @click.prevent.self zabrání výchozí akci kliknutí na element samotný i jeho potomky, zatímco @click.self.prevent zabrání pouze výchozí akci kliknutí na samotný element.

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

template
<!-- 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.

TIP

Nepoužívejte .passive a .prevent dohromady, protože .passive již prohlížeči naznačuje, že nemáte v úmyslu bránit výchozímu chování události. Pokud tak přesto učiníte, pravděpodobně se vám zobrazí varování z prohlížeče.

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:

template
<!-- 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.

template
<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

Poznámka

Na klávesnicích Macintosh je meta klávesa příkazu (⌘). Na klávesnicích Windows je meta klávesa Windows (⊞). Na klávesnicích Sun Microsystems je meta označena jako plný kosočtverec (◆). Na určitých klávesnicích, konkrétně na strojových klávesnicích MIT a Lisp a jejich nástupcích jako je Knight keyboard a space-cadet keyboard, je meta označena jako „META“. Na klávesnicích Symbolics je meta označena „META“ nebo „Meta“.

Například:

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

<!-- Ctrl + Click -->
<div @click.ctrl="foo">Udělej něco</div>

TIP

Všimněte si, že modifikační klávesy se od běžných kláves liší a při použití s událostmi keyup je nutné je stisknout, když je událost emitována. Jinými slovy, keyup.ctrl se spustí pouze tehdy, když uvolníte klávesu a zároveň držíte ctrl. Nespustí se, pokud pouze uvolníte klávesu ctrl.

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.

template
<!-- 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.

Obsluha událostí has loaded