JavaScript - Window/Document Events

Halo teman-teman yang sedang belajar coding! Hari ini, kita akan mendalam ke dunia yang menarik dari event-event JavaScript, khususnya fokus pada event Window dan Document. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengajak Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita mulai!

Event Window

Event Window adalah aksi yang terjadi terkait dengan jendela browser itu sendiri. Event ini bisa sangat berguna untuk menciptakan aplikasi web yang dinamis dan responsif. Mari kita jelajahi beberapa event window yang paling umum:

1. load

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

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

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

2. resize

Event resize dipicu setiap kali jendela browser diubah ukurannya. Hal ini bisa berguna untuk mengatur layout atau menghitung dimensi kembali.

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

Di sini, kita mencatat dimensi baru jendela setiap kali ia diubah ukurannya. Hal ini bisa berguna untuk penyesuaian design responsif.

3. scroll

Event scroll dipicu saat pengguna menggeser di jendela. Hal ini bisa digunakan untuk mengimplementasikan penggeseran tak terbatas atau menampilkan/sembunyikan elemen berdasarkan posisi penggeseran.

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

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

Dalam contoh ini, kita menampilkan tombol 'Kembali ke Atas' saat pengguna menggeser lebih dari 300 pixel turun halaman.

4. unload

Event unload dipicu saat pengguna keluar dari halaman. Hal ini bisa digunakan untuk tugas pembersihan atau untuk 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 dengan hati-hati, karena itu bisa membuat pengguna merasa kesal!

Event Document

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

1. DOMContentLoaded

Event DOMContentLoaded dipicu 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 ditekan!");
});
});

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

2. click

Event click dipicu saat elemen ditekan. Ini adalah salah satu event paling umum yang Anda kerjakan.

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

Dalam contoh ini, kita mencatat koordinat tekanan dan mengubah warna tombol saat ia ditekan.

3. keydown dan keyup

Event 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 tekanan tombol dan mensimulasikan tekanan tombol pada tombol submit saat tombol Enter ditekan.

4. mouseover dan mouseout

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

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

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

elemenHover.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 menyummarisakan metode yang kita diskusikan:

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

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

Selamat belajar, dan semoga event Anda selalu dipicu seperti yang diharapkan!

Credits: Image by storyset