Здравейте, момчета! Kali ini kita bakal ngomongin tentang DOM. Jangan khawatir, kita bakal bahas dengan santai dan mudah dimengerti. Siap? Yuk, mulai!
Apa Itu DOM?
DOM adalah singkatan dari Document Object Model. Secara sederhana, DOM adalah cara kita bisa mengakses dan memanipulasi struktur dokumen HTML atau XML menggunakan JavaScript.
Bayangkan kamu sedang membuka sebuah halaman web di browser. Halaman web ini terdiri dari berbagai elemen seperti teks, gambar, tombol, dan lainnya.
Nah, DOM adalah representasi struktur dari seluruh elemen tersebut dalam bentuk pohon (tree structure) yang dapat diakses dan dimanipulasi menggunakan JavaScript.
Kenapa DOM Penting?
DOM itu penting karena dia adalah jembatan yang menghubungkan HTML (struktur web kita) dengan JavaScript (yang bikin web kita jadi interaktif).
Dengan DOM, kita bisa berinteraksi dan memodifikasi halaman web setelah halaman tersebut telah dimuat oleh browser.
Misalnya, kamu bisa mengubah teks, menambahkan elemen baru, menghapus elemen dan banyak lagi hanya dengan menggunakan JavaScript.
Bagaimana DOM Bekerja?
Ketika browser memuat halaman web, ia akan mengambil HTML dan CSS yang ada, lalu membentuk sebuah model objek dari halaman tersebut, inilah yang disebut DOM.
Model ini digambarkan sebagai struktur pohon dari objek-objek yang mewakili setiap elemen di halaman web. Contoh sederhananya, jika kamu memiliki HTML seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Ini adalah contoh DOM sederhana.</p>
</body>
</html>
Maka DOM yang terbentuk akan terlihat seperti ini:
Document
│
└─── html
│
├─── head
│ └─── title
│ └─── "Contoh DOM"
│
└─── body
├─── h1
│ └─── "Hello, World!"
└─── p
└─── "Ini adalah contoh DOM sederhana."
Dalam struktur ini, setiap elemen HTML menjadi node dalam pohon DOM. Kamu bisa mengakses dan mengubah setiap node ini dengan JavaScript.
Contoh:
Misalnya, kamu pengen ubah teks di dalam tag <h1> menjadi yang lain. Kamu bisa melakukannya dengan cara ini:
document.querySelector('h1').textContent = 'Hai, Dunia!';
Kode di atas akan mencari elemen <h1> yang muncul pertama kali di halaman itu, lalu mengubah teks di dalamnya menjadi "Hai, Dunia!".
Mengakses DOM dengan JavaScript
Kita bisa mengakses dan memanipulasi DOM menggunakan JavaScript. Ada beberapa metode umum yang sering digunakan:
document.getElementById(id)document.getElementsByClassName(class)document.getElementsByTagName(tag)document.querySelector(selector)document.querySelectorAll(selector)
Sekarang, yuk kita lihat contoh gimana kita bisa memanipulasi DOM dengan JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<h1 id="judul">Halo, Dunia!</h1>
<p class="paragraf">Ini adalah paragraf pertama.</p>
<p class="paragraf">Ini adalah paragraf kedua.</p>
<button onclick="ubahTeks()">Ubah Teks</button>
<script src="main.js"></script>
</body>
</html>
JavaScript untuk mengubah teks:
// main.js
function ubahTeks() {
let judul = document.getElementById("judul");
judul.textContent = "Teks Baru!";
let paragraf = document.getElementsByClassName("paragraf");
for (let i = 0; i < paragraf.length; i++) {
paragraf[i].textContent = "Paragraf " + (i + 1) + " diubah!";
}
}
Saat tombol diklik, fungsi ubahTeks akan mengubah teks dari elemen h1 dan dua paragraf.
Itu dia penjelasan singkat tentang DOM (Document Object Model). Ingat, DOM adalah kunci untuk membuat halaman web kita jadi hidup dan interaktif. Dengan mengerti cara kerja dan bagaimana mengakses DOM, kamu bisa bikin web yang keren dan dinamis.
Selanjutnya kita akan bahas cara memanipulasi elemen DOM dengan lebih dalam. Tetap semangat belajar dan sampai jumpa di materi berikutnya!
Ahoj lidi! Sekarang kita lanjut ke materi seru tentang cara mengakses dan memanipulasi elemen DOM. Kita bakal bahas dengan bahasa yang santai dan gampang dimengerti, supaya kalian yang masih baru belajar bisa cepat paham.
Sedikit kita rekap tentang apa itu DOM (Document Object Model).
DOM adalah representasi struktur dari dokumen HTML atau XML. Anggap aja DOM sebagai "pohon" dari seluruh elemen HTML di halaman web.
Setiap elemen HTML adalah "node" dan dengan JavaScript kita bisa mengubah teks, menambahkan elemen baru, hingga menghapus elemen.
Mengakses Elemen DOM
Sebelum bisa memanipulasi elemen DOM, kita harus tahu cara mengaksesnya dulu. Ada beberapa metode yang sering dipakai untuk mengakses elemen DOM:
document.getElementById(id):
Metode ini digunakan untuk memilih elemen berdasarkan id-nya. Id bersifat unik, jadi metode ini akan mengembalikan satu elemen saja.
let header = document.getElementById("header");
document.getElementsByClassName(class):
Metode ini memilih elemen-elemen berdasarkan nama kelasnya. Hasilnya adalah koleksi elemen (HTMLCollection), karena banyak elemen bisa berbagi kelas yang sama.
let buttons = document.getElementsByClassName("btn");
document.getElementsByTagName(tag):
Metode ini memilih semua elemen berdasarkan nama tag-nya. Sama seperti metode sebelumnya, hasilnya adalah koleksi elemen (HTMLCollection).
let paragraphs = document.getElementsByTagName("p");
document.querySelector(selector):
Metode ini sangat powerful karena memungkinkan kita untuk memilih elemen menggunakan berbagai cara, tapi hanya elemen pertamanya aja yang akan diambil.
let paragraph = document.querySelector("p");
// tanda titik artinya menyeleksi attribute kelas
let button = document.querySelector(".btn");
// tanda pagar artinya menyeleksi attribute id
let header = document.querySelector("#header");
document.querySelectorAll(selector):
Sama seperti sebelumnya, tapi ini mengambil semua elemen yang cocok dengan selector. Metode ini akan mengembalikan NodeList.
let paragraphs = document.querySelectorAll("p");
// tanda titik artinya menyeleksi attribute kelas
document.querySelectorAll(".card");
Memanipulasi Elemen DOM
Setelah kita bisa mengakses elemen DOM, kita bisa mulai memanipulasi elemen-elemen tersebut. Ada banyak cara untuk memanipulasi elemen DOM, seperti mengubah teks, mengubah atribut, menambahkan atau menghapus elemen, dan lain-lain.
Mengubah Teks atau Konten HTML
Untuk mengubah teks dari elemen, kita bisa menggunakan properti textContent atau innerHTML.
let header = document.getElementById("header");
header.textContent = "Teks Baru!";
// atau
header.innerHTML = "<u>Teks Baru!</u>";
Mengubah Atribut Elemen
Kita bisa mengubah atribut elemen seperti id, class, src, dan lain-lain menggunakan setAttribute atau langsung mengakses atribut tersebut.
let gambar = document.querySelector("img");
gambar.setAttribute("src", "gambar_baru.jpg");
// atau
gambar.src = "gambar_baru.jpg";
Mengubah Gaya CSS
Kita bisa langsung mengubah gaya CSS elemen melalui properti style.
let paragraph = document.querySelector("p");
paragraph.style.color = 'blue';
paragraph.style.backgroundColor = 'yellow';
Menambahkan dan Menghapus Kelas (Class)
Menambahkan atau menghapus kelas dari elemen bisa dilakukan menggunakan classList.
let kotak = document.querySelector(".kotak");
kotak.classList.add("kotak-besar");
kotak.classList.remove("kotak-kecil");
Menambahkan dan Menghapus Elemen
Kita juga bisa menambah elemen baru ke DOM atau menghapus yang sudah ada. Misalnya, menambahkan elemen paragraf baru.
// Menambahkan elemen
let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf baru.";
document.body.appendChild(paragrafBaru);
// Menghapus elemen
let paragraf = document.querySelector("p");
paragraf.parentNode.removeChild(paragraf);
Sekarang kita coba contoh yang lebih lengkap. Misalnya kita punya HTML seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<h1 id="header">Halo, Dunia!</h1>
<p class="paragraf">Ini adalah paragraf pertama.</p>
<p class="paragraf">Ini adalah paragraf kedua.</p>
<button onclick="ubahSemua()">Ubah Semua</button>
<script src="main.js"></script>
</body>
</html>
JavaScript untuk memanipulasi elemen:
// main.js
function ubahSemua() {
// Mengubah teks header
let header = document.getElementById("header");
header.textContent = "Selamat Datang di Dunia JavaScript!";
// Mengubah teks semua paragraf
let paragraf = document.getElementsByClassName("paragraf");
for (let i = 0; i < paragraf.length; i++) {
paragraf[i].textContent = "Paragraf " + (i + 1) + " telah diubah.";
}
// Menambahkan paragraf baru
let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf tambahan.";
document.body.appendChild(paragrafBaru);
// Menghapus paragraf pertama
let paragrafPertama = document.querySelector(".paragraf");
paragrafPertama.parentNode.removeChild(paragrafPertama);
}
Dengan belajar cara mengakses dan memanipulasi elemen DOM, kita bisa membuat halaman web yang interaktif dan dinamis.
DOM memberikan kita kontrol penuh atas struktur dan konten halaman web, jadi jangan ragu untuk bereksperimen dan mencoba berbagai manipulasi.
Semoga penjelasan ini membantu kamu untuk lebih memahami DOM dan cara memanipulasinya.
Selanjutnya, kita akan bahas lebih dalam tentang membuat dan menghapus elemen di DOM. Tetap semangat belajar dan sampai jumpa di materi berikutnya!
Hej folkens! Kali ini kita bakal bahas tentang cara membuat dan menghapus elemen DOM secara dinamis di JavaScript. Mungkin kedengarannya agak ribet, tapi sebenarnya gampang banget kok! Yuk, kita kupas satu-satu dengan cara yang santai dan mudah dimengerti.
Membuat Elemen DOM
Untuk membuat elemen baru di DOM, kita bisa menggunakan document.createElement(). Metode ini menghasilkan elemen baru yang masih "kosong", alias belum punya isi atau atribut apa pun.
Nah, berikut langkah-langkah dasar untuk membuat elemen baru:
Membuat Elemen Baru
Pertama, kita bikin elemen baru dengan document.createElement(). Misalnya, kita mau bikin <div>.
let newDiv = document.createElement("div");
Menambahkan Konten ke Elemen
Setelah elemen baru dibuat, kita bisa tambahin konten ke dalamnya. Misalnya, kita tambahin teks:
newDiv.textContent = "Hello, ini elemen baru!";
Menambahkan Elemen ke Halaman
Setelah elemen siap, kita bisa tambahin ke halaman web dengan appendChild() atau insertBefore(). Misalnya, kita mau tambahin ke dalam elemen <body>:
document.body.appendChild(newDiv);
Contoh lengkapnya:
Misalnya kita punya tombol di HTML yang kalau diklik, bakal nambahin elemen baru ke container:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<button id="addButton">Tambah Elemen</button>
<div id="container"></div>
<script src="main.js"></script>
</body>
</html>
Kita bisa pake event listener ke tombol itu supaya nambahin elemen baru setiap kali tombol diklik:
// main.js
let addButton = document.getElementById("addButton");
let container = document.getElementById("container");
addButton.addEventListener("click", function() {
let newElement = document.createElement("div");
newElement.textContent = "Elemen baru!";
container.appendChild(newElement);
});
Menghapus Elemen DOM
Sama seperti bikin elemen baru, kita juga bisa hapus elemen yang udah ada. Menghapus elemen dari DOM juga gampang banget. Kita bisa pakai metode remove() atau removeChild().
Mengakses Elemen yang Mau Dihapus
Pertama, kita perlu akses elemen yang mau kita hapus. Misalnya kita mau hapus elemen dengan Id elementToRemove:
let elementToRemove = document.getElementById("elementToRemove");
Menghapus Elemen
Kita bisa pake removeChild() untuk hapus elemen. Pertama kita perlu tahu siapa induknya (parent element):
let parent = elementToRemove.parentNode;
parent.removeChild(elementToRemove);
Selain itu kita juga bisa menggunakan elemen remove(). Metode ini langsung menghapus elemen yang kita panggil.
let elementToRemove = document.querySelector('.class-yang-mau-dihapus');
elementToRemove.remove();
Contoh lengkapnya:
Misalnya kita punya elemen di HTML yang bisa dihapus dengan tombol.
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<div id="elementToRemove">Ini elemen yang bisa dihapus</div>
<button id="removeButton">Hapus Elemen</button>
<script src="main.js"></script>
</body>
</html>
Kita bisa tambahin event listener ke tombol itu supaya hapus elemen ketika tombol diklik:
// main.js
let removeButton = document.getElementById("removeButton");
removeButton.addEventListener("click", function() {
let elementToRemove = document.getElementById("elementToRemove");
if (elementToRemove) {
elementToRemove.parentNode.removeChild(elementToRemove);
}
});
Membuat dan menghapus elemen DOM secara dinamis itu seru dan penting banget buat bikin halaman web yang interaktif. Dengan JavaScript, kita bisa nambahin elemen baru atau hapus elemen yang gak dibutuhin kapan aja sesuai kebutuhan.
Next, kita bakal bahas tentang event handling untuk menangani berbagai aksi (click, submit) yang ada di halaman web. Stay tuned!
Hallo vrienden! Kali ini kita bakal bahas tentang event handling di JavaScript. Event handling adalah cara kita berinteraksi dengan pengguna melalui berbagai aksi seperti klik, submit, dan lain-lain. Yuk kita bahas lebih dalam dengan bahasa yang santai dan mudah dimengerti!
Apa itu Event?
Event itu bisa diibaratkan seperti sinyal atau pesan yang dikirim oleh browser ketika sesuatu terjadi di halaman web. Contohnya, kalau kamu klik tombol, mengetik di kolom input, atau submit form, itu semua disebut event.
Jadi event adalah segala sesuatu yang terjadi di halaman web yang bisa dideteksi oleh browser. Lewat event handling kita bisa berinteraksi dengan user, sehingga kita bisa memvalidasi form dan juga membuat navigasi yang interaktif.
Cara Menangani Event
Untuk menangani event, kita perlu "mendengarkan" event tersebut menggunakan event listener. Ini seperti kita pasang telinga di elemen tertentu dan siap-siap bereaksi ketika sesuatu terjadi.
Misalnya, kita punya tombol yang kalau di-klik akan mengubah teks di halaman. Pertama, kita buat tombol di HTML:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<button id="myButton">Klik Aku!</button>
<p id="myText">Teks ini akan berubah.</p>
<script src="main.js"></script>
</body>
</html>
Lalu, kita tambahkan event listener di JavaScript:
// main.js
let tombol = document.getElementById("myButton");
let teks = document.getElementById("myText");
tombol.addEventListener("click", function() {
teks.textContent = "Teks telah diubah!";
});
Ketika tombol di-klik, teks paragraf akan berubah menjadi "Teks telah diubah!".
Event Click
Event click adalah event yang terjadi ketika kita meng-klik elemen. Contoh tadi adalah salah satu penggunaan event click.
Supaya lebih singkat, keseluruhan HTML-nya tidak ditulis, kamu bisa ikutin struktur yang sebelumnya aja, lanjut. Misalnya kita ingin menambah elemen baru setiap kali tombol di-klik:
<button id="addButton">Tambah Paragraf</button>
<div id="content"></div>
let addButton = document.getElementById("addButton");
let content = document.getElementById("content");
addButton.addEventListener("click", function() {
let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Paragraf baru ditambahkan.";
content.appendChild(paragrafBaru);
});
Setiap kali tombol "Tambah Paragraf" di-klik, paragraf baru akan ditambahkan ke dalam div dengan id content.
Event Submit
Event submit adalah event yang terjadi ketika form di-submit. Kita sering menggunakan ini untuk mengirim data ke server.
Misalnya kita punya form sederhana:
<form id="myForm">
<input type="text" id="username" placeholder="Username">
<button type="submit">Submit</button>
</form>
<p id="message"></p>
Kita bisa menangani event submit seperti ini:
let form = document.getElementById("myForm");
let message = document.getElementById("message");
form.addEventListener("submit", function(event) {
event.preventDefault(); // Mencegah form dikirim (refresh halaman)
let username = document.getElementById("username").value;
message.textContent = "Hello, " + username + "!";
});
Ketika form di-submit, kita mencegah aksi default (mengirim data) dengan event.preventDefault(), lalu kita ambil nilai dari input dan tampilkan pesan.
Event Lainnya
Selain click dan submit, ada banyak event lain yang bisa kita gunakan, seperti:
- mouseover: Terjadi ketika mouse berada di atas elemen.
- mouseout: Terjadi ketika mouse keluar dari elemen.
- keydown: Terjadi ketika tombol keyboard ditekan.
- keyup: Terjadi ketika tombol keyboard dilepaskan.
Contoh event mouseover dan mouseout.
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<p id="status"></p>
let box = document.getElementById("box");
let status = document.getElementById("status");
box.addEventListener("mouseover", function() {
status.textContent = "Mouse over the box!";
});
box.addEventListener("mouseout", function() {
status.textContent = "Mouse out of the box!";
});
Ketika mouse berada di atas kotak merah, teks akan berubah menjadi "Mouse over the box!", dan ketika mouse keluar dari kotak, teks akan berubah menjadi "Mouse out of the box!".
Event handling adalah bagian penting dari JavaScript yang memungkinkan kita membuat halaman web yang interaktif dan responsif.
Dengan belajar cara menangani berbagai event, kita bisa membuat pengalaman pengguna yang lebih baik dan menarik. Jangan takut untuk bereksperimen dengan event-event lain dan lihat apa yang bisa kamu buat!
Selanjutnya, kita akan bahas tentang event propagation dan bagaimana cara mengendalikannya. Tetap semangat belajar dan sampai jumpa di materi berikutnya!
Hei ystävät! Kali ini kita bakal bahas tentang event propagation di JavaScript. Mungkin istilah ini terdengar agak rumit, tapi tenang aja, kita bakal jelasin dengan bahasa yang santai dan mudah dimengerti. Yuk, kita mulai!
Apa itu Event Propagation?
Event propagation itu seperti aliran atau pergerakan event melalui DOM. Ketika sebuah event terjadi, misalnya kita klik sebuah tombol, event tersebut akan "mengalir" melalui elemen-elemen yang bersarang.
Bayangkan kamu sedang melemparkan batu ke dalam kolam air. Ketika batu itu mengenai permukaan air, riak-riak akan muncul dan menyebar dari titik benturan ke segala arah. Dalam konteks DOM, event propagation bekerja dengan cara yang mirip.
Ada tiga fase dalam event propagation:
- Capturing phase: event bergerak dari root (elemen paling atas) menuju elemen yang dituju.
- Target phase: event mencapai elemen yang dituju.
- Bubbling phase: event bergerak kembali dari elemen yang dituju ke root.
Misalnya kita punya struktur HTML kayak gini:
<div id="grandparent">
<div id="parent">
<button id="child">Klik Aku!</button>
</div>
</div>
Kita bisa tambahin event listener di setiap elemen untuk melihat bagaimana event propagation bekerja:
let grandparent = document.getElementById("grandparent");
let parent = document.getElementById("parent");
let child = document.getElementById("child");
grandparent.addEventListener("click", function() {
console.log("Grandparent clicked!");
});
parent.addEventListener("click", function() {
console.log("Parent clicked!");
});
child.addEventListener("click", function() {
console.log("Child clicked!");
});
Kalau kita klik tombol child, console akan mencetak:
Child clicked!
Parent clicked!
Grandparent clicked!
Ini menunjukkan bahwa event "mengalir" dari elemen yang diklik (child) ke parent dan grandparent.
Mencegah Event Bubbling
Kadang kita gak pengen event bubbling naik ke elemen di atasnya. Kita bisa mencegah ini dengan event.stopPropagation().
Contoh:
child.addEventListener("click", function(event) {
console.log("Child clicked!");
event.stopPropagation();
});
Sekarang kalau kita klik tombol child, console hanya akan mencetak:
Child clicked!
Event gak akan naik ke parent atau grandparent.
Capturing Phase
Secara default, event listener dipanggil di bubbling phase. Tapi kita bisa membuatnya dipanggil di capturing phase dengan menambahkan opsi true di event listener.
Contoh
grandparent.addEventListener("click", function() {
console.log("Grandparent clicked!");
}, true);
parent.addEventListener("click", function() {
console.log("Parent clicked!");
}, true);
child.addEventListener("click", function() {
console.log("Child clicked!");
}, true);
Kalau kita klik tombol child, console akan mencetak:
Grandparent clicked!
Parent clicked!
Child clicked!
Ini menunjukkan bahwa event listener dipanggil saat event "turun" ke elemen target.
Event propagation itu penting banget buat bikin aplikasi web yang kompleks. Dengan memahami konsep ini, kita bisa mengontrol bagaimana event bergerak di dalam DOM dan membuat interaksi pengguna yang lebih baik. Jangan ragu buat eksperimen dengan event propagation di proyek kalian!
Selanjutnya, kita akan bahas tentang delegasi event yang bisa membantu mengelola event listener dengan lebih efisien. Sampai jumpa di materi berikutnya!
Helló barátaim! Kali ini kita akan membahas tentang delegasi event di JavaScript. Mungkin kedengarannya agak teknis, tapi tenang aja, kita bakal bahas dengan cara yang santai dan mudah dipahami. Yuk, kita mulai!
Apa Itu Delegasi Event?
Delegasi event itu teknik di mana kita menambahkan event listener ke satu elemen induk (parent element) untuk menangani event dari elemen-elemen anaknya (child elements).
Jadi, daripada menambahkan event listener ke setiap elemen anak, kita cukup menambahkan satu event listener ke elemen induk.
Bayangin kita punya satu guru (elemen induk) yang mengawasi satu kelas penuh siswa (elemen anak).
Daripada setiap siswa harus melaporkan langsung ke kepala sekolah (event listener di setiap elemen anak), semua siswa cukup melaporkan ke guru mereka, dan guru akan melaporkan ke kepala sekolah.
Dengan cara ini, prosesnya jadi lebih efisien dan teratur.
Keuntungan Delegasi Event
- Efisiensi: Menghemat memori dan meningkatkan performa karena kita hanya perlu satu event listener untuk banyak elemen.
- Kemudahan pemeliharaan: Lebih mudah dikelola terutama ketika elemen anak sering ditambah atau dihapus.
- Penanganan dinamis: Elemen yang ditambahkan setelah event listener dipasang tetap bisa terdeteksi.
Misalnya kita punya struktur HTML seperti ini:
<ul id="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="add-item">Tambah Item</button>
Sekarang kita tambahkan event listener ke elemen induk #parent-list:
let parentList = document.getElementById("parent-list");
parentList.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log("Item diklik: " + event.target.textContent);
}
});
Dengan cara ini, ketika kita klik salah satu li di dalam #parent-list, event listener yang ada di #parent-list akan menangani event tersebut.
Menambahkan Elemen Dinamis
Dengan delegasi event, kita bisa menangani elemen yang ditambahkan setelah event listener dipasang. Misalnya, kita tambahkan item baru ke #parent-list:
<ul id="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="add-item">Tambah Item</button>
let parentList = document.getElementById("parent-list");
let addItemButton = document.getElementById("add-item");
addItemButton.addEventListener("click", function() {
let newItem = document.createElement("li");
newItem.textContent = "Item baru";
parentList.appendChild(newItem);
});
Sekarang, kalau kita klik tombol "Tambah Item", item baru akan ditambahkan ke #parent-list. Dan event listener yang ada di #parent-list tetap bisa menangani klik pada item baru tersebut.
Delegasi event adalah teknik yang powerful dan efisien untuk mengelola event listener di aplikasi web kita. Dengan memahami dan menerapkan delegasi event, kita bisa membuat kode yang lebih bersih, efisien, dan mudah dipelihara.
Selanjutnya, kita akan bahas tentang asynchronous, ini penting untuk membuat aplikasi web yang dinamis. Sampai jumpa di materi berikutnya!