JavaScript Event: Click, Input, dan Submit

Setelah memahami DOM JavaScript, langkah berikutnya adalah mempelajari JavaScript Event.

Event memungkinkan JavaScript menjalankan suatu kode ketika sesuatu terjadi di halaman website.

Misalnya ketika pengguna mengklik tombol, mengetik pada kolom input, atau mengirim sebuah form.

Tanpa event, JavaScript tidak akan mengetahui kapan pengguna melakukan suatu tindakan.

Dalam artikel ini kita akan mempelajari tiga event JavaScript yang sangat penting untuk pemula, yaitu click, input, dan submit.

Apa Itu JavaScript Event?

Event adalah kejadian atau aktivitas yang terjadi pada halaman website.

Kejadian tersebut dapat berasal dari tindakan pengguna maupun dari browser.

Beberapa contoh event adalah:

• Pengguna mengklik tombol.
• Pengguna mengetik pada input.
• Pengguna mengirim form.
• Pengguna memilih sebuah opsi.
• Pengguna menekan tombol keyboard.
• Halaman selesai dimuat.

JavaScript dapat mendeteksi kejadian tersebut kemudian menjalankan kode tertentu.

Hubungan DOM dan Event

DOM dan Event biasanya digunakan bersama.

DOM digunakan untuk memilih elemen HTML.

Event digunakan untuk mendeteksi tindakan yang terjadi pada elemen tersebut.

Contohnya kita mempunyai tombol:

<button id="tombol">Klik Saya</button>

Kita pilih tombol tersebut menggunakan DOM:

const tombol = document.getElementById("tombol");

Setelah itu kita dapat memasang event pada tombol tersebut.

tombol.addEventListener("click", function () {
    console.log("Tombol diklik");
});

Ketika tombol diklik, tulisan Tombol diklik akan muncul pada Console browser.

Apa Itu addEventListener()?

addEventListener() adalah method JavaScript yang digunakan untuk memasang event listener pada sebuah elemen.

Struktur dasarnya adalah:

elemen.addEventListener("event", function () {
    // kode yang dijalankan
});

Bagian pertama menentukan jenis event.

Contohnya:

"click"

Bagian kedua adalah function yang akan dijalankan ketika event terjadi.

Event Click JavaScript

Event click terjadi ketika pengguna mengklik sebuah elemen.

Event ini sering digunakan pada:

• Tombol.
• Menu.
• Card.
• Link.
• Dropdown.
• Modal.

Contoh sederhana:

<button id="tombol">Klik Saya</button>

JavaScript:

const tombol = document.getElementById("tombol");

tombol.addEventListener("click", function () {
    alert("Tombol berhasil diklik!");
});

Ketika pengguna menekan tombol tersebut, browser akan menampilkan pesan.

Mengubah Teks Saat Tombol Diklik

Event click menjadi lebih berguna ketika digabungkan dengan DOM.

Contoh HTML:

<h1 id="judul">Belajar JavaScript</h1>

<button id="ubah">Ubah Judul</button>

JavaScript:

const judul = document.getElementById("judul");
const tombolUbah = document.getElementById("ubah");

tombolUbah.addEventListener("click", function () {
    judul.textContent = "Judul Berhasil Diubah!";
});

Ketika tombol diklik, JavaScript mengubah isi elemen h1.

Alurnya adalah:

1. JavaScript memilih elemen judul.
2. JavaScript memilih tombol.
3. Event listener dipasang pada tombol.
4. JavaScript menunggu klik.
5. Ketika klik terjadi, teks judul berubah.

Mengubah Class Saat Diklik

Event click juga sering digunakan bersama classList.

Misalnya kita mempunyai CSS:

.aktif {
    background-color: black;
    color: white;
}

HTML:

<div id="kotak">Belajar JavaScript</div>

<button id="tombol">Ubah Tampilan</button>

JavaScript:

const kotak = document.getElementById("kotak");
const tombol = document.getElementById("tombol");

tombol.addEventListener("click", function () {
    kotak.classList.toggle("aktif");
});

Setiap kali tombol diklik, class aktif akan ditambahkan atau dihapus.

Teknik seperti ini dapat digunakan untuk membuat dark mode, menu mobile, dropdown, dan berbagai komponen interaktif.

Event Input JavaScript

Event input terjadi ketika nilai pada elemen input berubah.

Event ini sangat berguna ketika kita ingin membaca apa yang sedang diketik oleh pengguna secara langsung.

Contoh HTML:

<input type="text" id="nama" placeholder="Masukkan nama">

<p id="hasil"></p>

JavaScript:

const nama = document.getElementById("nama");
const hasil = document.getElementById("hasil");

nama.addEventListener("input", function () {
    hasil.textContent = nama.value;
});

Ketika pengguna mengetik pada input, isi paragraf akan berubah mengikuti teks yang sedang diketik.

Apa Itu value?

Properti value digunakan untuk membaca nilai dari sebuah elemen form seperti input.

