[JS30] Day16: CSS Text Shadow Mouse Move Effect
keywords: mouseevent
, mousemove
, offset
, 解構賦值
, Destructing
在今天的練習中會做出陰影可以跟著滑鼠移動的效果。
this 和 e.target 在 eventHandler 中的差異
在 element.addEventListener
中使用 this
和 e.target
的差異:
this
總是會拿到被監聽的對象本身,也就是 element.addEventListener(<eventHandler>
) 的 element。e.target
則是指事件被觸發時的對象,有可能不是 element 本身。
const hero = document.querySelector('.hero');
hero.addEventListener('mousemove', moveShadow);
function moveShadow(e) {
console.log('this', this); // 回傳的一定是 ".hero"
console.log('e', e.target); // 回傳的可能是 ".hero" 也可能是 "h1"
}