JavaScript - DOM Events: A Beginner's Guide

Halo sana, para ahli coding masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia JavaScript DOM Events. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - saya akan menjadi panduan teman anda, dan kita akan mengexploreasi topik ini bersama. Jadi, ambil secangkir minuman favorit 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 hal yang terjadi - seseorang datang, lagu berubah, atau seseorang tumpahkan minumannya - itu adalah "event". Dalam dunia pengembangan web, DOM Events mirip. 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

Jenis event onclick mungkin adalah event yang paling umum Anda temui. Itu terjadi saat pengguna mengklik elemen HTML. Mari kita 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 sebuah fungsi ke properti onclicknya. Saat tombol diklik, itu memicu peringatan yang mengatakan "Anda mengklik tombol!"

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

Jenis Event ondblclick

Sekarang, apa bila kita ingin sesuatu terjadi saat pengguna mengklik ganda? Itu adalah di mana 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 terjadi saat tombol di keyboard ditekan turun. Mari lihat contoh yang 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 sebuah field input dan paragraf. Setiap kali anda menekan tombol saat field input sedang 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 kursor mouse Anda! onmouseenter dipicu saat kursor mouse memasuki elemen, dan onmouseleave saat itu meninggalkannya. Mari lihat mereka dalam aksi:

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

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

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

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

Ini membuat sebuah kotak kuning yang berubah menjadi hijau dan menyapa anda saat anda melayangkan di atasnya, kemudian kembali saat mouse meninggalkannya. Itu seperti kotak itu malu dan hanya ingin menyapa saat anda dekat!

DOM Events Standar HTML 5

HTML5 memperkenalkan sejumlah event standar baru. Mari kita 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;">
Letakkan 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 letakkan. Anda dapat menggeser kotak biru dan meletakkannya ke area bergaris. Itu menggunakan beberapa event: ondragstart, ondragover, dan ondrop.

Event onOnline dan onOffline

Event ini dipicu saat browser mendeteksi koneksi internet diterima 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

Ini adalah tabel praktis yang menggabungkan jenis event yang kita diskusikan:

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

Dan begitu saja, teman-teman! Kita telah melakukan perjalanan melalui negeri JavaScript DOM Events, dari klik sederhana hingga keajaiban geser dan letakkan. Ingat, cara terbaik untuk belajar adalah dengan melakukan, jadi jangan takut untuk mencoba contoh ini dan menciptakan sendiri. Siapa tahu? Anda mungkin hanya membangun aplikasi web interaktif berikutnya!

Selamat coding, dan maya event Anda selalu ditangani dengan mulus!

Credits: Image by storyset