event 物件 - 告知你當下元素資訊

Posted on In

例如，當我「在做onclick」時，會提供當下的元素資訊

html:

1
<input type="button" class="btn" value="點擊">

JS:

🎃 建立一個變數el，並且用.querySelector來選取.btn

🎃 把.onclick綁定到el上

1
2
3
4
5
var el = document.querySelector('.btn');

el.onclick = function(){
    alert('hello');
}

當我點擊按鈕，就會跳出 alert

滑鼠的“座標位置”

🎃 現在，我想要知道「滑鼠點擊按鈕時，滑鼠目前的“座標位置”」

  • 知道滑鼠的“座標位置”後，我就可以設計出：點擊按鈕的「右上角」，會跳出特定視窗

作法如下：

🎃 在.onclick的「function小括號」裡面，帶入一個「參數 e」

🎃 用console.log(e);來看e會顯示什麼

JS:

1
2
3
4
5
6
var el = document.querySelector('.btn');

el.onclick = function(e){
    console.log(e);
    alert('hello');
}

當我點擊按鈕時，除了跳出alert('hello');，在 Console 會出現一個「object」

這個 object 代表的內容：

🎃 當我在執行「事件」時，會在function帶入一個參數（參數可以隨意命名，通常會命名為e或是event）

🎃 function 的「第一個參數e」的用途：

  • 是用來「傳遞資訊」的（在這個參數e裡面，賦予 object 的值）–> 記錄「點擊按鈕後的各種資訊」

因此，在 Console 就會顯示

  • 目前正在執行的是「MouseEvent 事件」
  • 記錄了各種「滑鼠的座標位置」，得知這些資訊後，就可以去做一些更進階的功能

🍋 點擊按鈕的「右上角」，顯示的座標是[44, 11]

🍋 點擊按鈕的「左下角」，顯示的座標是[8, 25]

  • 原本「altKey」是 false

如果我「按著 alt 去點擊按鈕」，「altKey」就會是 true

「MouseEvent」裡面的資訊，能做什麼呢？

  • 得知：我目前在點擊的是什麼內容

  • 在做「系統介面」時，有時會這樣設計：例如按著「alt」加上另一個鍵，就會跳出更詳細的資訊 or 改變選單的排列方式