Tutorial Event JavaScript: onclick, onsubmit, addEventListener

Pada dasarnya, event JavaScript adalah sebuah kejadian atau aksi yang terjadi di dalam browser, baik karena interaksi pengguna maupun perubahan yang dilakukan oleh sistem. Contoh paling sederhana adalah saat pengguna meng-klik tombol, mengisi form, menekan keyboard, atau ketika halaman selesai dimuat. Semua kejadian ini dapat “didengar” dan ditangani menggunakan JavaScript agar halaman web bisa berperilaku lebih interaktif.

Event handling atau penanganan event memiliki peran yang sangat penting dalam pengembangan web modern. Tanpa event, semua halaman hanya akan bersifat statis dan tidak mampu merespons tindakan pengguna. Dengan event handling, kita bisa membuat tombol yang bisa berubah warna ketika diklik, form yang otomatis divalidasi sebelum dikirim, hingga aplikasi web kompleks seperti chat, dashboard, real-time update, dan sebagainya.

Untuk memahami konsep event, perhatikan contoh sederhana berikut:

Ketika Anda membuat sebuah tombol HTML, lalu menambahkan fungsi JavaScript agar tombol tersebut memunculkan alert saat diklik, itulah contoh paling dasar interaksi event JavaScript.

Pengguna melakukan aksi → event terjadi → JavaScript merespons.

Dalam pengembangan web, terdapat berbagai jenis event yang umum dan wajib dipahami pemula, yaitu:

• Mouse Event
  Meliputi click, dblclick, mouseenter, mouseleave, mousemove, wheel, dan sebagainya. Event ini terjadi saat pengguna berinteraksi dengan mouse.

• Keyboard Event
  Contohnya keydown, keyup, dan keypress. Cocok untuk membuat fitur pencarian otomatis, validasi input secara live, dan kontrol navigasi pada aplikasi.

• Form Event
  Seperti submit, change, input, dan focus. Digunakan untuk memproses form, memvalidasi data, atau memberi efek visual saat pengguna mengetik.

• Window Event
  Misalnya load, scroll, resize, beforeunload. Sangat penting untuk mendeteksi kapan halaman selesai dimuat, menangani infinite scroll, atau menyesuaikan layout saat ukuran layar berubah.

Di tutorial ini kita akan membahasnya secara detail dan akan penulis buatkan contoh kode yang mungkin bisa digunakan untuk latihan membuat event JavaScript.

Baca juga: DOM JavaScript: Pengertian dan Cara Manipulasi Elemen

Memahami Cara Kerja Event Handling

Sebelum masuk ke penggunaan onclick, onsubmit, atau addEventListener, kamu perlu memahami bagaimana JavaScript menangani sebuah event. Konsep ini penting karena seluruh mekanisme interaksi dalam web modern bergantung pada cara kerja event yang tepat.

1. Konsep Event Listener

Event listener adalah sebuah “pendengar” yang dipasang pada elemen HTML untuk menunggu terjadinya suatu event tertentu.

Analoginya seperti menunggu telepon berdering — ketika telepon berbunyi (event terjadi), kamu meresponsnya (handler dijalankan).

Dalam JavaScript, event listener menghubungkan dua hal:

• Event → kejadian (misalnya klik)
• Handler → fungsi yang dijalankan ketika event tersebut terjadi

Contoh konsepnya:

button.addEventListener("click", function () {
    alert("Tombol diklik!");
});Code language: JavaScript (javascript)

Elemen akan “mendengarkan” event click, lalu menjalankan fungsi ketika event itu muncul.

2. Event Target & Event Object

Event Target

Event target adalah elemen yang menjadi sumber event — elemen tempat event listener dipasang atau elemen yang memicu event. Misalnya, jika kamu klik tombol <button>, maka event target-nya adalah tombol tersebut.

Event target bisa diakses melalui:

event.targetCode language: CSS (css)

Event Object

Setiap kali event terjadi, browser secara otomatis mengirimkan event object — objek ini berisi semua informasi tentang event tersebut, seperti:

• Posisi klik mouse (clientX, clientY)
• Tombol keyboard yang ditekan (key)
• Elemen yang memicu event (target)
• Waktu event terjadi (timeStamp)
• Dan banyak informasi lainnya

Contoh:

document.addEventListener("click", function(event) {
    console.log("Event terjadi pada elemen:", event.target);
});Code language: JavaScript (javascript)

Event object sangat penting terutama saat membuat fitur kompleks seperti drag-and-drop, form validation, hingga animasi interaktif.

3. Alur Dasar Event: Trigger → Handler → Response

Setiap event JavaScript mengikuti alur yang sama:

Trigger (Pemicu)

Event dimulai oleh tindakan pengguna atau perubahan sistem. Contoh trigger:

• Pengguna menekan tombol keyboard
• User meng-klik tombol
• Form dikirim
• Halaman selesai dimuat

Handler (Fungsi Penangani)

Ketika trigger muncul, browser memanggil fungsi handler yang sudah kamu daftarkan dalam event listener.

Response (Aksi JavaScript)

Handler menjalankan kode yang kamu definisikan, seperti:

• Menampilkan popup
• Mengubah warna elemen
• Menambah elemen baru ke DOM
• Mengirim data ke server

Contoh alur sederhana:

input.addEventListener("keyup", function(event) {
    output.textContent = event.target.value;
});Code language: JavaScript (javascript)

1. Trigger → user mengetik
2. Handler → fungsi dijalankan
3. Response → teks ditampilkan

4. Cara Kerja Mekanisme Event pada Browser

Browser memiliki sistem event yang berjalan di belakang layar. Saat sebuah event terjadi, browser melewati tiga fase:

1. Capturing Phase
   Event merambat dari elemen level terluar (window) menuju elemen terdalam.

