Programming Fundamental 15

5.2 Event Listeners

5.2.1 Apa itu Event Listeners

Agar halaman web tidak hanya menampilkan informasi secara statis tetapi juga mampu bereaksi terhadap tindakan pengguna, JavaScript menggunakan mekanisme yang disebut Event Listeners. Event listeners memungkinkan kode JavaScript “mendengarkan” berbagai aksi pengguna, seperti klik pada tombol, mengetik pada form, menggerakkan kursor (hover), atau mengirimkan form (submit).

Dengan memahami dan mengimplementasikan event listeners, Anda dapat membuat halaman web yang dinamis dan responsif, di mana setiap interaksi pengguna menghasilkan perubahan visual, pemrosesan data, atau aksi tertentu yang meningkatkan pengalaman pengguna.

Event listeners juga menjadi fondasi penting sebelum mempelajari manipulasi elemen lanjutan, validasi form, atau pengembangan aplikasi web interaktif, karena hampir semua interaksi pengguna bergantung pada kemampuan halaman web untuk merespons event secara tepat dan efisien.

5.2.2 Tipe Data dalam Javascript

Agar halaman web dapat merespons interaksi pengguna secara tepat, penting untuk memahami berbagai jenis event yang didukung JavaScript. Setiap event mewakili aksi tertentu yang dilakukan pengguna atau kondisi halaman, sehingga memungkinkan pengembang mengeksekusi kode spesifik saat event tersebut terjadi.

Beberapa kategori event yang umum digunakan antara lain:

• Mouse Events: Mengatur interaksi dengan mouse, seperti klik (click), klik ganda (dblclick), menekan tombol mouse (mousedown), melepas tombol (mouseup), pergerakan mouse (mousemove), kursor melewati elemen (mouseover), dan kursor keluar dari elemen (mouseout).
• Keyboard Events: Menangani input dari keyboard, seperti menekan tombol (keydown), melepas tombol (keyup), atau mengetik karakter (keypress).
• Form Events: Mengontrol aksi pada form, seperti mengirim form (submit), mengubah nilai input (change), memasukkan data (input), atau fokus dan keluar dari input (focus, blur).
• Window Events: Menangani kejadian pada jendela browser, seperti saat halaman dimuat (load), ukuran jendela berubah (resize), halaman digulir (scroll), atau halaman ditutup (unload).

Dengan memahami jenis-jenis event ini, Anda dapat memilih event yang paling tepat untuk kebutuhan aplikasi, sehingga interaksi pengguna dapat ditangani secara efisien, aman, dan sesuai konteks. Pengetahuan ini menjadi fondasi untuk membangun fitur interaktif yang kompleks, seperti validasi form real-time, animasi responsif, dan aplikasi web yang adaptif terhadap tindakan pengguna.

5.2.3 Event Bubbling dan Capturing

// Event Bubbling (default)

            element.addEventListener("click", handler, false);

            // Event Capturing

            element.addEventListener("click", handler, true);

            // Stop propagation

            element.addEventListener("click", function (event) {

            event.stopPropagation(); // Menghentikan event bubbling

            });

Dalam pengembangan web interaktif, sebuah aksi pengguna pada elemen tertentu tidak hanya mempengaruhi elemen tersebut, tetapi juga dapat memicu reaksi pada elemen-elemen induknya atau sebaliknya. Mekanisme ini dikenal sebagai Event Bubbling dan Event Capturing, yang merupakan konsep penting dalam manajemen event pada JavaScript.

• Event Bubbling (default): Event dimulai dari elemen terdalam (child) tempat aksi terjadi, kemudian “menggelembung” naik ke elemen induk (parent), hingga mencapai root. Ini adalah perilaku default ketika menambahkan event listener.
• Event Capturing: Event dimulai dari elemen terluar (parent) dan bergerak ke elemen terdalam (child), memungkinkan elemen induk menangani event sebelum elemen target.
• stopPropagation(): Digunakan untuk menghentikan pergerakan event, baik dari bubbling maupun capturing, sehingga event tidak memicu handler pada elemen lain.

Memahami konsep ini sangat relevan untuk membangun interaktivitas yang kompleks, misalnya ketika beberapa elemen nested memiliki event listener yang berbeda. Dengan penguasaan bubbling dan capturing, Anda dapat mengontrol alur event dengan tepat, menghindari konflik antar handler, dan memastikan setiap aksi pengguna ditangani sesuai logika aplikasi.

