JavaScript - Peristiwa Tetikus

Hai sana, para pemrogram yang sedang belajar! Hari ini, kita akan mendalam ke dunia yang menarik dari peristiwa tetikus JavaScript. Seperti teman pendidik komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir tutorial ini, Anda akan menangani peristiwa tetikus seperti seorang ahli!

Peristiwa Tetikus Umum

Sebelum kita masuk ke kode, mari kita lihat beberapa peristiwa tetikus paling umum di JavaScript. Pikirkan ini sebagai berbagai cara komputer Anda memahami bagaimana Anda berinteraksi dengan tetikus Anda:

Peristiwa	Deskripsi
click	Terjadi saat tetikus mengklik pada elemen
dblclick	Terjadi saat tetikus mengklik ganda pada elemen
mousedown	Terjadi saat tombol tetikus ditekan pada elemen
mouseup	Terjadi saat tombol tetikus dilepaskan di atas elemen
mousemove	Terjadi saat penunjuk tetikus bergerak saat di atas elemen
wheel	Terjadi saat roda tetikus diroda ke atas atau ke bawah di atas elemen

Sekarang, mari kita jelajahi setiap peristiwa ini dengan beberapa contoh praktis!

Contoh: Peristiwa Click

mari mulai dengan peristiwa tetikus paling dasar dan paling umum: peristiwa click.

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

<script>
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Tombol diklik!');
});
</script>

Dalam contoh ini, kita memerintahkan JavaScript untuk mendengarkan klik pada tombol kita. Ketika ia mendengar klik (seperti anjing mendengar suara fluit), ia langsung bereaksi dan menampilkan peringatan.

Berikut adalah apa yang terjadi langkah demi langkah:

1. Kita mendapatkan tombol menggunakan document.getElementById('myButton').
2. Kita menambahkan penggunaan event listener ke tombol menggunakan addEventListener.
3. Kita memerintahkannya untuk mendengarkan peristiwa 'click'.
4. Ketika klik terjadi, ia menjalankan fungsi yang kita sediakan, yang menampilkan peringatan.

Coba itu! Itu seperti magis, tapi sebenarnya hanya JavaScript yang melakukan pekerjaannya.

Contoh: Peristiwa Double Click

Sekarang, mari kita naikkan taruhannya dengan peristiwa double click. Itu seperti klik, tapi dua kali lebih bagus!

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

<script>
let paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>

Dalam contoh ini, mengklik ganda pada paragraf mengubah warniannya menjadi warna acak. Itu seperti kameleon, tapi lebih keren karena Anda yang mengendalikannya!

Fungsi getRandomColor adalah petunjuk warni kecil kita. Itu menghasilkan warna acak setiap kali dipanggil. Jangan khawatir terlalu banyak tentang internalnya saat ini - hanya tahu bahwa itu memberikan kita warna acak.

Contoh: Peristiwa Mouse Down dan Mouse Up

Sekarang, mari kita lihat peristiwa mousedown dan mouseup. Ini seperti yin dan yang dari peristiwa tetikus.

<div id="myBox" style="width: 100px; height: 100px; background-color: biru;"></div>

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

box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'merah';
});

box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'biru';
});
</script>

Dalam contoh ini, kotak kita berubah menjadi merah saat Anda menekan tombol tetikus di atasnya, dan kembali menjadi biru saat Anda melepaskan tombol. Itu seperti boneka pengurangan stres, tapi digital!

Contoh: Peristiwa Mouse Move

Peristiwa mousemove diterapkan setiap kali tetikus bergerak di atas elemen. Itu seperti mengikuti tetikus di dalam labirin, tapi kurang keju.

<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid hitam;">
<p>Pindahkan tetikus Anda ke dalam sini!</p>
<p id="coordinates"></p>
</div>

<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');

tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>

Contoh ini membuat area pengikutan kecil tetikus. Saat Anda memindahkan tetikus Anda di dalam kotak, itu menampilkan koordinat. Itu seperti Anda adalah kapten kapal kecil tetikus, menavigasi melalui laut piksel!

Contoh: Peristiwa Wheel

Terakhir tapi bukan paling kurang, mari kita lihat peristiwa wheel. Peristiwa ini diterapkan saat Anda menggunakan roda tetikus.

<div id="wheelDemo" style="width: 200px; height: 200px; background-color: kuning; overflow: auto;">
<p style="height: 1000px;">Gulir saya menggunakan roda tetikus!</p>
</div>

<script>
let wheelArea = document.getElementById('wheelDemo');

wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // Mencegah perilaku gulir default

this.scrollTop += event.deltaY;

if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>

Dalam contoh ini, saat Anda menggulir roda, warna latar belakang berubah dari kuning menjadi merah. Itu seperti sunset, tapi Anda mengendalikannya dengan roda tetikus Anda!

event.deltaY memberikan kita jumlah gulir vertikal. Kita gunakan ini untuk menggulir konten dan mengubah warna.

Dan begitu juga, teman-teman! Kita telah berpergian melalui tanah peristiwa tetikus JavaScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba peristiwa ini. Sebelum Anda tahu, Anda akan menciptakan pengalaman web interaktif yang akan membuat pengguna Anda berkata "Wah, bagaimana mereka melakukan itu?"

Selamat coding, dan may your mouse always click true!

Credits: Image by storyset