# 12. mousemove 透過游標更新網頁座標資訊

- 利用移動座標的時候，同時更新網頁的座標資訊:

### function(e) 函式內的第一個參數會紀錄各種的詳盡資訊

- 其中此六個 object 則是會紀錄座標的內容：

// screen: 捕捉使用者的螢幕大小來撈值
    e.screenX; 
    e.screenY;

// page: 根據當前使用者的網頁寬高來撈值    
    e.pageX;
    e.pageY;    

// 根據當前 browser 網頁寬高來撈值，
   當網頁視窗大小不一樣時，極限寬高也會跟隨改變

    e.clientX;
    e.clientY; 

---

### [HTML CSS 可參考 codepen](https://codepen.io/rrpaqjcq/pen/oNqNGRa)

---

### JS的做法：

// 宣告變數 el 為網頁的 body
var el = document.querySelector('.body');

// 捕捉使用者的螢幕大小來撈值
var screenX = document.querySelector('.screenX');
var screenY = document.querySelector('.screenY')

// 根據當前使用者的網頁寬高來撈值
var pageX = document.querySelector('.pageX');
var pageY = document.querySelector('.pageY');

// 根據當前 browser 網頁寬高來撈值，
   當網頁視窗大小不一樣時，極限寬高也會跟隨改變
var clientX = document.querySelector('.clientX');
var clientY = document.querySelector('.clientY');

- el 綁定監聽事件，行為：'mousemove'，函式名稱為： pagetarget

2. 並於函式內將前面建立好的DOM 對應變數後面使用 .textContent 的方式撰寫，後面則是 e.screenX; 分別紀錄他們的網頁座標參數

3. 也因為這樣的寫法（textContent），使得在滑動網頁的過程:e.座標
會直接變成文字內容顯示在dom上，看起來是還滿酷的吧

// 事件監聽撰寫：

el.addEventListener('mousemove', pagetarget, false)

function pagetarget(e) {
    screenX.textContent = e.screenX;
    screenY.textContent = e.screenY;
    pageX.textContent = e.pageX;
    pageY.textContent = e.pageY;
    clientX.textContent = e.clientX;
    clientY.textContent = e.clientY;
}


###### tags: `JavaScript - event 事件`