5.2.4 Event Listeners Lanjutan

Setelah memahami konsep dasar Event Listeners dan jenis-jenis event, langkah berikutnya adalah mengimplementasikan event listener secara efektif dalam aplikasi web. Pemahaman ini memungkinkan Anda tidak hanya mendeteksi aksi pengguna, tetapi juga memanfaatkan informasi detail dari event dan mengelola lifecycle event listener secara tepat.

Event Listener Dasar

// Event click

            button.addEventListener("click", function () {

            console.log("Button diklik!");

            });

            // Event input (untuk form)

            input.addEventListener("input", function (event) {

            console.log("Input berubah:", event.target.value);

            });

            // Event submit (untuk form)

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

            event.preventDefault(); // Mencegah form submit default

            console.log("Form disubmit!");

            });

        

`addEventListener()` digunakan untuk menambahkan pendengar event pada elemen HTML, sehingga JavaScript dapat merespons aksi pengguna seperti klik, input, atau submit form.

• Parameter pertama menentukan jenis event yang ingin didengar, misalnya "click", "input", "submit", dan sebagainya.
• Parameter kedua adalah fungsi callback yang akan dijalankan saat event terjadi.

Selain itu, properti `event.preventDefault()` dapat digunakan di dalam fungsi callback untuk mencegah perilaku default browser, seperti pengiriman form secara otomatis atau tautan yang membuka halaman baru, sehingga Anda memiliki kontrol penuh terhadap aksi pengguna.

Event Object dan Properties

element.addEventListener("click", function (event) {

            console.log("Event type:", event.type);

            console.log("Target element:", event.target);

            console.log("Current target:", event.currentTarget);

            console.log("Mouse position:", event.clientX, event.clientY);

            });

        

Setiap event yang terjadi pada halaman web membawa informasi penting melalui objek event, yang dapat dimanfaatkan untuk menulis kode yang lebih responsif dan tepat sasaran. Beberapa properti utama objek event antara lain:

• event.type: Menunjukkan jenis event yang terjadi, misalnya "click", "input", atau "submit".
• event.target: Menunjukkan elemen yang memicu event, yaitu elemen yang secara langsung menerima aksi pengguna.
• event.currentTarget: Menunjukkan elemen yang memiliki event listener terpasang, yang mungkin berbeda dari elemen target jika event ditangani dalam konteks bubbling atau capturing.
• event.clientX / event.clientY: Menunjukkan posisi kursor mouse relatif terhadap viewport saat event terjadi, berguna untuk interaksi berbasis mouse.
• event.preventDefault(): Digunakan untuk mencegah perilaku default browser, seperti pengiriman form otomatis atau navigasi tautan.
• event.stopPropagation(): Digunakan untuk menghentikan pergerakan event melalui bubbling atau capturing, sehingga event tidak memicu listener pada elemen lain.

Dengan memahami properti-properti ini, Anda dapat menulis kode JavaScript yang lebih dinamis, terkontrol, dan aman, serta menciptakan interaksi pengguna yang lebih cerdas dan responsif.

Menghapus Event Listener

function handleClick() {

            console.log("Button diklik!");

            }

            // Menambah event listener

            button.addEventListener("click", handleClick);

            // Menghapus event listener

            button.removeEventListener("click", handleClick);

        

Saat menghapus event listener dengan `removeEventListener()`, terdapat beberapa hal penting yang perlu diperhatikan:

1. Fungsi Harus Sama Persis
   Fungsi yang digunakan untuk menghapus listener harus sama persis dengan fungsi yang awalnya ditambahkan. Jika berbeda, event listener tidak akan terhapus.
2. Anonymous Function Tidak Bisa Dihapus
   Event listener yang menggunakan anonymous function tidak dapat dihapus, karena tidak ada referensi yang bisa dipanggil kembali oleh `removeEventListener()`.
3. Simpan Referensi Fungsi
   Untuk memungkinkan penghapusan event listener di kemudian hari, selalu simpan referensi fungsi yang digunakan saat menambahkan listener. Hal ini memastikan pengelolaan event listener lebih efisien dan menghindari memory leaks atau konflik dalam aplikasi web.

Dengan memahami prinsip ini, Anda dapat mengelola event listener secara tepat, menjaga performa halaman, dan memastikan interaktivitas pengguna tetap berjalan sesuai rencana.

