JavaScript - Delegasi Event

Hai sana, para pemrogram yang sedang belajar! Hari ini, kita akan mendalamkan salah satu teknik paling kuat dan efisien di JavaScript: Delegasi Event. Jangan khawatir jika Anda baru saja memulai dalam pemrograman; saya akan memandu Anda melalui konsep ini step by step, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita mulai perjalanan menarik ini bersama!

Apa Itu Delegasi Event?

Sebelum kita masuk ke detilnya, mari kita pahami apa sebenarnya Delegasi Event. Bayangkan Anda adalah seorang manajer di kantor besar. Daripada secara pribadi memberikan tugas kepada setiap karyawan, Anda menyerahkan tanggung jawab kepada pemimpin tim, yang kemudian mendistribusikan pekerjaan. Itu sebenarnya apa yang dilakukan Delegasi Event di JavaScript!

Delegasi Event adalah teknik di mana kita menempelkan satu event listener ke elemen induk saja, bukannya menempelkan beberapa listener ke setiap elemen anak. Ini tidak hanya membuat kode kita lebih efisien tetapi juga memungkinkan kita untuk menghandle event pada elemen yang mungkin belum ada saat halaman dimuat!

Mengapa Menggunakan Delegasi Event?

Anda mungkin berpikir, " Mengapa harus bermasalah dengan Delegasi Event?" Well, mari saya bagikan cerita kecil dari hari-hari awal mengajar saya. Pernah saya memiliki murid yang membuat aplikasi daftar tugas. Untuk setiap tugas, dia menambahkan event listener terpisah. Pada saat dia memiliki 100 tugas, aplikasinya lambat seperti cacing yang menanjak gunung! Itu saat saya memperkenalkannya ke Delegasi Event, dan voila! Aplikasinya berjalan mulus seperti mentega.

Berikut adalah beberapa keuntungan utama:

1. Kinerja: Lebih sedikit event listener berarti penggunaan memori yang kurang dan waktu muat halaman yang lebih cepat.
2. Elemen Dinamis: Itu bekerja dengan elemen yang ditambahkan ke DOM setelah muat awal halaman.
3. Kode Lebih Sedikit: Anda menulis kode yang lebih sedikit, yang berarti kesempatan kesalahan yang kurang.

Langkah-langkah Delegasi Event

Sekarang kita mengerti "mengapa", mari kita lihat "bagaimana". Delegasi Event melibatkan tiga langkah utama:

1. Identifikasi Elemen Induk

Pertama, kita perlu memilih elemen induk yang akan bertindak sebagai delegasi event. Elemen ini harus adalah elemen yang mengandung semua elemen anak yang ingin Anda monitor.

2. Menempelkan Event Listener ke Elemen Induk

Selanjutnya, kita menempelkan event listener ke elemen induk ini.

3. Menentukan Elemen Mana yang Menimbulkan Event

Akhirnya, saat terjadi event, kita perlu memeriksa elemen anak mana yang menimbulkan event dan merespon sesuai nya.

mari kita lihat langkah ini dalam contoh kode!

Contoh Delegasi Event

Contoh 1: Delegasi Event Dasar

Mari kita mulai dengan daftar tak terurut sederhana dari buah-buahan:

<ul id="fruitList">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Sekarang, instead of adding click events to each <li>, kita akan menggunakan Delegasi Event:

document.getElementById('fruitList').addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("Anda mengklik " + e.target.textContent);
}
});

Dalam kode ini:

• Kita menempelkan event listener ke elemen induk <ul>.
• Saat terjadi klik, kita memeriksa jika elemen yang diklik (e.target) adalah <li>.
• Jika itu benar, kita mencatat konten teks elemen <li> yang diklik.

Dengan cara ini, bahkan jika kita menambahkan lebih banyak buah ke daftar kita kemudian, event handling masih akan bekerja tanpa kode tambahan!

Contoh 2: Pembuatan Elemen Dinamis

Mari kita memperbanyak hal. Kita akan membuat daftar tugas sederhana di mana pengguna dapat menambahkan item baru:

<input type="text" id="newTodo">
<button id="addTodo">Tambah Tugas</button>
<ul id="todoList"></ul>

Ini adalah JavaScript nya:

const todoList = document.getElementById('todoList');
const newTodo = document.getElementById('newTodo');
const addTodo = document.getElementById('addTodo');

addTodo.addEventListener('click', function() {
if(newTodo.value !== '') {
const li = document.createElement('li');
li.textContent = newTodo.value;
todoList.appendChild(li);
newTodo.value = '';
}
});

todoList.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
e.target.classList.toggle('completed');
}
});

Dalam contoh ini:

• Kita dapat menambahkan item tugas baru secara dinamis.
• Kita menggunakan Delegasi Event untuk menghandle klik pada semua item tugas, bahkan yang ditambahkan setelah muat awal halaman.
• Mengklik item tugas akan berubah class 'completed'.

Contoh 3: Beberapa Aksi Dengan Delegasi Event

Mari kita majukan daftar tugas kita. Kita akan menambah tombol untuk mengedit dan menghapus tugas:

<ul id="advancedTodoList"></ul>

Dan ini adalah JavaScript yang diperpanjang:

const advancedTodoList = document.getElementById('advancedTodoList');

// Fungsi untuk membuat item tugas baru
function createTodoItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<span>${text}</span>
<button class="edit">Edit</button>
<button class="delete">Hapus</button>
`;
advancedTodoList.appendChild(li);
}

// Delegasi event untuk seluruh daftar
advancedTodoList.addEventListener('click', function(e) {
const target = e.target;

if(target.className == 'delete') {
const li = target.parentNode;
advancedTodoList.removeChild(li);
} else if(target.className == 'edit') {
const span = target.previousElementSibling;
const newText = prompt("Edit tugas Anda:", span.textContent);
if(newText !== null) {
span.textContent = newText;
}
}
});

// Tambahkan beberapa tugas awal
createTodoItem("Belajar Delegasi Event");
createTodoItem("Menguasai JavaScript");

Dalam contoh ini:

• Kita menggunakan satu event listener pada elemen induk <ul> untuk menghandle kedua aksi edit dan hapus.
• Event listener memeriksa class tombol yang diklik untuk menentukan aksi.
• Pendekatan ini adalah skala dan efisien, tak peduli berapa banyak item tugas kita punya.

Kesimpulan

Dan begitu juga, murid-murid tercinta! Kita telah melintasi negeri Delegasi Event, dari konsep dasar hingga implementasi yang lebih maju. Ingat, seperti segala alat yang kuat, Delegasi Event paling terang saat digunakan bijaksana. Itu bukan selalu solusi terbaik untuk setiap situasi, tapi saat Anda berhadapan dengan banyak elemen anak atau konten yang disembunyikan secara dinamis, itu seringkali teman terbaik Anda.

Saat Anda terus melanjutkan perjalanan pemrograman Anda, terus mencoba konsep ini. Cobalah menggabungkan Delegasi Event dengan fitur JavaScript lain yang Anda pelajari. Siapa tahu? Anda mungkin menciptakan aplikasi web besar berikutnya yang mengubah dunia!

Sampai pelajaran berikutnya, selamat coding, dan semoga event Anda selalu delegasi mulus!

Credits: Image by storyset