Translate event handling page (#58)

* translate event handling page

* fix typo and grammar

* improvement from feedback

* - change word "key" to italic
- change word "browser" to "peramban"

* - change word "statement" to statemen
- change word "browser" to peramban

Author: andriawan

src/v2/guide/events.md

@@ -1,92 +1,92 @@
 ---
-title: Event Handling
+title: Penanganan Event
 type: guide
 order: 9
 ---
 
-## Listening to Events
+## Memantau Event
 
-We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered.
+Kita dapat menggunakan `v-on` direktif untuk memantau event DOM dan menjalankan beberapa JavaScript ketika dipicu.
 
-For example:
+Contoh:
 
 ``` html
-<div id="example-1">
-  <button v-on:click="counter += 1">Add 1</button>
-  <p>The button above has been clicked {{ counter }} times.</p>
+<div id="contoh-1">
+  <button v-on:click="counter += 1">Tambah 1</button>
+  <p>Tombol diatas telah ditekan {{ counter }} kali.</p>
 </div>
 ```
 ``` js
-var example1 = new Vue({
-  el: '#example-1',
+var contoh1 = new Vue({
+  el: '#contoh-1',
   data: {
     counter: 0
   }
 })
 ```
 
-Result:
+Hasil:
 
 {% raw %}
-<div id="example-1" class="demo">
+<div id="contoh-1" class="demo">
   <button v-on:click="counter += 1">Add 1</button>
-  <p>The button above has been clicked {{ counter }} times.</p>
+  <p>Tombol diatas telah ditekan {{ counter }} kali.</p>
 </div>
 <script>
-var example1 = new Vue({
-  el: '#example-1',
+var contoh1 = new Vue({
+  el: '#contoh-1',
   data: {
     counter: 0
   }
 })
 </script>
 {% endraw %}
 
-## Method Event Handlers
+## Metode Event Handler
 
-The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call.
+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.
 
-For example:
+Contoh:
 
 ``` html
-<div id="example-2">
-  <!-- `greet` is the name of a method defined below -->
+<div id="contoh-2">
+  <!-- `greet` adalah nama metode yang telah didefinisikan di bawah -->
   <button v-on:click="greet">Greet</button>
 </div>
 ```
 
 ``` js
-var example2 = new Vue({
-  el: '#example-2',
+var contoh2 = new Vue({
+  el: '#contoh-2',
   data: {
     name: 'Vue.js'
   },
-  // define methods under the `methods` object
+  // mendefinisikan metode dibawah `methods` object
   methods: {
     greet: function (event) {
-      // `this` inside methods points to the Vue instance
+      // `this` di dalam metode merujuk ke Vue instance
       alert('Hello ' + this.name + '!')
-      // `event` is the native DOM event
+      // `event` adalah bawaan DOM event
       if (event) {
         alert(event.target.tagName)
       }
     }
   }
 })
 
-// you can invoke methods in JavaScript too
-example2.greet() // => 'Hello Vue.js!'
+// Anda juga dapat memanggil metode dalam JavaScript
+contoh2.greet() // => 'Hello Vue.js!'
 ```
 
-Result:
+Hasil:
 
 {% raw %}
-<div id="example-2" class="demo">
+<div id="contoh-2" class="demo">
   <button v-on:click="greet">Greet</button>
 </div>
 <script>
-var example2 = new Vue({
-  el: '#example-2',
+var contoh2 = new Vue({
+  el: '#contoh-2',
   data: {
     name: 'Vue.js'
   },
@@ -102,19 +102,19 @@ var example2 = new Vue({
 </script>
 {% endraw %}
 
-## Methods in Inline Handlers
+## Metode dalam Handler Sebaris
 
-Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:
+Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah JavaScript statemen sebaris:
 
 ``` html
-<div id="example-3">
+<div id="contoh-3">
   <button v-on:click="say('hi')">Say hi</button>
   <button v-on:click="say('what')">Say what</button>
 </div>
 ```
 ``` js
 new Vue({
-  el: '#example-3',
+  el: '#contoh-3',
   methods: {
     say: function (message) {
       alert(message)
@@ -123,7 +123,7 @@ new Vue({
 })
 ```
 
-Result:
+Hasil:
 {% raw %}
 <div id="example-3" class="demo">
   <button v-on:click="say('hi')">Say hi</button>
@@ -141,7 +141,7 @@ new Vue({
 </script>
 {% endraw %}
 
-Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
+Terkadang kita juga butuh akses ke event DOM bawaan dalam statemen _handler_ sebaris. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode:
 
 ``` html
 <button v-on:click="warn('Form cannot be submitted yet.', $event)">
@@ -153,18 +153,18 @@ Sometimes we also need to access the original DOM event in an inline statement h
 // ...
 methods: {
   warn: function (message, event) {
-    // now we have access to the native event
+    // sekarang kita memiliki akses ke event bawaan
     if (event) event.preventDefault()
     alert(message)
   }
 }
 ```
 
-## Event Modifiers
+## Pengubah (Modifier) Event
 
-It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
+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.
 
-To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot.
+Untuk menyelesaikan masalah ini, Vue menyediakan  **pengubah event ** untuk `v-on`. Penggunaan pengubah tersebut ialah dengan tambahan direktif diawali dengan simbol titik.
 
 - `.stop`
 - `.prevent`
@@ -174,115 +174,115 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 - `.passive`
 
 ``` html
-<!-- the click event's propagation will be stopped -->
+<!-- perambatan event klik akan dihentikan -->
 <a v-on:click.stop="doThis"></a>
 
-<!-- the submit event will no longer reload the page -->
+<!-- event submit tidak lagi memuat ulang halaman -->
 <form v-on:submit.prevent="onSubmit"></form>
 
-<!-- modifiers can be chained -->
+<!-- pengubah dapat ditulis berantai -->
 <a v-on:click.stop.prevent="doThat"></a>
 
-<!-- just the modifier -->
+<!-- sebuah pengubah -->
 <form v-on:submit.prevent></form>
 
-<!-- use capture mode when adding the event listener -->
-<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
+<!-- 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>
 
-<!-- only trigger handler if event.target is the element itself -->
-<!-- i.e. not from a child element -->
+<!-- handler hanya dipicu jiks event.target adalah elemen itu sendiri -->
+<!-- sebagai contoh, tidak dari elemen anak -->
 <div v-on:click.self="doThat">...</div>
 ```
 
-<p class="tip">Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `v-on:click.prevent.self` will prevent **all clicks** while `v-on:click.self.prevent` will only prevent clicks on the element itself.</p>
+<p class="tip">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.</p>
 
-> New in 2.1.4+
+> Baru pada versi 2.1.4+
 
 ``` html
-<!-- the click event will be triggered at most once -->
+<!-- click event akan dipicu paling banyak sekali -->
 <a v-on:click.once="doThis"></a>
 ```
 
-Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components-custom-events.html). If you haven't read about components yet, don't worry about this for now.
+Tidak seperti pengubah lainnya, yang khusus untuk event DOM bawaan, `.once` modifier juga dapat digunakan pada [komponen event](components-custom-events.html). Jika anda belum membaca tentang komponen, jangan khawatir tentang ini untuk sekarang.
 
-> New in 2.3.0+
+> Baru pada versi 2.3.0+
 
-Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s `passive` option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters).
+Vue juga menawarkan pengubah `.passive`, sesuai dengan [opsi `addEventListener`'s `passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters).
 
 ``` html
-<!-- the scroll event's default behavior (scrolling) will happen -->
-<!-- immediately, instead of waiting for `onScroll` to complete  -->
-<!-- in case it contains `event.preventDefault()`                -->
+<!-- perilaku bawaan event scroll (scrolling) akan terjadi -->
+<!-- segera, dari pada menunggu `onScroll` selesai -->
+<!-- jika memuat `event.preventDefault()` -->
 <div v-on:scroll.passive="onScroll">...</div>
 ```
 
-The `.passive` modifier is especially useful for improving performance on mobile devices.
+pengubah `.passive` secara khusus berguna meningkatkan performa pada perangkat mobile.
 
-<p class="tip">Don't use `.passive` and `.prevent` together, because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive` communicates to the browser that you _don't_ want to prevent the event's default behavior.</p>
+<p class="tip">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.</p>
 
-## Key Modifiers
+## Pengubah (Modifier) Key
 
-When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on` when listening for key events:
+Saat memantau keyboard event, kita sering membutuhkan untuk memeriksa _key_ tertentu. Vue mengizinkan penambahan pengubah _key_ untuk `v-on` saat memantau _key_ events:
 
 ``` html
-<!-- only call `vm.submit()` when the `key` is `Enter` -->
+<!-- hanya memanggil `vm.submit()` saat `key` adalah `Enter` -->
 <input v-on:keyup.enter="submit">
 ```
 
-You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
+Anda dapat secara langsung menggunakan nama _key_ yang valid via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) sebagai pengubah dengan mengubahnya ke kebab-case.
 
 ``` html
 <input v-on:keyup.page-down="onPageDown">
 ```
 
-In the above example, the handler will only be called if `$event.key` is equal to `'PageDown'`.
+Pada contoh di atas, _handler_ hanya akan dipanggil jika `$event.key` sama dengan `'PageDown'`.
 
-### Key Codes
+### Key Code
 
-<p class="tip">The use of `keyCode` events [is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and may not be supported in new browsers.</p>
+<p class="tip">Penggunaan `keyCode` event [telah usang](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) dan mungkin tidak didukung pada peramban-peramban baru.</p>
 
-Using `keyCode` attributes is also permitted:
+Menggunakan atribut `keyCode` juga diperbolehkan:
 
 ``` html
 <input v-on:keyup.13="submit">
 ```
 
-Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:
+Vue menyediakan alias untuk _key_ code umum jika dibutuhkan untuk mendukung peramban lama:
 
 - `.enter`
 - `.tab`
-- `.delete` (captures both "Delete" and "Backspace" keys)
+- `.delete` (menangkap baik "Delete" dan "Backspace" _key_)
 - `.esc`
 - `.space`
 - `.up`
 - `.down`
 - `.left`
 - `.right`
 
-<p class="tip">A few keys (`.esc` and all arrow keys) have inconsistent `key` values in IE9, so these built-in aliases should be preferred if you need to support IE9.</p>
+<p class="tip">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.</p>
 
-You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object:
+Anda juga dapat [mendefinisikan pengubah kustom alias key](../api/#keyCodes) melalui global config.keyCodes object:
 
 ``` js
-// enable `v-on:keyup.f1`
+// Mengaktifkan `v-on:keyup.f1`
 Vue.config.keyCodes.f1 = 112
 ```
 
-## System Modifier Keys
+## Sistem Pengubah (Modifier) Key
 
-> New in 2.1.0+
+> Baru pada versi 2.1.0+
 
-You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed:
+Anda dapat menggunakan pengubah di bawah untuk memicu mouse atau keyboard event listener hanya pada saat pengubah tertentu ditekan:
 
 - `.ctrl`
 - `.alt`
 - `.shift`
 - `.meta`
 
-> Note: On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”. On Symbolics keyboards, meta is labeled “META” or “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”.
 
-For example:
+Contoh:
 
 ```html
 <!-- Alt + C -->
@@ -292,41 +292,41 @@ For example:
 <div @click.ctrl="doSomething">Do something</div>
 ```
 
-<p class="tip">Note that modifier keys are different from regular keys and when used with `keyup` events, they have to be pressed when the event is emitted. In other words, `keyup.ctrl` will only trigger if you release a key while holding down `ctrl`. It won't trigger if you release the `ctrl` key alone. If you do want such behaviour, use the `keyCode` for `ctrl` instead: `keyup.17`.</p>
+<p class="tip">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`.</p>
 
-### `.exact` Modifier
+### Pengubah (Modifier) `.exact`
 
-> New in 2.5.0+
+> Baru pada versi 2.5.0+
 
-The `.exact` modifier allows control of the exact combination of system modifiers needed to trigger an event.
+Pengubah `.exact` mengizinkan kontrol kombinasi eksak sistem pengubah yang dibutuhkan untuk memicu event.
 
 ``` html
-<!-- this will fire even if Alt or Shift is also pressed -->
+<!-- baris ini akan mengeksekusi metode bahkan jika tombol Alt atau Shift juga ditekan -->
 <button @click.ctrl="onClick">A</button>
 
-<!-- this will only fire when Ctrl and no other keys are pressed -->
+<!-- baris ini hanya akan mengeksekusi metode saat tombol Ctrl ditekan tanpa diikuti tombol lain -->
 <button @click.ctrl.exact="onCtrlClick">A</button>
 
-<!-- this will only fire when no system modifiers are pressed -->
+<!-- baris ini hanya akan mengeksekusi metode saat tidak menekan sistem modifier keys -->
 <button @click.exact="onClick">A</button>
 ```
 
-### Mouse Button Modifiers
+### Pengubah (Modifier) Tombol Mouse
 
-> New in 2.2.0+
+> Baru pada versi 2.2.0+
 
 - `.left`
 - `.right`
 - `.middle`
 
-These modifiers restrict the handler to events triggered by a specific mouse button.
+Pengubah ini membatasi _handler_ pada event saat dipicu oleh tombol mouse tertentu.
 
-## Why Listeners in HTML?
+## Mengapa Listener di dalam HTML?
 
-You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`:
+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. It's easier to locate the handler function implementations within your JS code by skimming the HTML template.
+1. Mempermudah penempatan implementasi fungsi _handler_ diantara baris kode JS dengan menelusuri sekilas HTML templat.
 
-2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.
+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. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself.
+3. Saat ViewModel dihapus, semua event listener secara otomatis dihapus. Anda tidak perlu khawatir tentang membersihkan event yang ada.