2. Target Phase
   Event mencapai elemen yang memicu event (target).

3. Bubbling Phase
   Setelah mencapai target, event “naik” kembali ke elemen luar.

Ini adalah konsep penting yang biasa disebut:

Event Bubbling & Capturing

Keduanya mempengaruhi bagaimana dan kapan event listener menangkap event, terutama saat banyak elemen bertumpuk.

Contoh ilustrasi:

• Klik pada <span> dalam <div>
• Event dimulai dari window → document → div → span
• Kemudian naik kembali dari span → div → document → window

Memahami mekanisme ini sangat penting untuk menghindari bug atau membuat fitur kompleks seperti delegated event, modal, dropdown, dan fitur interaktif lainnya.

Penggunaan onclick JavaScript

Event onclick adalah salah satu event paling dasar dan paling sering digunakan dalam JavaScript. Dengan event ini, kamu bisa membuat elemen HTML bereaksi ketika diklik, seperti menampilkan pesan, mengganti warna, menambah elemen, atau menjalankan fungsi tertentu. Bagian ini akan membahas cara menggunakan onclick, metode pemasangannya, kelebihan serta kekurangannya, dan contoh kasus yang mudah dipahami pemula.

1. Apa Itu onclick?

onclick adalah event JavaScript yang dipicu ketika pengguna melakukan klik pada suatu elemen HTML. Event ini memungkinkan kamu memberikan interaksi langsung tanpa harus membuat kode yang rumit.

Contoh pemicu:

• klik tombol (<button>)
• klik teks (<p>, <span>)
• klik gambar
• klik elemen apa pun yang bisa menerima event

Secara teknis, onclick menghubungkan aksi klik dengan fungsi JavaScript.

2. Cara Memasang onclick

Ada tiga metode utama untuk menggunakan onclick di JavaScript. Masing-masing memiliki karakteristik dan kegunaannya sendiri.

Inline onclick (di dalam HTML)

Metode ini menulis event langsung pada elemen HTML.

Contoh:

<button onclick="alert('Tombol diklik!')">Klik Saya</button>Code language: HTML, XML (xml)

Kelebihan:

• Mudah dan cepat, cocok untuk pemula.

Kekurangan besar:

• HTML jadi bercampur dengan JavaScript → tidak disarankan untuk produksi
• Sulit dikelola jika jumlah event banyak
• Tidak dapat memasang lebih dari satu handler dengan cara ini

Property Handler (elemen.onclick)

Metode ini memasang event menggunakan JavaScript dengan mengatur properti onclick.

Contoh:

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

<script>
    const button = document.getElementById("btn");
    button.onclick = function() {
        alert("Tombol diklik!");
    };
</script>Code language: HTML, XML (xml)

Kelebihan:

• Memisahkan JavaScript dari HTML
• Lebih terstruktur daripada inline

Kekurangan:

• Hanya bisa memiliki 1 handler (yang baru akan menimpa yang lama)

DOM Handler Modern (addEventListener)

Meskipun bukan bagian dari onclick secara langsung, ini adalah cara modern untuk menangani klik.

button.addEventListener("click", function() {
    console.log("Klik!");
});Code language: JavaScript (javascript)

Kelebihan:

• Bisa memasang banyak event listener sekaligus
• Dapat mengatur event bubbling & capturing
• Lebih fleksibel untuk aplikasi kompleks
• Direkomendasikan untuk standar modern

Ini alasan mengapa onclick sering dianggap kurang fleksibel untuk proyek besar.

3. Kekurangan Metode onclick

Meskipun mudah, penggunaan onclick memiliki sejumlah kekurangan:

Tidak bisa menambah lebih dari satu handler

Jika kamu menulis:

btn.onclick = () => console.log("A");
btn.onclick = () => console.log("B");Code language: JavaScript (javascript)

Handler A akan hilang dan tergantikan oleh B.

Tidak cocok untuk proyek skala besar

Karena:

• Sulit di-debug
• Sulit dinamis
• Tidak bisa menangani event delegation
• Tidak bisa mengatur fase bubbling/capturing

Membuat kode lebih sulit dirawat

Campuran HTML + JavaScript akan menyulitkan struktur aplikasi.

Contoh Interaksi Klik Sederhana

Contoh paling dasar:

<button onclick="sayHello()">Klik</button>

<script>
    function sayHello() {
        alert("Halo dari onclick!");
    }
</script>Code language: HTML, XML (xml)

Atau versi property handler:

<button id="btn">Klik</button>

<script>
    const btn = document.getElementById("btn");
    btn.onclick = function() {
        alert("Hello world!");
    };
</script>Code language: HTML, XML (xml)

Studi Kasus: Tombol Mengubah Teks

Contoh sederhana yang sering muncul dalam tutorial JavaScript:

<html>
<head>
    <title>Contoh onclick</title>
</head>
<body>
    <p id="text">Teks awal</p>
    <button id="btn">Ubah Teks</button>

    <script>
        const text = document.getElementById("text");
        const btn = document.getElementById("btn");

        btn.onclick = function() {
            text.textContent = "Teks berhasil diubah!";
        };
    </script>
</body>
</html>Code language: HTML, XML (xml)

Alur kerjanya:

• User mengklik tombol
• Event onclick aktif
• Handler dijalankan
• JavaScript mengubah konten paragraf

Ini adalah contoh pertama yang sangat tepat bagi pemula untuk memahami interaksi antara event & DOM.

Penggunaan onsubmit JavaScript untuk Form

