Halo teman-teman semuanya, di artikel ketiga ini kita akan membahas tentang event handling di Alpine.js menggunakan directive x-on. Kalau di JavaScript kita biasa menggunakan addEventListener, di Alpine semuanya bisa dilakukan langsung di dalam HTML, simpel dan bersih.
Event handling ini penting banget, karena hampir semua interaksi pengguna seperti klik tombol, isi form, atau hover elemen, terjadi lewat event.
Apa Itu x-on?
x-on adalah directive di Alpine.js yang digunakan untuk menangani event seperti click, input, submit, dan lain-lain. Kita bisa menulisnya lengkap sebagai x-on:event, atau dalam bentuk singkat @event.
Contoh paling dasar:
<div x-data="{ count: 0 }">
<button x-on:click="count++">Tambah</button>
<p x-text="count"></p>
</div>
Atau versi singkatnya:
<div x-data="{ count: 0 }">
<button @click="count++">Tambah</button>
<p x-text="count"></p>
</div>
Ketika tombol diklik, nilai count akan bertambah 1, dan langsung tampil di paragraf.
Menangani Event Input
Kita juga bisa menangani event input dari field form seperti ini:
<div x-data="{ nama: '' }">
<input type="text" @input="nama = $event.target.value" placeholder="Masukkan nama">
<p x-text="nama"></p>
</div>
Namun, untuk input sebaiknya kita tetap pakai x-model karena lebih ringkas. Tapi contoh ini penting untuk memahami bagaimana $event bekerja.
Mengakses Objek Event dengan $event
Di dalam handler Alpine.js, kita bisa menggunakan keyword $event untuk mengakses informasi dari event tersebut.
Contoh:
<div x-data>
<button @click="console.log($event)">Klik Aku</button>
</div>
Saat tombol diklik, seluruh objek event akan ditampilkan di console browser.
Menjalankan Fungsi dari x-data
Kita bisa mendefinisikan fungsi di dalam x-data, lalu memanggilnya saat event terjadi:
<div x-data="{
count: 0,
tambah() {
this.count++
}
}">
<button @click="tambah()">Tambah</button>
<p x-text="count"></p>
</div>
Menulis fungsi seperti ini membantu kita menjaga logika tetap terorganisir, apalagi kalau mulai banyak interaksi di komponen tersebut.
Event Modifier
Alpine.js juga menyediakan event modifier seperti:
.prevent – mencegah aksi default (seperti submit form reload halaman).stop – menghentikan propagasi event ke parent.once – hanya trigger sekali.debounce – menunda eksekusi event
Contoh:
<form x-data @submit.prevent="alert('Form disubmit!')">
<button type="submit">Submit</button>
</form>
Atau:
<input type="text" @input.debounce.500ms="console.log($event.target.value)">
Yang artinya event input hanya akan diproses 500ms setelah user berhenti mengetik.
Kesimpulan
Di artikel ini, kita udah belajar bagaimana menangani event di Alpine.js dengan directive x-on (atau @event). Kita juga udah lihat cara akses $event, memanggil fungsi dari dalam x-data, dan menggunakan event modifier untuk mengontrol perilaku event.
Di artikel berikutnya, kita akan membahas Reactive State, di mana kita bisa membuat input yang langsung terhubung ke data secara dua arah.
Terima Kasih