Properti event.pageY
Properti event.pageY berisi
koordinat kursor mouse pada sumbu Y.
Untuk menentukan koordinat, ada juga properti
event.clientX,
event.clientY,
event.pageX.
Mari kita lihat perbedaan antara clientX/clientY
dan pageX/pageY.
Cara kerja clientX dan clientY:
jika Anda memiliki jendela 1000 x 1000
piksel, dan mouse berada di tengah, maka clientX
dan clientY keduanya akan sama dengan 500. Jika
Anda kemudian menggulir halaman secara horizontal
atau vertikal, tanpa menggerakkan kursor, maka nilai
clientX dan clientY tidak akan berubah, karena dihitung
relatif terhadap jendela, bukan dokumen.
Cara kerja pageX dan pageY:
jika Anda memiliki jendela 1000 x 1000
piksel, dan kursor berada di tengah, maka
pageX dan pageY akan sama dengan 500. Jika
Anda kemudian menggulir halaman ke bawah 250
piksel, maka pageY akan menjadi 750.
Dengan demikian pageX dan pageY berisi koordinat
peristiwa dengan mempertimbangkan scroll.
Sintaks
event.pageY;
Contoh
Saat mouse bergerak di halaman, kita akan menampilkan
koordinatnya relatif terhadap jendela browser
(pageX dan pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