Event onsubmit adalah salah satu event paling penting dalam JavaScript ketika kita bekerja dengan form HTML. Event ini dipicu saat pengguna menekan tombol submit pada sebuah form, baik melalui tombol <button> maupun dengan menekan Enter di input text. Bagian ini akan membahas pengertian onsubmit, kapan harus menggunakannya, cara membuat validasi, penggunaan preventDefault(), dan studi kasus praktis validasi form yang sering digunakan di dunia nyata.

1. Pengertian onsubmit

onsubmit adalah event yang dieksekusi ketika sebuah form HTML mencoba untuk dikirimkan. Tujuan utamanya adalah:

• Melakukan validasi data
• Mengecek apakah input sudah sesuai
• Menghentikan pengiriman form jika terjadi kesalahan
• Mengontrol alur pengiriman data ke server

Secara sederhana, onsubmit memungkinkan kamu menentukan logika apa yang harus dilakukan sebelum form benar-benar dikirim.

Contoh sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onSubmit JavaScript</title>
</head>
<body>
    <form onsubmit="return checkForm()">
        <input type="text" id="name">
        <button type="submit">Kirim</button>
    </form>

    <script>
        function checkForm() {
            alert("Form akan dikirim");
            return false;
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

Jika fungsi mengembalikan false, form tidak akan dikirim.

2. Kapan Menggunakan onsubmit

Event onsubmit digunakan ketika:

• Kamu ingin melakukan validasi form sebelum submit
• Kamu ingin mencegah form terkirim jika terjadi kesalahan input
• Kamu membutuhkan kontrol penuh terhadap perilaku form
• Kamu membuat form yang mengirim data via:
  • HTTP biasa (post/get)
  • AJAX
  • Fetch API

onsubmit bekerja lebih baik dibandingkan onclick pada tombol submit, karena:

• Form bisa dikirim tanpa menekan tombol (misal tekan Enter), sehingga tombol tidak selalu memicu event onclick
• Validasi tetap dipastikan berjalan
• Logika lebih konsisten dan aman

3. Validasi Form Sederhana

Contoh validasi nama yang harus diisi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onSubmit Form Validation</title>
</head>
<body>
    
    <form id="myForm">
        <input type="text" id="name" placeholder="Nama">
        <button type="submit">Submit</button>
    </form>

    <script>
        const form = document.getElementById("myForm");

        form.onsubmit = function() {
            const name = document.getElementById("name").value;

            if (name.trim() === "") {
                alert("Nama wajib diisi!");
                return false; // menghentikan submit
            }

            alert("Form valid dan siap dikirim!");
            return true;
        };
    </script>

</body>
</html>Code language: HTML, XML (xml)

Catatan penting:

• return false = form tidak jadi terkirim
• return true = submit dilanjutkan

4. Prevent Default dan Kenapa Penting

Jika kamu menggunakan addEventListener(), maka menghentikan submit tidak bisa menggunakan return false.

Kamu harus menggunakan:

event.preventDefault();Code language: CSS (css)

Fungsi ini sangat penting karena:

• Mencegah page reload otomatis
• Memberi kamu waktu untuk menjalankan logika validasi
• Memungkinkan kamu mengirim data menggunakan AJAX / Fetch API
• Sangat diperlukan dalam aplikasi modern (SPA)

Contoh penggunaan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onSubmit Login Validation</title>
</head>
<body>
    
    <form id="loginForm">
        <input type="text" id="username">
        <button type="submit">Login</button>
    </form>

    <script>
        const form = document.getElementById("loginForm");

        form.addEventListener("submit", function(event) {
            event.preventDefault(); // wajib saat memakai addEventListener

            const username = document.getElementById("username").value;

            if (username.trim() === "") {
                alert("Username wajib diisi!");
                return;
            }

            alert("Login berhasil!");
        });
    </script>


</body>
</html>Code language: HTML, XML (xml)

5. Studi Kasus: Validasi Email / Username

Berikut contoh lengkap validasi email menggunakan regex sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onSubmit Email & Username Validation</title>
</head>
<body>
    <form id="regForm">
        <input type="email" id="email" placeholder="Email">
        <input type="text" id="username" placeholder="Username">
        <button type="submit">Daftar</button>
    </form>

    <script>
        const form = document.getElementById("regForm");

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

            const email = document.getElementById("email").value;
            const username = document.getElementById("username").value;

            // Regex email sederhana
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailPattern.test(email)) {
                alert("Format email tidak valid!");
                return;
            }

            if (username.length < 4) {
                alert("Username minimal 4 karakter");
                return;
            }

            alert("Pendaftaran berhasil!");
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

Apa yang dipelajari dari studi kasus ini?

• Form dicegah untuk terkirim jika tidak valid
• Email harus cocok dengan regex
• Username harus panjang minimal tertentu
• Setelah valid → submit bisa dilakukan via AJAX / Fetch atau proses lain

addEventListener: Cara Modern Menangani Event

Bagian ini membahas konsep addEventListener, sebuah metode modern yang menjadi standar utama dalam event handling JavaScript. Jika sebelumnya Anda menggunakan onclick atau onsubmit, di bagian ini Anda akan memahami mengapa developer modern lebih memilih addEventListener() dalam berbagai skenario pembuatan web interaktif.

1. Pengertian addEventListener

addEventListener() adalah metode JavaScript untuk memasang event listener pada elemen HTML tanpa harus mencampurkan kode JavaScript ke dalam HTML secara langsung. Metode ini memungkinkan penanganan event dilakukan dengan lebih fleksibel, terstruktur, dan sesuai praktik terbaik JavaScript modern.

Dengan addEventListener(), Anda dapat:

• Menangani banyak event pada satu elemen
• Memisahkan JavaScript dari HTML (clean code)
• Mengontrol perilaku event seperti capturing atau bubbling
• Menghapus event listener dengan removeEventListener() bila diperlukan

2. Keunggulan addEventListener Dibanding onclick

