Pernahkah Anda memperhatikan saat menekan tombol "Submit" pada sebuah formulir (<form>), halaman web secara otomatis melakukan penyegaran (refresh)? Itu adalah Default Behavior atau perilaku bawaan browser sejak era awal internet.
Namun, dalam pengembangan aplikasi modern (seperti menggunakan React, Vue, atau Vanilla JS), kita sering kali ingin menangani data formulir tersebut menggunakan JavaScript tanpa harus memuat ulang halaman. Di sinilah e.preventDefault() berperan.
1. Apa itu e.preventDefault()?
e.preventDefault() adalah sebuah metode yang ada di dalam Event Object. Fungsinya adalah untuk memberitahu browser: "Jangan jalankan aksi standar yang biasa kamu lakukan untuk event ini."
Pada elemen <form>, aksi standarnya adalah mengirimkan data ke URL yang ditentukan di atribut action dan kemudian melakukan page reload.
2. Mengapa Kita Harus Mencegahnya?
Ada beberapa alasan utama mengapa developer modern selalu menggunakan teknik ini:
-
Single Page Application (SPA): Kita ingin aplikasi tetap berjalan tanpa interupsi refresh.
-
Validasi Kustom: Kita perlu memeriksa apakah input user sudah benar (misal: panjang password) sebelum data benar-benar dikirim.
-
Pengiriman AJAX/Fetch: Kita ingin mengirim data ke server di latar belakang menggunakan JavaScript.
-
Pengalaman Pengguna (UX): Menghindari layar putih sekejap saat halaman memuat ulang.
3. Tutorial Praktis: Implementasi pada Form
Mari kita lihat perbandingannya dalam kode.
Struktur HTML
<form id="login-form"> <input type="text" id="username" placeholder="Username" required> <button type="submit">Kirim Data</button>
</form>
<p id="pesan"></p>
Logika JavaScript
const form = document.querySelector('#login-form');
const pesan = document.querySelector('#pesan'); form.addEventListener('submit', function(e) { // 1. CEGAH REFRESH HALAMAN e.preventDefault(); // 2. Ambil data dari input const nama = document.querySelector('#username').value; // 3. Lakukan sesuatu dengan data (misal: tampilkan pesan) pesan.innerText = `Halo ${nama}, data kamu sedang diproses tanpa refresh!`; console.log("Form berhasil ditangani oleh JS.");
});
4. Perbedaan dengan e.stopPropagation()
Penting untuk tidak tertukar antara keduanya:
| Metode | Fokus Utama |
e.preventDefault() |
Membatalkan aksi bawaan browser (seperti refresh atau pindah link). |
e.stopPropagation() |
Menghentikan perambatan event ke elemen induk (bubbling). |
5. Contoh Lain Penggunaan preventDefault()
Selain pada formulir, metode ini sering digunakan pada:
-
Tag Link (
<a>): Mencegah browser berpindah halaman saat link diklik (sering digunakan untuk tombol scroll-to-top atau tabs). -
Klik Kanan: Mencegah munculnya menu konteks bawaan browser untuk diganti dengan menu kustom.
-
Checkbox: Mencegah checkbox dicentang saat diklik (jarang, tapi memungkinkan).
Kesimpulan
Menggunakan e.preventDefault() pada form submission adalah standar wajib jika Anda membangun aplikasi web interaktif. Dengan metode ini, Anda memegang kendali penuh atas aliran data dan navigasi aplikasi Anda, memastikan pengalaman pengguna tetap mulus tanpa gangguan page reload yang tidak perlu.
