第十六堂 – Mouse Move Shadow

 邏輯流程
取得容器div以及文字h1等元素
監聽mousemove事件
抓取容器的寬高以及滑鼠的XY坐標
換算陰影的XY方向位移
對文字元素設定陰影位置以及顏色
課程重點
contenteditable：讓element中的文字可以被編輯
destructured assignment：前面課程有用過的解構賦值，是ES6的一種快速給定變數值的方法。而這次的用法比上堂課又再進階一些
const hero = document.querySelector(‘.hero’);
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = hero;
let { offsetX: x, offsetY: y } = e;
…
…
}
上面的意思是將hero這個元素的屬性offsetWidth、offsetHeight指定給自訂的變數width和height。然後把mousemove事件e的屬性offsetX、offsetY指定給自訂變數x和y。
滑鼠在經過中間的h1元素時，mousemove event的offsetX、offsetY會以元素左上角為坐標原點，造成滑鼠位置坐標不連續，因此課程中加入一段Code來修正這個問題
if (this !== e.target) {
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
this是hero.addEventListener(‘mousemove’, shadow)shadow()的this，所以永遠為hero。而e.target則根據滑鼠位置可能是hero或是h1元素。所以當this不等於e.target時，就代表滑鼠移動到別的元素中，需要修正坐標。