JavaScript - Window/Document Events

Hai there, para penggemar coding! Hari ini, kita akan melihat dunia menarik JavaScript events, khususnya fokus pada Window dan Document events. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbit Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai!

Window Events

Window events adalah tindakan yang terjadi terkait dengan jendela browser itu sendiri. Peristiwa ini bisa sangat berguna untuk membuat aplikasi web dinamis dan responsif. Mari kita jelajahi beberapa window events yang paling umum:

1. load

Peristiwa load terjadi ketika seluruh halaman, termasuk semua sumber daya tergantung seperti stylesheet dan gambar, telah selesai dimuat. Ini biasanya digunakan untuk memastikan bahwa semua elemen tersedia sebelum menjalankan skrip.

window.addEventListener('load', function() {
console.log("Halaman sepenuhnya dimuat!");
});

Dalam contoh ini, kita menambahkan event listener ke objek window. Ketika peristiwa 'load' terjadi, fungsi kami akan berjalan, mencatat pesan ke console.

2. resize

Peristiwa resize dipicu saat jendela browser diubah ukurannya. Ini bisa berguna untuk mengatur layout atau menghitung kembali dimensi.

window.addEventListener('resize', function() {
console.log("Jendela diubah ukurannya ke: " + window.innerWidth + "x" + window.innerHeight);
});

Di sini, kita mencatat dimensi baru jendela saat itu diubah ukurannya. Ini bisa berguna untuk penyesuaian design responsif.

3. scroll

Peristiwa scroll terjadi saat pengguna menggeser di jendela. Ini bisa digunakan untuk implementasi infinite scrolling atau menampilkan/sembunyikan elemen berdasarkan posisi scroll.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("Digulir ke posisi: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

Dalam contoh ini, kita menampilkan tombol 'Back to Top' saat pengguna menggeser lebih dari 300 pixel ke bawah halaman.

4. unload

Peristiwa unload dipicu saat pengguna meninggalkan halaman. Ini bisa digunakan untuk tugas pembersihan atau meminta konfirmasi pengguna sebelum meninggalkan halaman.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

Kode ini akan meminta konfirmasi pengguna dengan dialog konfirmasi saat mereka mencoba meninggalkan halaman. Ingat untuk menggunakan ini secara hati-hati, karena itu bisa membuat pengguna kesal!

Document Events

Document events terkait dengan dokumen HTML itu sendiri. Peristiwa ini memungkinkan kita untuk berinteraksi dengan konten halaman dalam berbagai cara. Mari kita lihat beberapa document events kunci:

1. DOMContentLoaded

Peristiwa DOMContentLoaded terjadi saat dokumen HTML awal telah sepenuhnya dimuat dan diuraikan, tanpa menunggu sumber daya eksternal selesai dimuat.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM siap!");
document.getElementById('myButton').addEventListener('click', function() {
alert("Tombol diklik!");
});
});

Peristiwa ini sering dipilih lebih daripada window.load karena ia tidak menunggu gambar dan sumber daya lain selesai dimuat, memungkinkan eksekusi skrip lebih cepat.

2. click

Peristiwa click dipicu saat elemen diklik. Ini adalah salah satu peristiwa paling umum yang Anda kerjakan.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("Tombol diklik di koordinat: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

Dalam contoh ini, kita mencatat koordinat klik dan mengubah warna latar belakang tombol saat itu diklik.

3. keydown dan keyup

Peristiwa ini dipicu saat tombol ditekan (keydown) atau dilepaskan (keyup).

document.addEventListener('keydown', function(event) {
console.log("Tombol ditekan: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

Kode ini mencatat setiap penekanan tombol dan mensimulasikan klik tombol submit saat tombol Enter ditekan.

4. mouseover dan mouseout

Peristiwa ini dipicu saat pointer mouse memasuki (mouseover) atau meninggalkan (mouseout) elemen.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

Ini menciptakan efek hover sederhana, mengubah warna latar belakang elemen saat mouse di atasnya.

Tabel Metode Event

Berikut adalah tabel praktis yang menggabungkan metode yang kita diskusikan:

Peristiwa	Deskripsi	Contoh
load	Terjadi saat halaman sepenuhnya dimuat	window.addEventListener('load', function() {...})
resize	Terjadi saat jendela diubah ukurannya	window.addEventListener('resize', function() {...})
scroll	Terjadi saat jendela digeser	window.addEventListener('scroll', function() {...})
unload	Terjadi saat meninggalkan halaman	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	Terjadi saat DOM siap	document.addEventListener('DOMContentLoaded', function() {...})
click	Terjadi saat elemen diklik	element.addEventListener('click', function(event) {...})
keydown	Terjadi saat tombol ditekan	document.addEventListener('keydown', function(event) {...})
keyup	Terjadi saat tombol dilepaskan	document.addEventListener('keyup', function(event) {...})
mouseover	Terjadi saat mouse memasuki elemen	element.addEventListener('mouseover', function() {...})
mouseout	Terjadi saat mouse meninggalkan elemen	element.addEventListener('mouseout', function() {...})

Dan itu adalah, teman-teman! Kita telah melihat dasar Window dan Document events di JavaScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba events ini dalam proyek Anda sendiri. Sebelum Anda tahu, Anda akan membuat halaman web interaktif dan dinamis seperti seorang pro!

Selamat coding, dan semoga event Anda selalu terbakar seperti yang diharapkan!

Credits: Image by storyset