Pertanyaan Reflektif

• Mengapa memahami event bubbling dan capturing penting dalam pengembangan web interaktif dengan banyak elemen nested? Bagaimana hal ini dapat mempengaruhi pengalaman pengguna?
• Bagaimana perbedaan penggunaan event.target dan event.currentTarget dapat membantu Anda menulis kode yang lebih spesifik dan terkontrol dalam menangani event?
• Jika sebuah halaman web memiliki banyak event listener yang men-trigger fungsi berat, apa dampaknya terhadap performa? Bagaimana Anda dapat mengelola event listener agar lebih efisien?
• Dalam situasi di mana Anda harus menambahkan dan menghapus event listener secara dinamis, mengapa penting menyimpan referensi fungsi daripada menggunakan anonymous function?
• Bayangkan Anda membuat aplikasi To-Do List interaktif. Bagaimana Anda akan menggunakan kombinasi preventDefault() dan stopPropagation() untuk memastikan form tidak submit secara default, tetapi klik pada tombol tertentu tetap memicu perubahan yang diinginkan?

5.3 Form Validation

5.3.1 Apa itu Form Validation?

Dalam pengembangan aplikasi web, form sering digunakan untuk mengumpulkan data dari pengguna, seperti nama, email, atau informasi lainnya. Agar data yang diterima akurat, konsisten, dan aman, diperlukan mekanisme form validation.

Form validation adalah proses memeriksa dan memastikan bahwa data yang dimasukkan pengguna memenuhi aturan atau kriteria tertentu sebelum diproses lebih lanjut. Validasi dapat dilakukan di dua sisi:

• Client-side validation: Dilakukan di browser menggunakan JavaScript, sehingga pengguna mendapatkan umpan balik langsung tanpa harus mengirim data ke server.
• Server-side validation: Dilakukan di server, memastikan keamanan dan konsistensi data meskipun validasi sisi client dilewati atau dimanipulasi.

Dengan memahami dan menerapkan form validation secara tepat, Anda dapat meningkatkan kualitas data, mencegah kesalahan input, dan menciptakan pengalaman pengguna yang lebih aman dan nyaman.

5.3.2 Jenis Validation

Dalam praktik pengembangan web, form validation tidak hanya satu jenis, melainkan memiliki beberapa pendekatan yang disesuaikan dengan kebutuhan aplikasi dan pengalaman pengguna. Memahami jenis-jenis validasi ini penting agar Anda dapat memilih metode yang paling efektif dan relevan.

1. Client-side Validation
   Validasi dilakukan di browser menggunakan JavaScript, sehingga pengguna mendapatkan umpan balik secara langsung sebelum data dikirim ke server. Metode ini meningkatkan pengalaman pengguna dan mengurangi beban server.
2. Server-side Validation
   Validasi dilakukan di server, sehingga lebih aman dan terpercaya, karena tidak tergantung pada browser pengguna. Biasanya digunakan untuk memastikan integritas data, terutama pada aplikasi yang sensitif terhadap keamanan.
3. Real-time Validation
   Validasi dilakukan saat pengguna mengetik atau mengisi form, memberikan umpan balik secara instan. Pendekatan ini membantu pengguna memperbaiki kesalahan lebih cepat, sehingga proses pengisian form menjadi lebih efisien.
4. Submit Validation
   Validasi dilakukan saat form disubmit, mengecek seluruh input sekaligus sebelum data dikirim ke server. Metode ini berguna untuk memastikan seluruh form telah diisi sesuai aturan yang ditentukan.

Dengan memahami jenis-jenis validasi ini, Anda dapat merancang form yang interaktif, responsif, dan aman, sekaligus meningkatkan kualitas data yang dikumpulkan dan pengalaman pengguna secara keseluruhan.

5.3.3 Validation Input

Dalam pengembangan web, memastikan data yang dimasukkan pengguna valid sangat penting untuk menjaga kualitas informasi dan pengalaman pengguna. Mari kita lihat bagaimana melakukan validasi input menggunakan JavaScript.

function validateForm() {

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

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

            // Validasi nama

            if (name.length < 2) {

            showError("Nama harus minimal 2 karakter");

            return false;

            }

            // Validasi email

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailRegex.test(email)) {

            showError("Format email tidak valid");

            return false;

            }

            return true;

            }

            function showError(message) {

            const errorDiv = document.getElementById("error-message");

            errorDiv.textContent = message;

            errorDiv.style.display = "block";

            }

