JavaScript - Mouse Events
Hai teman-teman yang sedang belajar pemrograman! Hari ini, kita akan mendalaminya dunia menarik dari event mouse dalam JavaScript. Sebagai guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Percayalah, pada akhir tutorial ini, Anda akan bisa menghandle event mouse seperti seorang ahli!
Event Mouse Umum
Sebelum kita masuk ke dalam kode, mari kita lihat beberapa event mouse paling umum di JavaScript. Pensejukkan ini sebagai berbagai cara komputer Anda memahami bagaimana Anda berinteraksi dengan mouse Anda:
| Event | Deskripsi |
|---|---|
| click | Terjadi saat mouse mengklik pada suatu elemen |
| dblclick | Terjadi saat mouse mengklik ganda pada suatu elemen |
| mousedown | Terjadi saat tombol mouse ditekan pada suatu elemen |
| mouseup | Terjadi saat tombol mouse dilepaskan di atas suatu elemen |
| mousemove | Terjadi saat pointer mouse bergerak saat di atas suatu elemen |
| wheel | Terjadi saat roda mouse digerak ke atas atau ke bawah di atas suatu elemen |
Sekarang, mari kita telusuri setiap event ini dengan beberapa contoh praktis!
Contoh: Event Click
Mari kita mulai dengan event mouse yang paling dasar dan paling umum digunakan: event 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 fluit), ia langsung bereaksi dan menampilkan sebuah alert.
Berikut adalah apa yang terjadi langkah demi langkah:
- Kita dapatkan tombol kita menggunakan
document.getElementById('myButton'). - Kita menambahkan event listener ke tombol menggunakan
addEventListener. - Kita memerintahkannya untuk mendengarkan event 'click'.
- Ketika klik terjadi, ia menjalankan fungsi yang kita sediakan, yang menampilkan alert.
Coba itu! Itu seperti magis, tapi sebenarnya hanya JavaScript yang melakukan pekerjaannya.
Contoh: Event Double Click
Sekarang, mari kita tingkatkan dengan event double click. Itu seperti klik, tapi dua kali lipat lebih menyenangkan!
<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, klik ganda pada paragraf mengubah warninya menjadi warna acak. Itu seperti kameleon, tapi lebih menarik karena Anda yang mengendalikannya!
Fungsi getRandomColor adalah petunjuk kecil warni kita. Itu menghasilkan warna acak setiap kali dipanggil. Jangan khawatir terlalu banyak tentang bagaimana ia berjalan saat ini - hanya tahu bahwa ia memberikan kita warna acak.
Contoh: Event Mouse Down dan Mouse Up
Sekarang, mari kita lihat event mousedown dan mouseup. Ini seperti yin dan yang dari event mouse.
<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 mouse di atasnya, dan kembali menjadi biru saat Anda melepaskan tombol. Itu seperti boneka penenang stres, tapi digital!
Contoh: Event Mouse Move
Event mousemove dipicu setiap kali mouse bergerak di atas suatu elemen. Itu seperti mengikuti mouse di dalam labirin, tapi kurang keju.
<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid hitam;">
<p>Pindahkan mouse Anda ke 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 sebuah area pengikuti mouse kecil. Saat Anda memindahkan mouse di dalam kotak, itu menampilkan koordinat. Itu seperti Anda adalah kapten kapal kecil mouse, menavigasi melalui laut piksel!
Contoh: Event Wheel
Terakhir tapi bukan yang paling kurang, mari kita lihat event wheel. Event ini dipicu saat Anda menggunakan roda mouse.
<div id="wheelDemo" style="width: 200px; height: 200px; background-color: kuning; overflow: auto;">
<p style="height: 1000px;">Gulirkan saya menggunakan roda mouse!</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 menggulirkan roda, warna latar belakang berubah dari kuning menjadi merah. Itu seperti matahari terbenam, tapi Anda mengendalikannya dengan roda mouse 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 negeri event mouse JavaScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba event ini. Sebelum Anda tahu, Anda akan membuat 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