JavaScript - Delegasi Event

Halo 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 belajar pemrograman; saya akan mengarahkan Anda melalui konsep ini secara langkah demi langkah, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambillah secangkir kopi (atau minuman kesukaan Anda), dan mari kita berangkat dalam perjalanan yang menarik ini bersama!

Apa Itu Delegasi Event?

Sebelum kita masuk ke hal-hal kecil, mari kita memahami apa sebenarnya Delegasi Event. Bayangkan Anda adalah 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, bukan 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 singkat 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 menjadi lamban seperti cacing yang mendaki bukit! 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 untuk kesalahan yang berkurang.

Langkah-langkah Delegasi Event

Sekarang kita mengetahui "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 event delegate. Elemen ini harus sebuah elemen yang memuat semua elemen anak yang Anda ingin monitor.

2. Menempelkan Event Listener ke Elemen Induk

Kemudian, kita menempelkan event listener ke elemen induk ini.

3. Menentukan Elemen Mana yang Mengaktifkan Event

Akhirnya, saat event terjadi, kita perlu memeriksa elemen anak mana yang mengaktifkannya dan menanggapi sesuai kebutuhan.

Mari kita lihat langkah ini dalam contoh kode!

Contoh Delegasi Event

Contoh 1: Delegasi Event Dasar

Mari kita mulai dengan daftar tak berurutan buah-buahan sederhana:

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

Sekarang, instead of adding click events to each <li>, we'll use Event Delegation:

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 dari <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 menambahkan sedikit kegembiraan. 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 JavaScriptnya:

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 secara dinamis.
• Kita menggunakan Delegasi Event untuk menghandle klik pada semua item tugas, bahkan yang ditambahkan setelah muat awal halaman.
• Mengklik item tugas akan toggles 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.
• Listener event memeriksa kelas tombol yang diklik untuk menentukan aksi.
• Pendekatan ini dapat diperbesar dan efisien, tidak matter berapa banyak item tugas kita punya.

Kesimpulan

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

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

Sampaijumpa di pelajaran berikutnya, selamat coding, dan semoga event Anda selalu dapat didelegasikan dengan mulus!

Credits: Image by storyset