Berikut ini adalah tabel perbandingan antara addEventListener() dan onclick:

Metode	Kelebihan	Kekurangan
onclick	mudah digunakan untuk pemula	hanya bisa satu handler; bercampur dengan HTML; sulit dikelola
addEventListener	dapat banyak handler, clean code, scalable, mendukung opsi lanjutan	sedikit lebih panjang penulisannya

Beberapa keunggulan utama addEventListener():

• Mendukung banyak listener pada elemen yang sama
  (onclick hanya memungkinkan 1 handler; handler baru akan menimpa handler lama)
• Tidak mengubah atribut HTL sehingga HTML tetap bersih
• Mendukung third parameter opsional seperti capture, once, dan passive
• Memudahkan modularisasi kode

3. Sintaks Lengkap + Parameter Opsional

element.addEventListener(eventType, eventHandler, options);Code language: CSS (css)

Penjelasan parameter:

• eventType
  Jenis event, misalnya “click”, “submit”, “mouseover”, “input”, dan lain-lain.

• eventHandler
  Fungsi yang akan dijalankan saat event terjadi.

• options (opsional)
  Objek konfigurasi dengan beberapa properti:

• capture: true/false → untuk event capturing

• once: true/false → event hanya dipanggil sekali

• passive: true/false → memberi tahu browser bahwa handler tidak akan memanggil preventDefault()

Contoh dengan opsi:

button.addEventListener(
    "click",
    () => {
        console.log("Diklik satu kali saja!");
    },
    { once: true }
);Code language: JavaScript (javascript)

4. Menangani Banyak Event Sekaligus

Keunggulan utama addEventListener() adalah fleksibilitasnya untuk memasang beberapa event pada elemen yang sama.

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

box.addEventListener("mouseenter", () => {
    box.style.background = "lightblue";
});

box.addEventListener("mouseleave", () => {
    box.style.background = "white";
});

box.addEventListener("click", () => {
    alert("Box diklik!");
});Code language: PHP (php)

Satu elemen bisa memiliki beberapa event handling tanpa saling menimpa, sesuatu yang tidak bisa dilakukan dengan onclick inline.

5. Studi Kasus Praktis addEventListener

Berikut beberapa contoh penggunaan addEventListener() untuk konteks nyata di aplikasi web.

Event Klik (Click Event)

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

btn.addEventListener("click", () => {
    document.getElementById("status").innerText = "Tombol berhasil diklik!";
});Code language: JavaScript (javascript)

Penjelasan:

Ketika tombol ditekan, teks pada elemen #status diperbarui. Ini adalah contoh dasar namun sangat umum digunakan di semua aplikasi web.

Event Hover (Mouseover / Mouseenter)

const card = document.querySelector(".card");

card.addEventListener("mouseover", () => {
    card.classList.add("highlight");
});

card.addEventListener("mouseout", () => {
    card.classList.remove("highlight");
});Code language: PHP (php)

Penjelasan:

Efek hover seperti ini banyak dipakai pada UI modern seperti kartu produk, tombol, menu navigasi, dan elemen interaktif lainnya.

Event Input (Input / Change Event)

const input = document.getElementById("username");
const preview = document.getElementById("preview");

input.addEventListener("input", () => {
    preview.textContent = `Username: ${input.value}`;
});Code language: JavaScript (javascript)

Penjelasan:

Event input sangat berguna untuk membuat fitur “live preview” atau menampilkan validasi secara langsung.

Perbedaan onclick vs addEventListener

Pada bagian ini, Anda akan mempelajari perbedaan mendasar antara onclick dan addEventListener, dua metode paling umum dalam event handling JavaScript. Meskipun keduanya sama-sama dapat menjalankan fungsi saat terjadi event, cara kerja, fleksibilitas, dan praktik penggunaannya sangat berbeda. Pemahaman bagian ini sangat penting terutama bagi pemula yang ingin menulis kode dengan standar modern dan scalable.

1. Tabel Perbandingan onclick vs addEventListener

Aspek	onclick	addEventListener
Penulisan	singkat, bisa inline di HTML	selalu ditulis di JavaScript
Jumlah handler per elemen	hanya 1, saling menimpa	bisa banyak tanpa konflik
Pemeliharaan kode (maintainability)	kurang rapi, sulit dikelola	sangat rapi, mudah diorganisir
Fleksibilitas	terbatas	sangat fleksibel, bisa menangani banyak event
Mendukung opsi lanjutan	tidak mendukung	mendukung once, capture, passive
Best practice developer modern	kurang direkomendasikan	sepenuhnya direkomendasikan
HTML & JS terpisah?	tidak, rentan inline script	ya, HTML tetap bersih
Bisa dihapus event-nya?	sulit	mudah dengan removeEventListener()

2. Kapan Memakai onclick

Walaupun dianggap kuno, onclick tetap memiliki tempat dalam beberapa situasi.

Gunakan onclick jika:

• Anda sedang belajar dasar JavaScript dan butuh cara cepat mencoba fungsi klik.
• Pekerjaan sangat kecil dan tidak butuh banyak handler.
• Anda hanya membuat demo, eksperimen, atau prototype cepat.
• Anda sedang mengerjakan proyek lama (legacy code) yang memang masih memakai inline event handler.

Contoh kasus cocok memakai onclick:

• Tombol sederhana untuk alert
• Demo pembelajaran untuk anak-anak atau pelajar dasar
• Project HTML statis tanpa script modular

Namun, untuk jangka panjang — onclick rawan menimbulkan masalah, terutama jika aplikasi makin berkembang.

3. Kapan Wajib Menggunakan addEventListener

Gunakan addEventListener pada hampir semua situasi modern, terutama jika:

