D26 - 走！去浏览器重现奥运决胜点 in

前言

今天来试着用滑鼠事件重现 2021 奥运羽球决胜点！
麟洋配万岁~ 台湾万岁~~

滑鼠 Event 种类

监听事件提供的事件类别很多，而使用者在浏览网页的时候最常使用的是滑鼠的操作，来看看内建哪些滑鼠事件！

click ：滑鼠点击，定义是使用者在同一个位置完成一次的 mousedown 和 mouseup 动作，触发顺序是 mousedown -> mouseup -> click
mouseup：滑鼠按下後放开时
mousedown：按下滑鼠
mousemove：滑鼠移动，连续移动会连续触发
mouseover：滑鼠进入节点时，在节点内部移动会触发多次
mouseenter：滑鼠进入节点时，事件只触发一次
mouseout：滑鼠离开节点时，会冒泡
mouseleave：滑鼠离开节点时，不会冒泡
contextmenu：按滑鼠右键

`mouseover` 和 `mouseout` 的目标差异

在 mouseover 和 mouseout 滑鼠事件中，有两个目标差异，一个称为绝对目标 target，一个是相对目标 relatedTarget。

mouseover

<div>
  <section class='outerbox mouseover'>
    <p>mouseover</p>
  </section>
</div>

event.target：为当下滑鼠触及到的元素
event.relatedTarget ：为滑鼠上一个触及的元素

显示 target 和 relatedTarget 看滑鼠移动时的目标变化

mouseout

<div>
  <section class='outerbox mouseout'>
    <p>mouseout</p>
  </section>
</div>

event.target：为当下滑鼠移开的元素
event.relatedTarget ：为滑鼠进入的元素

显示 target 和 relatedTarget 看滑鼠移动时的目标变化

比较 `mouseenter`、`mouseover` 和 `mouseleave`、`mouseout`

在滑鼠操作中 mouseenter & mouseover 虽然都是滑鼠移动到节点范围内产生动作，但是 mouseenter 只会触发一次，而 mouseover 会因为移动到子节点而持续触发到目标节点。

mouseleave & mouseout 都是滑鼠离开节点时触发动作，但 mouseout 事件会 bubbling 到父层，进而让触发父层的 mouseout 事件，而 mouseleave 没有 bubbling，因此父层不会被触发。

实作不同的滑鼠事件，codepen 连结 -> 滑鼠事件玩玩看

PointerEvent 物件内的属性

不同的事件类别中，有对应的事件物件可以操作，滑鼠 pointerEvent 包括以下：

可以看到光是有关座标 x、y 轴的就有四种，虽然都是取 x、y 但每个数值计算的座标可不相同

clientX、clientY：此座标为滑鼠相对於 浏览器可视区域左上角的距离，不会随着萤幕滚动改变。

pageX、pageY：滑鼠相对於浏览器可视区域左上角距离，会随着萤幕滚动而改变

screenX、screenY：滑鼠相对於萤幕可视区域左上角距离，不会随着萤幕滚动而改变。

offsetX、offsetY：滑鼠相对於物件左上角的距离。

如果光看文字解释还是不懂，我也做了一个小小的作品来比较滑鼠在不同位置上各类座标的数值差异~~ 多玩几次相信就可以理解！
座标轴比较

成品

设计想法：重现荣耀羽球场，当界内时显示「 in! 」，界外时显示「 out 」。

实作：

html 结构

<body>
    <h1>Start</h1>
    <img id="badminton" src="./badminton.png" alt="badminton" />
    <section>
      <div class="base">
        <div class="outerLine"></div>
        <div class="innerLine"><p class="taiwan">aiwan</p></div>
      </div>
    </section>
  </body>

JavaScript 设计想法

// 节点公式放到变数内，之後就不用打落落长取节点罗~
let get = (tag) => document.querySelector(tag);

// 取节点
let inner = get('.innerLine'); // 线内
let h1 = get('h1');      // 显示结果
let base = get('.base'); // 球场

// 设定球场监听事件，让羽球可以随滑鼠移动
base.addEventListener('mousemove', (event) => {
    // 绑定羽球位置为 clientX, clientY 轴
      let positionX = event.clientX; 
      let positionY = event.clientY;
      badminton.style.top = positionY - 30 + 'px'; // 设定position y轴位置
      badminton.style.left = positionX - 10 + 'px'; // 设定position x轴位置
})
      
// 设定球场监听事件，当滑鼠移动到界外时 h1 显示 out
base.addEventListener('mouseenter', (event) => {
      h1.innerHTML = 'out';
});

// 设定界线内监听事件，界内 h1 显示 in
inner.addEventListener('mouseenter', (event) => {
      console.log('inner enter');
      h1.innerHTML = 'in!';
});