Penanganan Event

Memantau Event

Kita dapat menggunakan v-on direktif untuk memantau event DOM dan menjalankan beberapa JavaScript ketika dipicu.

Contoh:

<div id="contoh-1">
  <button v-on:click="counter += 1">Tambah 1</button>
  <p>Tombol diatas telah ditekan {{ counter }} kali.</p>
</div>

var contoh1 = new Vue({
  el: '#contoh-1',
  data: {
    counter: 0
  }
})

Hasil:

Metode Event Handler

Bagaimanapun Logika untuk banyak event handler akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam atribut v-on tidaklah tepat. Itulah mengapa v-on dapat juga menerima nama metode yang ingin dijalankan.

Contoh:

<div id="contoh-2">
  <!-- `greet` adalah nama metode yang telah didefinisikan di bawah -->
  <button v-on:click="greet">Greet</button>
</div>

var contoh2 = new Vue({
  el: '#contoh-2',
  data: {
    name: 'Vue.js'
  },
  // mendefinisikan metode dibawah `methods` object
  methods: {
    greet: function (event) {
      // `this` di dalam metode merujuk ke Vue instance
      alert('Hello ' + this.name + '!')
      // `event` adalah bawaan DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// Anda juga dapat memanggil metode dalam JavaScript
contoh2.greet() // => 'Hello Vue.js!'

Hasil:

Metode dalam Handler Sebaris

Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah JavaScript statemen sebaris:

<div id="contoh-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#contoh-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Hasil:

Terkadang kita juga butuh akses ke event DOM bawaan dalam statemen handler sebaris. Anda dapat menempatkan variabel khusus $event ke dalam sebuah metode:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // sekarang kita memiliki akses ke event bawaan
    if (event) event.preventDefault()
    alert(message)
  }
}

Pengubah (Modifier) Event

Merupakan kebutuhan umum memanggil event.preventDefault() atau event.stopPropagation() di dalam event handler. Meskipun kita dapat melakukannya dengan mudah di dalam metode, akan lebih baik jika metode murni hanya berisi logika data dari pada menangani rincian event DOM.

Untuk menyelesaikan masalah ini, Vue menyediakan pengubah event untuk v-on. Penggunaan pengubah tersebut ialah dengan tambahan direktif diawali dengan simbol titik.

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

<!-- perambatan event klik akan dihentikan -->
<a v-on:click.stop="doThis"></a>

<!-- event submit tidak lagi memuat ulang halaman -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- pengubah dapat ditulis berantai -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- sebuah pengubah -->
<form v-on:submit.prevent></form>

<!-- gunakan mode capture saat menambahkan event listener -->
<!-- sebagai contoh, sebuah event menargetkan sebuah inner elemen ditangani disini sebelum ditangani oleh elemen tesebut -->
<div v-on:click.capture="doThis">...</div>

<!-- handler hanya dipicu jiks event.target adalah elemen itu sendiri -->
<!-- sebagai contoh, tidak dari elemen anak -->
<div v-on:click.self="doThat">...</div>

Urutan penting saat menggunakan pengubah karena kode yang bersangkutan dibentuk dengan urutan yang sama. Maka dari itu, menggunakan v-on:click.prevent.self akan mencegah semua klik sementara v-on:click.self.prevent hanya akan mencegah klik pada elemen itu sendiri.

Baru pada versi 2.1.4+

<!-- click event akan dipicu paling banyak sekali -->
<a v-on:click.once="doThis"></a>

Tidak seperti pengubah lainnya, yang khusus untuk event DOM bawaan, .once modifier juga dapat digunakan pada komponen event. Jika anda belum membaca tentang komponen, jangan khawatir tentang ini untuk sekarang.

Baru pada versi 2.3.0+

Vue juga menawarkan pengubah .passive, sesuai dengan opsi addEventListener‘s passive.

<!-- perilaku bawaan event scroll (scrolling) akan terjadi -->
<!-- segera, dari pada menunggu `onScroll` selesai -->
<!-- jika memuat `event.preventDefault()` -->
<div v-on:scroll.passive="onScroll">...</div>

pengubah .passive secara khusus berguna meningkatkan performa pada perangkat mobile.

Jangan menggunakan .passive dan .prevent bersamaan, karena .prevent akan diabaikan dan peramban Anda kemungkinan akan menampilkan peringatan. Ingat, .passive berkomunikasi dengan peramban yang mana anda tidak ingin mencegah perilaku bawaan event.

Pengubah (Modifier) Key

Saat memantau keyboard event, kita sering membutuhkan untuk memeriksa key tertentu. Vue mengizinkan penambahan pengubah key untuk v-on saat memantau key events:

<!-- hanya memanggil `vm.submit()` saat `key` adalah `Enter` -->
<input v-on:keyup.enter="submit">

Anda dapat secara langsung menggunakan nama key yang valid via KeyboardEvent.key sebagai pengubah dengan mengubahnya ke kebab-case.

<input v-on:keyup.page-down="onPageDown">

Pada contoh di atas, handler hanya akan dipanggil jika $event.key sama dengan 'PageDown'.

Key Code

Penggunaan keyCode event telah usang dan mungkin tidak didukung pada peramban-peramban baru.

Menggunakan atribut keyCode juga diperbolehkan:

<input v-on:keyup.13="submit">

Vue menyediakan alias untuk key code umum jika dibutuhkan untuk mendukung peramban lama:

• .enter
• .tab
• .delete (menangkap baik “Delete” dan “Backspace” key)
• .esc
• .space
• .up
• .down
• .left
• .right

Beberapa kunci (.esc dan semua tombol arah) memiliki nilai key yang tidak konsisten pada peramban IE9, jadi alias yang telah tersedia di atas lebih disarankan jika Anda butuh dukungan untuk peramban IE9.

Anda juga dapat mendefinisikan pengubah kustom alias key melalui global config.keyCodes object:

// Mengaktifkan `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

Sistem Pengubah (Modifier) Key

Baru pada versi 2.1.0+

Anda dapat menggunakan pengubah di bawah untuk memicu mouse atau keyboard event listener hanya pada saat pengubah tertentu ditekan:

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

Note: pada keyboard Macintosh, meta adalah command key (⌘). Pada keyboard Windows, meta adalah Windows key (⊞). Pada keyboard Sun Microsystems, meta ditandai dengan solid diamond (◆). Pada keyboard tertentu, khususnya keyboard mesin MIT and Lisp dan penerusnya, seperti the Knight keyboard, space-cadet keyboard, meta diberi label “META”. Pada keyboard Symbolics, meta diberi label “META” atau “Meta”.

Contoh:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

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

Perhatikan bahwa pengubah key berbeda dengan key pada umumnya dan saat digunakan dengan keyup event, key tersebut harus ditekan saat event dijalankan. Dengan kata lain, keyup.ctrl hanya akan dipicu ketika Anda melepas key saat masih menekan ctrl. Hal tersebut tidak akan dipicu jika Anda melepas ctrl key sendiri. Jika Anda tidak ingin perilaku seperti itu, gunakan keyCode untuk ctrl alih-alih: keyup.17.

Pengubah (Modifier) .exact

Baru pada versi 2.5.0+

Pengubah .exact mengizinkan kontrol kombinasi eksak sistem pengubah yang dibutuhkan untuk memicu event.

<!-- baris ini akan mengeksekusi metode bahkan jika tombol Alt atau Shift juga ditekan -->
<button @click.ctrl="onClick">A</button>

<!-- baris ini hanya akan mengeksekusi metode saat tombol Ctrl ditekan tanpa diikuti tombol lain -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- baris ini hanya akan mengeksekusi metode saat tidak menekan sistem modifier keys -->
<button @click.exact="onClick">A</button>

Pengubah (Modifier) Tombol Mouse

Baru pada versi 2.2.0+

• .left
• .right
• .middle

Pengubah ini membatasi handler pada event saat dipicu oleh tombol mouse tertentu.

Mengapa Listener di dalam HTML?

Anda mungkin menyoroti bahwa keseluruhan pendekatan event listening menyalahi aturan lama tentang “separation of concerns”. Kebanyakan meyakini itu - sejak semua fungsi-fungsi dan ekspresi Vue handler terikat secara terbatas pada ViewModel yang mana menangani view yang berhubungan, hal itu tidak akan mempersulit pemeliharaan. Faktanya, terdapat beberapa keuntungan penggunaan v-on:

1. Mempermudah penempatan implementasi fungsi handler diantara baris kode JS dengan menelusuri sekilas HTML templat.

2. Sejak Anda tidak membutuhkan peletakkan event listeners dalam JS secara manual, baris kode ViewModel menjadi berisi murni logika dan bebas DOM. Ini memudahkan dalam pengujian.

3. Saat ViewModel dihapus, semua event listener secara otomatis dihapus. Anda tidak perlu khawatir tentang membersihkan event yang ada.