• Anda membuat web aplikasi profesional.
• Elemen membutuhkan lebih dari satu event handler.
• Anda ingin kode tetap bersih dan terstruktur.
• Anda menggunakan fitur modern seperti capturing, once, atau passive event.
• Aplikasi besar seperti dashboard, marketplace, atau SPA.
• Anda bekerja dengan tim — karena addEventListener() adalah standar industri.

Penerapannya juga ideal untuk:

• Dynamic UI (element muncul lewat JavaScript)
• Event complex seperti keyboard, drag, touch
• Modular JavaScript (ES Modules, bundler, React, Vue, dsb.)

Jika Anda ingin web interaktif yang scalable, addEventListener() adalah pilihan mutlak.

4. Contoh Kode Perbandingan

Menggunakan onclick (versi lama)

Inline HTML (buruk untuk SEO & maintainability)

<button onclick="changeText()">Klik Saya</button>
<p id="text">Teks awal</p>

<script>
   function changeText() {
       document.getElementById("text").innerText = "Teks sudah berubah!";
   }
</script>Code language: HTML, XML (xml)

Property JavaScript (lebih baik, tapi tetap terbatas)

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

btn.onclick = function () {
    console.log("Tombol diklik!");
};Code language: JavaScript (javascript)

Masalah utama onclick:

Jika Anda menambahkan handler kedua, handler pertama hilang.

btn.onclick = function () {
    console.log("Handler pertama");
};

btn.onclick = function () {
    console.log("Handler kedua"); // menimpa handler pertama
};Code language: JavaScript (javascript)

Menggunakan addEventListener (versi modern & direkomendasikan)

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

btn.addEventListener("click", () => {
    console.log("Handler pertama");
});

btn.addEventListener("click", () => {
    console.log("Handler kedua");
});Code language: JavaScript (javascript)

Hasil:

Kedua handler berjalan tanpa konflik.

Inilah salah satu keunggulan terbesar addEventListener().

5. Penjelasan Best Practice Modern

Berikut prinsip penting yang disarankan oleh hampir semua standar modern JavaScript:

Pisahkan JavaScript dari HTML

Menghindari inline event seperti onclick="..." membuat HTML lebih bersih dan mudah dipelihara.

Gunakan addEventListener untuk semua event

Karena:

• Tidak saling menimpa
• Kompatibel untuk semua jenis event (mouse, keyboard, form, window)
• Dapat dikontrol dengan opsi tambahan

Gunakan opsi once bila event hanya boleh berjalan sekali

Contoh: event pengiriman form, notifikasi awal, atau pop-up.

Jangan tambahkan terlalu banyak listener pada document

Untuk kasus interaksi besar, gunakan event delegation agar lebih efisien.

Gunakan removeEventListener bila perlu

Sangat penting untuk aplikasi besar agar tidak terjadi memory leak.

Perbedaan antara onclick dan addEventListener bukan hanya soal gaya penulisan, tapi terkait fleksibilitas, skalabilitas, dan standar industri.

onclick hanya cocok untuk hal kecil dan pembelajaran dasar.

addEventListener adalah metode wajib untuk aplikasi modern, karena mendukung lebih banyak fitur, lebih rapi, dan lebih aman untuk jangka panjang.

Jenis Event JavaScript yang Wajib Dipahami

Event adalah salah satu fondasi terpenting dalam JavaScript karena hampir semua interaksi pengguna terjadi melalui event. Mulai dari mengklik tombol, mengetik, mengirim form, sampai menggulir halaman, semuanya memicu event. Pada bagian ini, kita akan mengulas jenis-jenis event JavaScript yang paling umum dan wajib dipahami oleh pemula maupun developer tingkat lanjut. Setiap kategori disertai contoh kode supaya pembelajaran lebih praktis dan mudah diikuti.

1. Event Mouse

Event mouse adalah event yang paling sering digunakan dalam membangun interaksi pada elemen HTML. Event ini dipicu ketika pengguna melakukan aksi menggunakan mouse atau trackpad.

Jenis event mouse yang umum:

• click — ketika elemen diklik sekali.
• dblclick — ketika elemen diklik dua kali (double click).
• mouseenter — ketika kursor masuk ke area elemen.
• mouseleave — ketika kursor keluar dari elemen.
• mousemove — ketika kursor bergerak di dalam elemen.
• contextmenu — klik kanan mouse.
• wheel — saat pengguna menggulir menggunakan scroll wheel.

Contoh kode event mouse:

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

box.addEventListener("mouseenter", () => {
    box.style.background = "lightblue";
});

box.addEventListener("mouseleave", () => {
    box.style.background = "white";
});

box.addEventListener("click", () => {
    alert("Box diklik!");
});Code language: PHP (php)

Penjelasan:

Event di atas menunjukkan bagaimana sebuah elemen dapat merespon berbagai aksi mouse — dari hover hingga klik — untuk membuat UI yang lebih interaktif.

2. Event Keyboard

Event keyboard digunakan saat ingin mendeteksi input dari keyboard. Jenis event ini sangat penting terutama ketika Anda membuat fitur pencarian, input form, navigasi keyboard, atau game berbasis JavaScript.

Jenis event keyboard:

• keydown — ditekan (langsung terpicu pada tekanan pertama).
• keyup — dilepas.
• keypress — terpicu saat karakter “dapat dicetak” dimasukkan (deprecated, tidak disarankan lagi).

Contoh kode event keyboard:

document.addEventListener("keydown", (event) => {
    console.log("Tombol ditekan:", event.key);
});

document.addEventListener("keyup", (event) => {
    console.log("Tombol dilepas:", event.key);
});Code language: JavaScript (javascript)

Catatan:

keypress sudah tidak direkomendasikan pada browser modern karena tidak konsisten hasilnya. Gunakan keydown atau keyup.

3. Event Form