Contohnya:

const nama = document.getElementById("nama");

console.log(nama.value);

Jika pengguna mengetik:

Budi

Maka nilai nama.value adalah:

Budi

Properti ini sangat penting ketika kita mulai bekerja dengan form.

Membuat Preview Teks Secara Langsung

Kita dapat menggunakan event input untuk membuat preview secara real-time.

HTML:

<label for="pesan">Tulis Pesan:</label>

<input type="text" id="pesan">

<p>Preview: <span id="preview"></span></p>

JavaScript:

const pesan = document.getElementById("pesan");
const preview = document.getElementById("preview");

pesan.addEventListener("input", function () {
    preview.textContent = pesan.value;
});

Setiap karakter yang diketik akan langsung muncul di bagian preview.

Konsep seperti ini dapat digunakan untuk fitur pencarian langsung, penghitung karakter, preview username, dan berbagai fitur lainnya.

Event Submit JavaScript

Event submit digunakan ketika pengguna mengirim sebuah form.

Contoh HTML:

<form id="formNama">

    <label for="nama">Nama:</label>

    <input type="text" id="nama">

    <button type="submit">Kirim</button>

</form>

JavaScript:

const form = document.getElementById("formNama");

form.addEventListener("submit", function () {
    console.log("Form dikirim");
});

Ketika tombol Kirim ditekan, event submit akan dijalankan.

Mengapa Halaman Refresh Saat Form Dikirim?

Secara default, browser akan menjalankan proses pengiriman form ketika event submit terjadi.

Akibatnya halaman biasanya akan berpindah atau dimuat ulang.

Ketika sedang belajar JavaScript, kita sering ingin mencegah perilaku tersebut agar data dapat diproses terlebih dahulu menggunakan JavaScript.

Caranya menggunakan:

event.preventDefault();

Apa Itu preventDefault()?

preventDefault() digunakan untuk mencegah perilaku default sebuah event.

Contohnya pada form:

const form = document.getElementById("formNama");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    console.log("Form diproses menggunakan JavaScript");
});

Sekarang ketika form dikirim, halaman tidak langsung melakukan proses submit bawaan browser.

Membaca Data Form dengan JavaScript

Sekarang kita gabungkan event submit dengan nilai input.

HTML:

<form id="formNama">

    <label for="nama">Nama:</label>

    <input type="text" id="nama">

    <button type="submit">Kirim</button>

</form>

<p id="hasil"></p>

JavaScript:

const form = document.getElementById("formNama");
const nama = document.getElementById("nama");
const hasil = document.getElementById("hasil");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    hasil.textContent = "Halo, " + nama.value;
});

Jika pengguna mengetik:

Andi

Kemudian menekan tombol Kirim, halaman akan menampilkan:

Halo, Andi

Validasi Form Sederhana

Event submit juga dapat digunakan untuk melakukan validasi.

Misalnya kita tidak ingin form diproses jika nama masih kosong.

const form = document.getElementById("formNama");
const nama = document.getElementById("nama");
const hasil = document.getElementById("hasil");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    if (nama.value.trim() === "") {
        hasil.textContent = "Nama tidak boleh kosong.";
        return;
    }

    hasil.textContent = "Halo, " + nama.value;
});

trim() digunakan untuk menghapus spasi kosong pada bagian awal dan akhir teks.

Jika pengguna hanya memasukkan spasi, input tetap dianggap kosong.

Mengenal Object Event

Ketika sebuah event terjadi, JavaScript dapat memberikan informasi mengenai event tersebut melalui sebuah object.

Biasanya parameter tersebut ditulis sebagai:

event

atau:

e

Contohnya:

tombol.addEventListener("click", function (event) {
    console.log(event);
});

Object tersebut berisi berbagai informasi mengenai event yang baru terjadi.

Salah satu property yang berguna adalah:

event.target

event.target menunjukkan elemen yang memicu event.

Contoh:

tombol.addEventListener("click", function (event) {
    console.log(event.target);
});

Function Biasa dan Arrow Function

Event listener juga dapat ditulis menggunakan arrow function.

Contoh function biasa:

tombol.addEventListener("click", function () {
    console.log("Klik");
});

Contoh arrow function:

tombol.addEventListener("click", () => {
    console.log("Klik");
});

Keduanya dapat digunakan untuk menangani event.

Untuk pemula, gunakan bentuk yang paling mudah dibaca dan dipahami terlebih dahulu.

Membuat Function Event Terpisah

Kode event tidak harus selalu ditulis langsung di dalam addEventListener().

Kita juga dapat membuat function terpisah.

const tombol = document.getElementById("tombol");

function tampilkanPesan() {
    alert("Tombol diklik!");
}

tombol.addEventListener("click", tampilkanPesan);

Cara ini berguna ketika function mulai memiliki banyak kode atau ingin digunakan kembali.

Contoh Project Sederhana

