今天的實作要做一個常見的特效，就是讓頁面上的文字陰影隨著滑鼠移動而跟著改變位置。而這次頁面上的文字是可編輯的，只要點選中間的文字即可進入編輯狀態，實作範例如下：

邏輯流程

1. 取得容器div以及文字h1等元素
2. 監聽mousemove事件
3. 抓取容器的寬高以及滑鼠的XY坐標
4. 換算陰影的XY方向位移
5. 對文字元素設定陰影位置以及顏色

課程重點

1. contenteditable：讓element中的文字可以被編輯
2. 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。
3. 滑鼠在經過中間的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時，就代表滑鼠移動到別的元素中，需要修正坐標。