Event form sangat penting dalam proses validasi input dan pengolahan data sebelum dikirimkan ke server. Event ini berhubungan langsung dengan interaksi pengguna terhadap elemen seperti input, textarea, checkbox, atau form itu sendiri.

Jenis event form yang penting:

• submit — ketika form dikirim.
• change — ketika nilai input berubah (dan elemen kehilangan fokus).
• input — ketika nilai input berubah secara langsung (tiap karakter).

Contoh event form:

const form = document.getElementById("myForm");
const username = document.getElementById("username");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // mencegah reload
    console.log("Form dikirim:", username.value);
});

username.addEventListener("input", () => {
    console.log("Sedang mengetik:", username.value);
});Code language: JavaScript (javascript)

Penjelasan:

• submit selalu digunakan dengan event.preventDefault() agar kita bisa mengontrol proses sebelum dikirimkan ke server.
• input cocok untuk fitur real-time seperti live preview atau validasi langsung.

4. Event Window

Event window terkait dengan aktivitas pada level jendela browser (window), seperti ketika halaman selesai dimuat, ukuran jendela berubah, atau saat pengguna menggulir halaman.

Jenis event window yang umum:

• load — seluruh konten halaman selesai dimuat (gambar, CSS, skrip).
• scroll — saat pengguna menggulir halaman.
• resize — ketika ukuran jendela berubah.
• beforeunload — ketika pengguna hendak menutup halaman (digunakan hati-hati).

Contoh event window:

window.addEventListener("load", () => {
    console.log("Halaman selesai dimuat!");
});

window.addEventListener("scroll", () => {
    console.log("Kamu menggulir halaman:", window.scrollY);
});

window.addEventListener("resize", () => {
    console.log("Ukuran window berubah:", window.innerWidth);
});Code language: JavaScript (javascript)

Penjelasan:

Event window banyak digunakan untuk keperluan seperti lazy loading, sticky header, animasi saat scroll, atau responsive behavior.

Jenis event di JavaScript sangat beragam, namun empat kategori utama — mouse, keyboard, form, dan window — adalah yang paling sering digunakan dan wajib dipahami oleh pemula. Dengan memahami event-event dasar ini, Anda sudah bisa membuat interaksi yang kaya dan responsif di halaman web.

Event Bubbling dan Event Capturing

Ketika belajar event handling di JavaScript, salah satu konsep paling penting untuk dipahami adalah event bubbling dan event capturing. Dua mekanisme ini menjelaskan bagaimana sebuah event “bergerak” melalui struktur DOM ketika dipicu oleh pengguna. Memahami alurnya sangat penting agar kode kita tidak menghasilkan perilaku yang membingungkan, terutama ketika bekerja dengan elemen HTML yang bersarang (nested elements).

Pada bagian ini kita akan mempelajari perbedaan bubbling dan capturing, melihat contoh ilustrasi sederhana, mempelajari cara menghentikan alur event menggunakan stopPropagation(), serta memahami studi kasus klik pada elemen bertumpuk.

1. Pengertian Event Bubbling

Event bubbling adalah mekanisme ketika sebuah event terjadi pada elemen terdalam, lalu “naik ke atas” menuju elemen induk, induk dari induk, dan seterusnya hingga mencapai document.

Cara kerjanya:

Ketika kita klik elemen child, event akan mengalir seperti ini:

child → parent → grandparent → documentCode language: JavaScript (javascript)

Ini adalah mode default event pada browser modern.

Ilustrasi sederhana:

<div id="parent">
    <button id="child">Klik Saya</button>
</div>Code language: HTML, XML (xml)

Jika Anda menambahkan event listener:

document.getElementById("child").addEventListener("click", () => {
    console.log("Child diklik");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent terpanggil karena bubbling");
});Code language: JavaScript (javascript)

Ketika tombol diklik, output-nya:

Child diklik
Parent terpanggil karena bubblingCode language: PHP (php)

Karena event pada child naik ke parent.

2. Pengertian Event Capturing

Jika bubbling bergerak dari bawah ke atas, maka capturing adalah kebalikannya: event bergerak dari elemen paling luar menuju elemen terdalam.

Alurnya:

document → grandparent → parent → childCode language: JavaScript (javascript)

Capturing tidak aktif secara default, tetapi bisa digunakan ketika kita mengatur parameter useCapture = true atau menggunakan opsi { capture: true } pada addEventListener.

Contoh:

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent - capturing");
}, { capture: true });

document.getElementById("child").addEventListener("click", () => {
    console.log("Child diklik");
});Code language: JavaScript (javascript)

Output urutan:

Parent - capturing
Child diklik
Code language: PHP (php)

3. Contoh Perbedaan dengan Ilustrasi

Untuk memudahkan pemahaman, bayangkan event sebagai gelembung air:

Event Bubbling

• Event muncul di elemen paling dalam (anak)
• Lalu naik seperti gelembung
• Akhirnya mencapai permukaan (document)

Event Capturing

• Event dimulai dari permukaan
• Turun melewati lapisan-lapisan
• Hingga mencapai elemen paling dalam

Keduanya terjadi sebelum event handler dijalankan pada tahap target (elemen yang benar-benar diklik).

4. Menghentikan Alur Event dengan stopPropagation()

Kadang kita ingin event pada elemen anak tidak diteruskan ke parent. Solusinya: gunakan event.stopPropagation().

Contoh kode:

child.addEventListener("click", (event) => {
    console.log("Klik child saja");
    event.stopPropagation();
});

parent.addEventListener("click", () => {
    console.log("Parent tidak akan terpanggil");
});Code language: PHP (php)

Hasil:

Klik child saja

Event berhenti pada anak dan tidak lagi naik ke parent.

5. Studi Kasus: Klik pada Elemen Nested

