Panduan Awal Mengenai DOM Events di JavaScript

Hai sana, para ahli coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia DOM Events di JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan yang ramah bagi Anda, dan kita akan mengexploreasi topik ini bersama. Jadi, ambil secangkir minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu DOM Events?

Sebelum kita melompat ke jenis event tertentu, mari kita pahami apa itu DOM Events. Bayangkan Anda di sebuah pesta (tentu saja pesta coding!). Setiap kali ada yang terjadi - seseorang datang, lagu berubah, atau seseorang tumpahkan minumannya - itu adalah "event." Dalam dunia pengembangan web, DOM Events mirip seperti itu. Itu adalah hal-hal yang terjadi pada elemen HTML di halaman web, seperti tombol yang diklik atau mouse yang melayang di atas gambar.

Sekarang, mari kita eksplor jenis event umum dan bagaimana menggunakannya!

Jenis Event onclick

Event onclick mungkin adalah jenis event yang paling umum Anda temui. Itu terjadi saat pengguna mengklik elemen HTML. Mari lihat contoh sederhana:

<button id="myButton">Klik saya!</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Anda mengklik tombol!");
}
</script>

Dalam contoh ini, kita memiliki tombol dengan ID "myButton". Kode JavaScript memilih tombol ini menggunakan document.getElementById("myButton"), dan kemudian menetapkan fungsi ke properti onclicknya. Ketika tombol diklik, itu memicu peringatan yang mengatakan "Anda mengklik tombol!"

Tips pro: Cobalah kode ini sendiri! Buat file HTML, salin ini ke dalamnya, dan buka di browser Anda. Itu selalu lebih menyenangkan untuk melihat hal-hal dalam aksi!

Jenis Event ondblclick

Apa jika kita ingin sesuatu terjadi saat pengguna mengklik ganda? Itu adalah tempat event ondblclick berguna. Mari lihat contoh:

<p id="myParagraph">Klik ganda saya untuk mengubah warni saya!</p>

<script>
document.getElementById("myParagraph").ondblclick = function() {
this.style.color = "merah";
}
</script>

Dalam kasus ini, saat Anda mengklik ganda paragraf, warna teksnya berubah menjadi merah. Kata kunci this merujuk ke elemen yang memicu event (dalam kasus ini, paragraf).

Jenis Event onkeydown

Pindah dari event mouse, mari kita lihat event keyboard. Event onkeydown dipicu saat tombol di keyboard ditekan turun. Mari lihat contoh menarik:

<input id="myInput" type="text">
<p id="output"></p>

<script>
document.getElementById("myInput").onkeydown = function(event) {
document.getElementById("output").innerHTML = "Anda menekan: " + event.key;
}
</script>

Kode ini membuat field input dan paragraf. Setiap kali Anda menekan tombol saat field input dalam fokus, paragraf akan diperbarui untuk menunjukkan tombol mana yang Anda tekan. Objek event berisi informasi tentang event, termasuk tombol mana yang ditekan (event.key).

Event onmouseenter dan onmouseleave

Event ini seperti permainan peek-a-boo dengan cursor mouse Anda! onmouseenter dipicu saat pointer mouse memasuki elemen, dan onmouseleave saat itu meninggalkan. Mari lihat mereka dalam aksi:

<div id="myBox" style="lebar: 200px; tinggi: 200px; warna-latar: kuning;">
Hover saya!
</div>

<script>
let box = document.getElementById("myBox");

box.onmouseenter = function() {
this.style.backgroundColor = "hijau";
this.innerHTML = "Hai sana!";
}

box.onmouseleave = function() {
this.style.backgroundColor = " kuning";
this.innerHTML = "Hover saya!";
}
</script>

Ini membuat kotak kuning yang berubah menjadi hijau dan menyapa Anda saat Anda melayang di atasnya, kemudian kembali saat mouse Anda meninggalkannya. Itu seperti kotak itu malu dan hanya ingin berkata halo saat Anda dekat!

DOM Events Standar HTML 5

HTML5 memperkenalkan banyak event standar baru. Mari lihat beberapa yang menarik:

Event onDrag

<div id="dragMe" draggable="true" style="lebar: 100px; tinggi: 100px; warna-latar: biru;">
Geser saya!
</div>
<div id="dropZone" style="lebar: 200px; tinggi: 200px; border: 2px dashed hitam;">
Taruh disini!
</div>

<script>
let dragElement = document.getElementById("dragMe");
let dropZone = document.getElementById("dropZone");

dragElement.ondragstart = function(event) {
event.dataTransfer.setData("text", event.target.id);
}

dropZone.ondragover = function(event) {
event.preventDefault();
}

dropZone.ondrop = function(event) {
event.preventDefault();
let data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>

Contoh ini menunjukkan fungsi geser dan taruh. Anda dapat geser kotak biru dan menaruhnya ke dalam area dashed. Itu menggunakan beberapa event: ondragstart, ondragover, dan ondrop.

Event onOnline dan onOffline

Event ini dipicu saat browser mendeteksi bahwa koneksi internet terbentuk atau hilang:

<p id="status">Status koneksi Anda akan muncul di sini.</p>

<script>
window.addEventListener("online", function() {
document.getElementById("status").innerHTML = "Anda kembali online!";
});

window.addEventListener("offline", function() {
document.getElementById("status").innerHTML = "Ups, Anda offline.";
});
</script>

Skrip ini memperbarui paragraf untuk memberitahu Anda apakah Anda online atau offline. Cobalah ini dengan mematikan Wi-Fi Anda!

Ringkasan Jenis Event

Berikut adalah tabel ringkasan jenis event yang kita diskusikan:

Jenis Event	Deskripsi	Contoh Penggunaan
onclick	Dipicu saat elemen diklik	Klik tombol, pergantian elemen
ondblclick	Dipicu saat elemen diklik ganda	Membuka/tutup panel, memperbesar/menkecilkan
onkeydown	Dipicu saat tombol ditekan turun	Validasi formulir, tombol pintas
onmouseenter	Dipicu saat mouse memasuki elemen	Menampilkan tooltip, menyorot elemen
onmouseleave	Dipicu saat mouse meninggalkan elemen	Menyembunyikan tooltip, mengembalikan gaya elemen
ondragstart	Dipicu saat elemen mulai ditarik	Inisiasi operasi geser dan taruh
ondrop	Dipicu saat elemen ditaruh	Menyelesaikan operasi geser dan taruh
online	Dipicu saat browser mendeteksi koneksi internet	Memperbarui UI untuk status online
offline	Dipicu saat browser mendeteksi kehilangan koneksi internet	Memperbarui UI untuk status offline

Dan itu adalah, teman-teman! Kita telah mengembara melalui negeri DOM Events di JavaScript, dari klik sederhana hingga ilmu sihir geser dan taruh. Ingat, cara terbaik untuk belajar adalah dengan melakukan, jadi jangan takut untuk mencoba contoh ini dan menciptakan sendiri. Siapa tahu? Anda mungkin saja membuat aplikasi web interaktif berikutnya!

Happy coding, dan semoga event Anda selalu ditangani dengan mulus!

Credits: Image by storyset