Change Event: Biar JavaScript Ngeh Kalo Ada yang Berubah!

Dalam dunia pengembangan web, sering kali kita butuh cara buat JavaScript ngeh kalau ada perubahan di input form. Misalnya, saat pengguna memilih opsi dari dropdown, mengetik di input, atau mengganti nilai checkbox. Change Event adalah solusi terbaik buat menangani perubahan ini!

Change Event adalah event di JavaScript yang dipicu saat nilai dari elemen input berubah. Event ini sering digunakan untuk menangani form agar lebih interaktif dan responsif terhadap input pengguna.

Cara Kerja change Event

Event change bekerja pada elemen input yang memiliki nilai yang bisa diubah oleh pengguna, seperti:

• <input> (text, checkbox, radio, dll.)
• <textarea>
• <select>

Event ini akan dipicu ketika nilai elemen berubah dan fokus berpindah ke elemen lain (misalnya, setelah pengguna mengetik di input text lalu mengklik di luar input tersebut).

Sintaks Dasar

document.getElementById("myInput").addEventListener("change", function() {
    console.log("Nilai input berubah!");
});

Contoh Penggunaan change Event

1. Menangani Perubahan di Input Text

Jika ingin menangkap perubahan pada input teks:

<input type="text" id="nama" placeholder="Masukkan nama">
<p id="hasil"></p>

document.getElementById("nama").addEventListener("change", function() {
    document.getElementById("hasil").textContent = "Nama: " + this.value;
});

Saat pengguna selesai mengetik dan keluar dari input, teks dalam paragraf akan diperbarui dengan nilai input.

2. Menangani Perubahan di Dropdown (<select>)

Dropdown adalah elemen yang sering menggunakan change event.

<select id="pilihan">
    <option value="merah">Merah</option>
    <option value="biru">Biru</option>
    <option value="hijau">Hijau</option>
</select>
<p id="warna"></p>

document.getElementById("pilihan").addEventListener("change", function() {
    document.getElementById("warna").textContent = "Kamu memilih: " + this.value;
});

Ketika pengguna memilih warna baru, teks paragraf akan berubah sesuai warna yang dipilih.

3. Menangani Checkbox dengan change Event

Checkbox juga bisa mendeteksi perubahan status menggunakan event ini.

<input type="checkbox" id="setuju"> Saya setuju
<p id="status"></p>

document.getElementById("setuju").addEventListener("change", function() {
    document.getElementById("status").textContent = this.checked ? "Kamu menyetujui!" : "Kamu belum menyetujui";
});

Saat checkbox dicentang atau dihapus centangnya, teks dalam paragraf akan berubah sesuai statusnya.

Perbedaan change vs input Event

Banyak yang bingung antara change dan input. Berikut perbedaannya:

Contoh input event:

document.getElementById("nama").addEventListener("input", function() {
    console.log("Nilai berubah saat diketik: " + this.value);
});

Kalau pakai input, event akan dipanggil setiap kali ada perubahan, bahkan saat pengguna masih mengetik.

Delegasi Event untuk Elemen Dinamis

Kalau ada elemen yang dibuat secara dinamis, kita perlu menangani event dengan cara berbeda menggunakan event delegation.

<div id="formContainer">
    <input type="text" class="dinamis" placeholder="Ketik sesuatu">
</div>
<button id="tambah">Tambah Input</button>

document.getElementById("tambah").addEventListener("click", function() {
    const inputBaru = document.createElement("input");
    inputBaru.type = "text";
    inputBaru.classList.add("dinamis");
    document.getElementById("formContainer").appendChild(inputBaru);
});

document.getElementById("formContainer").addEventListener("change", function(event) {
    if (event.target.classList.contains("dinamis")) {
        console.log("Input baru berubah menjadi: " + event.target.value);
    }
});

Dengan pendekatan ini, event change tetap bisa bekerja meskipun input baru ditambahkan setelah halaman dimuat.

Kapan Harus Menggunakan change Event?

✅ Jika ingin menangani perubahan dalam dropdown (<select>).
✅ Jika ingin mendeteksi perubahan pada checkbox atau radio button.
✅ Jika ingin menjalankan kode hanya setelah pengguna menyelesaikan pengisian input.
✅ Jika ingin mengupdate data hanya setelah pengguna benar-benar menetapkan nilai.

❌ Jangan gunakan change jika ingin menangkap perubahan langsung saat pengguna mengetik. Gunakan input untuk itu.

Kesimpulan

• change event digunakan untuk menangkap perubahan nilai elemen input setelah kehilangan fokus.
• Cocok untuk dropdown, checkbox, dan input yang perlu konfirmasi akhir.
• Berbeda dengan input event, change hanya dipicu setelah pengguna menyelesaikan perubahan.
• Gunakan event delegation jika ingin menangani elemen yang ditambahkan secara dinamis.

Dengan memahami cara kerja change event, kita bisa membuat formulir yang lebih interaktif, responsif, dan mudah digunakan.