Misal kita punya card yang di dalamnya ada tombol. Kita ingin:

• Klik tombol → menjalankan aksi tombol saja
• Klik card → menjalankan aksi card
• Keduanya jangan saling memicu

HTML:

<div id="card">
    <button id="btn">Klik Tombol</button>
</div>Code language: HTML, XML (xml)

JavaScript:

document.getElementById("card").addEventListener("click", () => {
    console.log("Card diklik");
});

document.getElementById("btn").addEventListener("click", (event) => {
    event.stopPropagation(); // penting!
    console.log("Tombol diklik");
});
Code language: JavaScript (javascript)

Hasil ketika tombol ditekan:

Tombol diklik

Hasil ketika card diklik:

Card diklik

Inilah contoh nyata mengapa memahami bubbling dan capturing sangat penting — terutama pada desain UI yang rumit, seperti dropdown, modal, dan komponen interaktif lainnya.

Event Object: Properti Penting yang Sering Dipakai

Setiap kali sebuah event terjadi di JavaScript—baik itu klik, input, submit, scroll, atau keydown—browser sebenarnya mengirimkan sebuah event object ke dalam event handler. Objek ini berisi banyak informasi penting tentang apa yang terjadi, di elemen mana, kapan, dan bagaimana event dipicu.

Memahami event object sangat penting karena inilah cara kita mengakses data interaksi pengguna secara real-time. Pada bagian ini, kita akan membahas properti-properti yang paling sering digunakan dan sangat berguna dalam pengembangan web interaktif.

1. e.target dan e.currentTarget

Kedua properti ini sering membingungkan pemula, padahal memiliki peran berbeda:

e.target

• Elemen yang benar-benar memicu event.
• Digunakan ketika kita ingin tahu elemen apa yang diklik, bukan siapa yang dipasang event listener.

e.currentTarget

• Elemen yang sedang menjalankan event listener.
• Bisa berbeda dengan e.target jika event terjadi karena bubbling.

Contoh ilustrasi:

<div id="wrapper">
    <button id="btn">Klik Saya</button>
</div>Code language: HTML, XML (xml)

JavaScript:

document.getElementById("wrapper").addEventListener("click", (e) => {
    console.log("target:", e.target);
    console.log("currentTarget:", e.currentTarget);
});Code language: JavaScript (javascript)

Output:

target: <button id="btn">Klik Saya</button>
currentTarget: <div id="wrapper"></div>Code language: HTML, XML (xml)

Jika tombol diklik:

• target: <button id="btn">
• currentTarget: <div id="wrapper">

Karena event listener dipasang di wrapper, tapi elemen yang diklik adalah tombol.

2. e.preventDefault()

Digunakan untuk mencegah aksi default dari browser.

Beberapa contoh aksi default:

• link <a> membuka halaman baru
• submit form me-refresh halaman
• klik kanan membuka menu context
• drag & drop menampilkan file

Contoh penggunaan:

form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("Form dicegah dari submit default.");
});Code language: JavaScript (javascript)

Ini sangat penting untuk validasi form dan interaksi modern berbasis JavaScript.

3. e.stopPropagation()

Digunakan untuk menghentikan event agar tidak bubbling atau capturing ke elemen lain.

Sangat berguna jika kita punya elemen nested yang memiliki event masing-masing.

button.addEventListener("click", (e) => {
    e.stopPropagation();
    console.log("Klik tombol saja!");
});Code language: JavaScript (javascript)

Jika tidak dihentikan, event bisa memicu handler dari elemen parent, menimbulkan aksi yang tidak diinginkan.

4. Koordinat Mouse: e.clientX & e.clientY

Properti ini digunakan untuk mendapatkan posisi pointer saat event mouse terjadi.

• e.clientX → posisi horizontal (sumbu X)
• e.clientY → posisi vertikal (sumbu Y)

Dipakai untuk:

• tooltip dinamis
• drag & drop
• interaksi permainan
• animasi berdasarkan posisi mouse

Contoh:

document.addEventListener("click", (e) => {
    console.log("X:", e.clientX, "Y:", e.clientY);
});Code language: JavaScript (javascript)

Ketika user mengklik layar, koordinatnya langsung muncul.

5. Nilai Input: e.target.value

Cara paling umum untuk membaca nilai dari input form.

Contoh:

document.getElementById("username").addEventListener("input", (e) => {
    console.log("Nilai input:", e.target.value);
});Code language: JavaScript (javascript)

Cocok untuk:

• live validation
• pencarian otomatis (live search)
• form interaktif

6. Contoh Kode Interaktif (Lengkap)

Berikut kombinasi properti event object dalam satu contoh praktis.

HTML:

<input id="textInput" placeholder="Ketik sesuatu...">
<div id="area" style="width:200px;height:200px;background:#eee;margin-top:10px;"></div>Code language: HTML, XML (xml)

JavaScript:

document.getElementById("textInput").addEventListener("input", (e) => {
    console.log("Input berubah:", e.target.value);
});

document.getElementById("area").addEventListener("click", (e) => {
    console.log("Klik area pada posisi:", e.clientX, e.clientY);
    console.log("target:", e.target);
    console.log("currentTarget:", e.currentTarget);
});Code language: JavaScript (javascript)

Hasil Interaksi:

• Ketik di input → menampilkan nilai input terbaru
• Klik area → menampilkan posisi klik dan target elemen

Dengan ini, pemula akan lebih memahami cara kerja event object dalam berbagai skenario dunia nyata.

Optimasi Event Handling

