Obsługa Zdarzeń #

Nasłuchiwanie zdarzeń #

Możemy użyć dyrektywy v-on, którą zazwyczaj skracamy do symbolu @, aby nasłuchiwać zdarzeń DOM i uruchamiać JavaScript, gdy zostaną one wywołane. Używa się v-on:click="handler" lub skrótu, @click="handler".

Sposóby użycia funkcji obsługi zdarzeń:

1. Inline handlers: Kod JavaScript wykonywany w linii, gdy zdarzenie zostanie wywołane (podobny do natywnego atrybutu onclick).

2. Method handlers: Nazwa właściwości lub ścieżka, która wskazuje na metodę zdefiniowaną w komponencie.

Funkcje obsługi inline #

Funkcji obsługi zdarzeń inline używa się zazwyczaj w prostych przypadkach, na przykład:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

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

Funkcja obsługi zdarzeń na bazie metody. #

Logika wielu mechanizmów obsługi zdarzeń będzie jednak bardziej złożona i prawdopodobnie nie będzie możliwa do zrealizowania za pomocą funkcji inline. Dlatego v-on może również przyjąć nazwę lub ścieżkę do metody komponentu, którą chcemy wywołać.

Dla przykładu:

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` jest zdarzeniem DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` wewnątrz metod wskazuje na bieżącą aktywną instancję
    alert(`Hello ${this.name}!`)
// `event` jest zdarzeniem DOM
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` jest nazwą metody zdefiniowanej powyżej -->
<button @click="greet">Greet</button>

Metoda obsługi automatycznie otrzymuje natywny obiekt zdarzenia DOM, który ją wywołuje - w powyższym przykładzie możemy uzyskać dostęp do elementu wysyłającego zdarzenie poprzez event.target.tagName.

Wykrywanie - Method czy Inline #

Kompilator szablonów wykrywa metodę obsługi zdarzeń przez sprawdzenie, czy ciąg znaków v-on jest poprawnym kodem JavaScript lub ścieżką dostępu do właściwości. Na przykład, foo, foo.bar i foo['bar'] są traktowane jako funkcje obsługi przez metodę, podczas gdy foo() i count++ są traktowane jako funkcje obsługi inline.

Wywoływanie metod w obsłudze typu inline #

Zamiast wiązać się bezpośrednio z nazwą metody, możemy również wywoływać metody w obsłudze typu inline. Dzięki temu możemy przekazać metodzie niestandardowe argumenty zamiast natywnego zdarzenia:

function say(message) {
  alert(message)
}

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

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

Dostęp do argumentu zdarzenia w inline handlerach #

Czasami potrzebujemy także dostępu do oryginalnego zdarzenia DOM w inline handlerze. Możesz przekazać je do metody, używając specjalnej zmiennej $event, lub użyć funkcji strzałki inline:

<!-- użycie zmiennej specjalnej $event -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- użycie funkcji strzałkowej w obsłudze typu inline -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // teraz mamy dostęp do zdarzenia natywnego
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
  // teraz mamy dostęp do zdarzenia natywnego
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Modyfikatory zdarzeń #

Bardzo często zachodzi potrzeba wywołania event.preventDefault() lub event.stopPropagation() wewnątrz obsługi zdarzeń. Chociaż możemy to łatwo zrobić wewnątrz metod, byłoby lepiej, gdyby metody mogły zajmować się wyłącznie logiką danych, a nie szczegółami zdarzeń DOM.

Aby rozwiązać ten problem, Vue dostarcza modyfikatory zdarzeń dla v-on. Przypomnijmy, że modyfikatory to postfiksy instrukcji oznaczane kropką.

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

<!-- kontynuacja zdarzenia kliknięcia zostanie zatrzymana -->
<a @click.stop="doThis"></a>

<!-- zdarzenie submit nie będzie już powodować przeładowania strony -->
<form @submit.prevent="onSubmit"></form>

<!-- modyfikatory mogą być łączone razem -->
<a @click.stop.prevent="doThat"></a>

<!-- tylko modyfikator -->
<form @submit.prevent></form>

<!-- wywołaj handler tylko wtedy, gdy event.target jest samym elementem -->
<!-- tzn. nie z elementu potomnego -->.
<div @click.self="doThat">...</div>

Modyfikatory .capture, .once i .passive odzwierciedlają opcje natywnej metody addEventListener method:

<!-- użyj trybu przechwytywania podczas dodawania funkcji obsługi zdarzeń -->.
<!-- tzn. zdarzenie skierowane do elementu wewnętrznego jest obsługiwane tutaj, zanim zostanie obsłużone przez ten element -->.
<div @click.capture="doThis">...</div>

<!-- zdarzenie kliknięcia zostanie wywołane co najwyżej raz -->
<a @click.once="doThis"></a>

<!-- domyślne zachowanie zdarzenia przewijania (przewijanie) będzie miało miejsce -->
<!-- natychmiast, zamiast czekać na zakończenie `onScroll` -->.
<!-- w przypadku, gdy zawiera ono `event.preventDefault()` -->.
<div @scroll.passive="onScroll">...</div>

Modyfikator .passive jest zwykle używany z nasłuchiwaniem zdarzeń dotykowych w celu poprawy wydajności na urządzeniach przenośnych.

Modyfikatory klawiszy #

Podczas nasłuchiwania zdarzeń na klawiaturze często musimy sprawdzać, czy nie występują określone klawisze. Vue umożliwia dodawanie modyfikatorów klawiszy dla v-on lub @ podczas nasłuchiwania zdarzeń klawiszowych:

<!-- wywołaj `vm.submit()` tylko wtedy, gdy `key` jest `Enter` -->.
<input @keyup.enter="submit" />

Jako modyfikatorów można bezpośrednio używać dowolnych poprawnych nazw klawiszy dostępnych przez KeyboardEvent.key, konwertując je na kebab-case.

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

W powyższym przykładzie, funkcja obsługi zdarzenia zostanie wywołana tylko wtedy, gdy $event.key jest równy 'PageDown'.

Aliasy klawiszy #

Vue udostępnia aliasy dla najczęściej używanych klawiszy:

• .enter
• .tab
• .delete (przechwytuje zarówno klawisze "Delete", jak i "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

Klawisze modyfikatorów systemu #

Można użyć następujących modyfikatorów, aby wywołać nasłuchiwanie zdarzeń myszy lub klawiatury tylko wtedy, gdy zostanie naciśnięty odpowiedni klawisz modyfikatora:

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

Na przykład:

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

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

Modyfikator `.exact #

Modyfikator .exact pozwala kontrolować dokładną kombinację modyfikatorów systemowych potrzebnych do wywołania zdarzenia.

<!-- to zadziała nawet jeśli wciśnięty jest również Alt lub Shift -->
<button @click.ctrl="onClick">A</button>

<!-- to zadziała tylko wtedy, gdy zostanie naciśnięty Ctrl i żadne inne klawisze -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- to zadziała tylko wtedy, gdy nie zostaną naciśnięte żadne modyfikatory systemowe -->
<button @click.exact="onClick">A</button>

Modyfikatory przycisków myszy #

• .left
• .right
• .middle

Te modyfikatory ograniczają obsługę do zdarzeń wywoływanych przez określony przycisk myszy.