diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 9accd6c4b8..fd191ba030 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -1,40 +1,40 @@ --- -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 -
- -

The button above has been clicked {{ counter }} times.

+
+ +

Tombol diatas telah ditekan {{ counter }} kali.

``` ``` js -var example1 = new Vue({ - el: '#example-1', +var contoh1 = new Vue({ + el: '#contoh-1', data: { counter: 0 } }) ``` -Result: +Hasil: {% raw %} -
+
-

The button above has been clicked {{ counter }} times.

+

Tombol diatas telah ditekan {{ counter }} kali.

{% 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 -
- +
+
``` ``` 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) } @@ -74,19 +74,19 @@ var example2 = new Vue({ } }) -// 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 %} -
+
{% 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 -
+
``` ``` js new Vue({ - el: '#example-3', + el: '#contoh-3', methods: { say: function (message) { alert(message) @@ -123,7 +123,7 @@ new Vue({ }) ``` -Result: +Hasil: {% raw %}
@@ -141,7 +141,7 @@ new Vue({ {% 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 - + - + ``` -### 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. \ No newline at end of file