Optimasi event handling sangat penting dalam membangun aplikasi web modern. JavaScript event yang tidak diatur dengan baik dapat menyebabkan penurunan performa, lag saat scroll, konsumsi memori meningkat, bahkan freeze pada browser jika listener terlalu banyak atau terlalu sering dipanggil. Pada bagian ini, kamu akan mempelajari berbagai teknik optimasi populer seperti event delegation, throttling, debouncing, serta penghapusan event listener yang tidak dibutuhkan lagi.

Tujuan utamanya adalah memastikan bahwa aplikasi tetap ringan, responsif, dan efisien, terutama untuk halaman dengan interaksi yang padat.

1. Event Delegation dan Manfaatnya

Apa itu Event Delegation?

Event delegation adalah teknik menangani event dari banyak elemen dengan hanya memasang listener pada satu elemen induk (parent), bukan pada tiap elemen anak. Teknik ini memanfaatkan mekanisme event bubbling—di mana event bergerak dari elemen terdalam naik ke luar.

Manfaat Event Delegation

• Mengurangi jumlah event listener, sehingga performa lebih stabil
• Cocok untuk elemen dinamis (elemen yang ditambahkan setelah halaman dimuat)
• Lebih mudah di-maintain karena semua event ditangani di satu tempat
• Mencegah memory leak akibat listener yang bertumpuk

Contoh Kode Event Delegation

document.querySelector('#list').addEventListener('click', function (e) {
    if (e.target.classList.contains('item')) {
        console.log('Anda mengklik:', e.target.textContent);
    }
});Code language: JavaScript (javascript)

Dengan teknik ini, kamu tidak perlu memasang listener pada setiap .item.

2. Throttling & Debouncing (Konsep + Penjelasan Sederhana)

Dua teknik optimasi penting yang digunakan untuk event yang sering dipicu berulang, seperti:

• scroll
• resize
• keyup / keydown
• mousemove
• mencari data real-time

Throttling

Throttling membatasi agar function hanya berjalan setiap interval tertentu, meskipun event dipicu banyak kali.

Analogi:

Seperti membatasi seseorang menjawab telepon hanya sekali per detik meskipun telepon berdering berkali-kali.

Kapan digunakan:

Event scroll, resize — yang intens dan bisa memicu ratusan event per detik.

Contoh Throttling

function throttle(callback, delay) {
    let timeout = false;

    return function () {
        if (!timeout) {
            callback();
            timeout = true;
            setTimeout(() => timeout = false, delay);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event dijalankan');
}, 200));Code language: JavaScript (javascript)

Debouncing

Debouncing memastikan function baru berjalan setelah user berhenti memicu event dalam waktu tertentu.

Analogi:

Seperti menunggu seseorang berhenti mengetik selama 500ms sebelum mengirim pesan.

Kapan digunakan:

• Pencarian otomatis (autocomplete)
• Input form
• Resize window

Contoh Debouncing

function debounce(callback, delay) {
    let timer;

    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => callback(), delay);
    };
}

document.querySelector('#search').addEventListener('input', debounce(() => {
    console.log('Mencari data...');
}, 300));Code language: JavaScript (javascript)

3. Menghapus Event Listener yang Tidak Diperlukan

Event listener yang tidak dilepas dapat menyebabkan:

• memory leak
• event dipanggil berulang kali
• penurunan performa

Gunakan removeEventListener() untuk menghapusnya.

Contoh:

function sayHello() {
    console.log('Hello!');
    button.removeEventListener('click', sayHello);
}

const button = document.querySelector('#btn');
button.addEventListener('click', sayHello);Code language: JavaScript (javascript)

Listener akan dijalankan satu kali, lalu dilepas otomatis.

4. Efisiensi Interaksi DOM

Optimasi event sangat bergantung pada bagaimana kamu mengelola DOM. Beberapa tips efisiensi:

Minimalkan Reflow & Repaint

Akses DOM dalam jumlah besar bisa menurunkan performa.

Cache elemen dahulu:

const box = document.querySelector('.box');
// gunakan `box` berkali-kali tanpa query ulangCode language: JavaScript (javascript)

Gunakan Passive Listener

Passive listener mempercepat event seperti scroll.

window.addEventListener('scroll', handler, { passive: true });Code language: JavaScript (javascript)

Batasi Listener di Global Scope

Gunakan event delegation daripada memasang listener pada banyak elemen.

5. Studi Kasus: Scroll & Resize Event

Event scroll dan resize adalah event paling berat di browser karena bisa dipanggil ratusan kali per detik.

Kasus 1: Menampilkan Posisi Scroll

Tanpa optimasi (buruk):

window.addEventListener('scroll', () => {
    console.log('scroll berjalan...');
});Code language: JavaScript (javascript)

Ini akan memicu log setiap pixel user bergerak.

Dengan Throttling (lebih efisien):

window.addEventListener('scroll', throttle(() => {
    console.log('scroll (di-throttle)...');
}, 200));Code language: JavaScript (javascript)

Kasus 2: Resize Window

window.addEventListener('resize', debounce(() => {
    console.log('resize selesai');
}, 300));Code language: JavaScript (javascript)

Hasilnya:

• Halaman lebih ringan
• CPU usage menurun
• Tidak lag saat user scroll panjang

Kesimpulan

Menguasai event handling JavaScript memberikan banyak manfaat nyata:

• Membuat aplikasi web jauh lebih interaktif, responsif, dan user-friendly
• Memahami cara kerja website secara teknis pada level browser
• Meningkatkan kualitas kode karena tahu kapan harus menggunakan onclick, kapan memakai addEventListener
• Menambah kemampuan debugging karena tahu cara membaca event object
• Mengoptimalkan kinerja web dengan teknik modern seperti delegation, throttling, dan debouncing

Dengan dasar yang kuat, kamu dapat membangun fitur interaktif dari yang paling sederhana hingga yang kompleks seperti drag & drop, pencarian real-time, dynamic form, dan SPA modern.