Event Handling #

Auf Events horchen #

Die v-on-Direktive wird genutzt, um beim Auslösen von DOM-Events JavaScript-Code auszuführen. Sie wird meist in der Kurzform @ benutzt. Die Direktive wird in der Form v-on:click="handler" oder in der Kurzform, @click="handler" genutzt.

Der Inhalt von handler kann wie folgt definiert werden:

1. Inline Handlers: Inline JavaScript, welches ausgeführt wird wenn der Event ausgelöst wird (analog zum nativen onclick-Attribut).

2. Method Handlers: Der Name einer Property oder ein Verweis auf eine Methode, die in der Komponente definiert ist.

Inline Handlers #

Inline Handler werden in der Regel für sehr einfache Anwendungsfälle genutzt, z.B.:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

Method Handlers #

Für die meisten Eventhandler ist die Logik in der Realität komplexer als in den bisherigen Beispielen. Die Nutzung eines Inline Handlers ist in diesen komplexeren Fällen eher unhandlich. Deshalb kann auch der Name oder ein Verweis auf eine Methode innerhalb der Komponente an v-on übergeben werden.

Ein Beispiel:

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` ist das native DOM Event
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` zeigt innerhalb einer Methode auf die aktuell aktive Instanz
    alert(`Hello ${this.name}!`)
    // `event` ist das native DOM Event
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` ist der Name der oben definierten Methode  -->
<button @click="greet">Greet</button>

Ein Method Handler erhält automatisch das native DOM Event Objekt, von dem er ausgelöst wurde - im Beispiel oben können wir auf das Element, von dem das Event ausgelöst wurde, über event.target.tagName zugreifen.

Automatische Identifizierung bei Method und Inline Handlern #

Der Template-Compiler erkennt, um welchen Typ es sich bei einem Handler handelt, indem der Inhalt der v-on-Direktive überprüft wird. ist dessen Wert ein gültiger JavaScript Identifier oder ein Verweis auf eine Property, wird ein Method Handler erkannt. Zum Beispiel werden foo, foo.bar und foo['bar'] als Method Handler erkannt, foo() und count++ werden als Inline Handler behandelt.

Aufrufen von Methoden in Inline Handlern #

Anstatt das Event direkt an eine Methode zu binden, können aus einem Inline Handler heraus auch Methoden aufgerufen werden. So können der Methode auch beliebige Parameter übergeben werden und nicht nur das native Eventobjekt:

function say(message) {
  alert(message)
}

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

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

In Inline Handlern auf Eventparameter zugreifen #

Manchmal wollen wir innerhalb eines Inline Handler auf die Attribute des auslösenden DOM-Events zugreifen. Die ist über die spezielle Variable $event möglich, oder akternativ über eine Inline-Funktion:

<!-- using $event special variable -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- using inline arrow function -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // jetzt haben wir Zugriff auf das native Event
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // jetzt haben wir Zugriff auf das native Event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Event Modifier #

Eine sehr übliche Anforderung ist das AUfrufen von Funktionen wie event.preventDefault() oder event.stopPropagation() innerhalb eines Eventhandlers. Obwohl dieser Code problemlos auch innerhalb andere Methoden aufgerufen werden kann, macht es den Code lesbarer und wartbarer, wenn die Methode nur die tatsächliche Anwendungslogik implmentiert und diese nicht mit der Behandlung von DOM Events vermischt wird.

Zur Lösung dieses Problems stellt Vue Event Modifier für die v-on-Direktive bereit. Modifiers werden in der Postfix-Notation durch einen Punkt getrennt an die Direktive ergänzt.

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

<!-- Die Weitergabe des Click-Events wird verhindert -->
<a @click.stop="doThis"></a>

<!-- Das Submit-Event wird die Seite nicht neu laden -->
<form @submit.prevent="onSubmit"></form>

<!-- Modifier können verkettet genutzt werden -->
<a @click.stop.prevent="doThat"></a>

<!-- nur der Modifier ohne weiteren Handler -->
<form @submit.prevent></form>

<!-- löse den Handler nur aus, wenn event.target das auslösende Element selbst ist -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>

Die Modifier .capture, .once und .passive spiegeln die Optionen der nativen addEventListener Methode wieder:

<!-- nutze den capture-Modus beim Hinzufügen des Eventlisteners -->
<!-- z.B. wird ein Event eines Unterelementes dort behandelt, bevor der Handler des Elementes selbst ausgelöst wird -->
<div @click.capture="doThis">...</div>

<!-- Das Click-Event wird maximal einmal ausgelöst -->
<a @click.once="doThis"></a>

<!-- Das Standardverhalten des Scroll-Event (scrolling) wird direkt ausgeführt. Es wird nicht auf die Fertigstellung von `onScroll` gewartet falls es `event.preventDefault()` enthält                -->
<div @scroll.passive="onScroll">...</div>

Der Modifier .passive wird üblicherweise bei Touch-Eventlistenern verwendet, um die Performance auf Mobilgeräten zu verbessern.

Key Modifier #

Beim Horchen auf Tastaturevents müssen wir oft die Benutzung bestimmter Tasten überprüfen. Vue erlaubt das Anfügen von Key Modifiern an v-on oder @ zum Reagieren auf Tastaturevents:

<!-- rufe `submit` nur auf, wenn der `key` `Enter` ist -->
<input @keyup.enter="submit" />

Es können beliebige gültige Tasten als Modifier genutzt werden, die über KeyboardEvent.key verfügbar sind. Dazu müssen sie in Kebab-Case umgewandelt werden.

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

Im Beispiel wird der Handler nur aufgerufen, wenn $event.key dem Wert 'PageDown' entspricht.

Key Aliase #

Vue stellt Aliase für häufig genutzte Tasten bereit:

• .enter
• .tab
• .delete (reagiert sowohl auf "Delete" als auch auf "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

System Modifier Keys #

Die folgenden Modifier können genutzt werden, um nur auf Maus- oder Tastaturevents zu reagieren, wenn der entsprechende Modifier Key gedrückt ist:

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

Beispiele:

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

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact Modifier #

Der Modifier .exact erlaubt es, genaue Kombinationen von System Modifiern abzufragen, um ein Event auszulösen.

<!-- hier wird das Event auch ausgelöst, wenn Alt oder Shift auch gedürckt sind -->
<button @click.ctrl="onClick">A</button>

<!-- hier wird das Event nur ausgelöst, wenn nur Ctrl und keine andere Taste gedrückt werden -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- hier wird das Event nur ausgelöst, wenn keine System Keys gedrückt sind -->
<button @click.exact="onClick">A</button>

Maustasten Modifier #

• .left
• .right
• .middle

Diese Modifier begrenzen den Handler auf Events, die von der angegebenen Maustaste ausgelöst werden.