Sekarang kita gabungkan event input, click, dan submit dalam satu latihan.

Buat file HTML berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Belajar JavaScript Event</title>
</head>

<body>

    <h1>Belajar JavaScript Event</h1>

    <form id="formNama">

        <input
            type="text"
            id="nama"
            placeholder="Masukkan nama"
        >

        <button type="submit">Kirim</button>

    </form>

    <p>Preview: <span id="preview"></span></p>

    <p id="hasil"></p>

    <button id="hapus">Hapus Pesan</button>

    <script src="script.js"></script>

</body>
</html>

Kemudian buat file script.js:

const form = document.getElementById("formNama");
const nama = document.getElementById("nama");
const preview = document.getElementById("preview");
const hasil = document.getElementById("hasil");
const hapus = document.getElementById("hapus");

nama.addEventListener("input", function () {
    preview.textContent = nama.value;
});

form.addEventListener("submit", function (event) {
    event.preventDefault();

    if (nama.value.trim() === "") {
        hasil.textContent = "Silakan masukkan nama.";
        return;
    }

    hasil.textContent = "Halo, " + nama.value + "!";
});

hapus.addEventListener("click", function () {
    hasil.textContent = "";
});

Bagaimana Project Tersebut Bekerja?

Pertama, event input membaca teks yang sedang diketik.

nama.addEventListener("input", function () {
    preview.textContent = nama.value;
});

Kemudian event submit memproses form.

form.addEventListener("submit", function (event) {
    event.preventDefault();
});

Terakhir, event click digunakan untuk menghapus hasil.

hapus.addEventListener("click", function () {
    hasil.textContent = "";
});

Dengan tiga event sederhana tersebut, kita sudah dapat membuat halaman yang merespons tindakan pengguna.

Event JavaScript Lain yang Perlu Diketahui

Selain click, input, dan submit, JavaScript mempunyai banyak event lainnya.

Beberapa yang sering digunakan antara lain:

• change — ketika nilai elemen berubah.
• keydown — ketika tombol keyboard ditekan.
• keyup — ketika tombol keyboard dilepas.
• focus — ketika sebuah elemen mendapatkan fokus.
• blur — ketika sebuah elemen kehilangan fokus.
• mouseenter — ketika pointer masuk ke area elemen.
• mouseleave — ketika pointer keluar dari area elemen.

Tidak perlu menghafalkan semua event sekaligus.

Mulailah dari event yang paling sering digunakan dalam project sederhana.

Kesalahan Umum Saat Belajar JavaScript Event

1. Salah Menulis Nama Event

Penulisan:

tombol.addEventListener("click", function () {
    console.log("Klik");
});

Nama event harus ditulis dengan benar.

2. Memanggil Function Saat Memasang Event

Misalnya kita mempunyai:

function tampilkanPesan() {
    console.log("Halo");
}

Untuk memasangnya sebagai event listener:

tombol.addEventListener("click", tampilkanPesan);

Bukan:

tombol.addEventListener("click", tampilkanPesan());

Jika menggunakan tanda kurung, function akan langsung dijalankan saat kode dibaca.

3. Lupa preventDefault() pada Form

Ketika menangani form dengan JavaScript, halaman mungkin melakukan reload setelah tombol submit ditekan.

Gunakan:

event.preventDefault();

jika ingin mencegah proses submit bawaan browser selama data diproses dengan JavaScript.

4. Selector Tidak Menemukan Elemen

Pastikan ID atau selector yang digunakan JavaScript sama dengan HTML.

Contohnya:

<button id="kirim">Kirim</button>

Maka JavaScript:

const tombol = document.getElementById("kirim");

Latihan JavaScript Event untuk Pemula

Untuk melatih pemahaman, coba buat halaman sederhana dengan fitur berikut:

1. Sebuah input nama.
2. Sebuah tombol submit.
3. Preview nama saat pengguna mengetik.
4. Pesan selamat datang setelah form dikirim.
5. Tombol untuk menghapus pesan.

Gunakan:

• input untuk preview.
• submit untuk form.
• click untuk tombol hapus.

Jika sudah dapat membuat latihan tersebut tanpa melihat contoh, berarti dasar JavaScript Event sudah mulai dipahami.

Kesimpulan

JavaScript Event digunakan untuk menjalankan kode ketika sebuah kejadian terjadi pada halaman website.

Tiga event penting yang perlu dikuasai pemula adalah:

• click untuk mendeteksi klik pengguna.
• input untuk membaca perubahan pada input.
• submit untuk menangani pengiriman form.

Event biasanya digunakan bersama DOM.

DOM memilih elemen, sedangkan Event menentukan kapan JavaScript harus melakukan sesuatu terhadap elemen tersebut.

Setelah memahami DOM dan JavaScript Event, langkah berikutnya adalah belajar LocalStorage JavaScript. Dengan LocalStorage, kita dapat menyimpan data sederhana di browser agar data tidak langsung hilang ketika halaman direfresh.