Penjelasan Fungsi Validation Input:

• validateForm(): Fungsi utama yang bertugas untuk memeriksa seluruh input pada form dan memastikan setiap data memenuhi kriteria yang telah ditentukan.
• showError(): Fungsi pendukung yang digunakan untuk menampilkan pesan kesalahan kepada pengguna apabila input tidak valid.
• Email Regex: Pola (pattern) yang digunakan untuk memeriksa format alamat email.

Ayo Pahami Sekilas tentang Regex

Regular Expression (regex) adalah pola (pattern) yang digunakan untuk mencari, mencocokkan, dan memanipulasi teks. Regex sering digunakan dalam JavaScript untuk melakukan pencarian teks yang lebih spesifik. Misalnya, memeriksa apakah input email valid, mencari kata tertentu dalam paragraf, atau mengganti karakter yang mengikuti pola tertentu.

Contoh sederhananya adalah ketika Anda ingin kata tertentu di dalam teks. Anda bisa menggunakan metode .match() untuk menemukan hasil yang sesuai. Pada contoh di bawah ini /JavaScript/ adalah pola regex untuk mencari kata “JavaScript” dalam teks.

const text = "Belajar JavaScript itu seru!";

            const result = text.match(/JavaScript/);

            console.log(result); // Output: ["JavaScript"]

        

Anda bisa berlatih untuk memahami konsep Regex menggunakan situs https://regex101.com/. Ikuti instruksi berikut ini:

1. Buka halaman regex101.com.
2. Di kolom "Regular Expression", ketik pola sederhana.
3. Di kolom “Test String”, ketik beberapa kalimat untuk melihat bagian teks mana yang cocok dengan pola tersebut.
   
   
   
   
   
   
4. Cobalah pola lain seperti:
• \d+ → mencari semua angka
• \b[a-z]{4}\b → mencari kata dengan 4 huruf kecil
• @.+\. → mencari pola seperti alamat email

return false: Digunakan untuk mencegah form disubmit ke server apabila terdapat kesalahan pada input.

Dengan penguasaan fungsi-fungsi ini, Anda dapat membangun form yang lebih aman, interaktif, dan ramah pengguna.

5.3.4 Real-time Validation

Validasi real-time adalah teknik memeriksa kesesuaian data saat pengguna sedang mengetik pada input form. Dengan metode ini, setiap perubahan yang dilakukan pengguna langsung diperiksa, sehingga kesalahan dapat diidentifikasi secara instan.

// Validasi saat user mengetik

            input.addEventListener("input", function () {

            const value = this.value;

            if (value.length < 3) {

            this.style.borderColor = "red";

            showFieldError(this, "Minimal 3 karakter");

            } else {

            this.style.borderColor = "green";

            hideFieldError(this);

            }

            });

        

Pada kode di atas, setiap input diperiksa panjangnya. Jika kurang dari 3 karakter, border input berubah menjadi merah dan pesan error ditampilkan. Jika memenuhi kriteria, border menjadi hijau dan pesan error disembunyikan

Keuntungan Validasi Real-time:

• Memberikan umpan balik langsung kepada pengguna.
• Mencegah form disubmit dengan data yang tidak valid.
• Meningkatkan user experience.
• Mengurangi frustrasi pengguna akibat kesalahan yang baru terlihat setelah submit.

Dengan penguasaan teknik ini, Anda dapat menciptakan form yang interaktif, responsif, dan lebih ramah terhadap pengguna.

Pertanyaan Reflektif

• Mengapa validasi di sisi client tidak cukup untuk memastikan keamanan data, meskipun memberikan feedback instan kepada pengguna?
• Bagaimana real-time validation dapat meningkatkan pengalaman pengguna dibandingkan hanya menggunakan submit validation?
• Dalam kasus form yang kompleks dengan banyak input, bagaimana Anda memutuskan kapan menggunakan real-time validation dan kapan cukup menggunakan submit validation?
• Bagaimana penggunaan regex pada validasi email dapat membantu mencegah kesalahan input, dan apa potensi risiko jika regex terlalu sederhana atau terlalu kompleks?
• Jika Anda membuat form yang sensitif terhadap keamanan, seperti form pembayaran, bagaimana strategi validasi yang seimbang antara client-side dan server-side yang optimal?