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:
Inline handlery: Inline JavaScript, který je spuštěn po vyvolání události (stejně jako nativní atribut
onclick
).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)
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)
}
}
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
.
Viz také: Typování Event handlerů
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:
js
function 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)
}
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.
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í.