在介紹事件本身之前，於本篇先行介紹兩種操術師觀測事件發生之工具

onXYZ

此處的XYZ代表各種類之事件，例如鼠輩之點擊，即為click事件，事件觀測器施於元素之操術法如下：
某個元素.onclick = 函式之術

或是使鼠輩滑入元素，即為mouseenter事件，操術法如下：
某個元素.onmouseenter = 函式之術

以下示例將函式之術設定為出現一彈跳式視窗，並針對按鈕元素進行click事件之觀測：

const button = document.querySelector("button");

function myFunction() {
    alert("打咩");
}

button.onclick = myFunction;

分段註釋如下：
選擇按鈕元素。

const button = document.querySelector("button");

定義函式之術名myFunction，術式內容為出現彈跳式視窗「打咩」之警示。

function myFunction() {
    alert("打咩");
}

對按鈕元素設定事件觀測器以觀測click事件。

button.onclick = myFunction;

使鼠輩點擊於按鈕元素後，於介面彈跳出「打咩」之警示。

示例處

然此觀測器之劣處，在於操術師對此事件只能施單一術於其上，因此日前的操術師已不常使用此觀測器。

假設欲使鼠輩滑入方框元素後施二函式之術，一術為改變方框元素背景顏色，另一術為改變方框內文字顏色，設定如下：

const square = document.querySelector(".square");

function myFunction1() {
    this.style.backgroundColor = "darkseagreen";
}

square.onmouseenter = myFunction1;

分段註釋如下：
選擇方框元素。

const square = document.querySelector(".square");

定義函式之術名myFunction1，術式內容為改變方框元素背景顏色。

function myFunction1() {
    this.style.backgroundColor = "darkseagreen";
}

對方框元素設定事件觀測器以觀測mouseenter事件。

square.onmouseenter = myFunction1;

首先針對函式術之一進行測試，確認鼠輩滑入方框後，方框確實會改變顏色。

接著設定函式術之二，名myFunction2。

const square = document.querySelector(".square");

function myFunction1() {
    this.style.backgroundColor = "darkseagreen";
}

square.onmouseenter = myFunction1;

// 函式術之二
function myFunction2() {
    this.style.color = "coral";
}

square.onmouseenter = myFunction2;

然發現鼠輩移入時，方框背景顏色仍舊，唯變更文字色彩。

示例處

欲解決此困境，需使用下方介紹之事件觀測器。

EventListener

事件觀測器施於元素之操術法如下：
某個元素.addEventListener("事件", 函式之術);

以點擊鼠輩為例，操術法即為：
某個元素.addEventListener("click", 函式之術);

將前例以EventListener觀測器改寫術法：

const square = document.querySelector(".square");

function myFunction1() {
    this.style.backgroundColor = "darkseagreen";
}

function myFunction2() {
    this.style.color = "coral";
}

// 以EventListener改寫
square.addEventListener("mouseenter", myFunction1);
square.addEventListener("mouseenter", myFunction2);

可成功將二術施於鼠輩滑入方框之事件發生後。

示例處

因此EventListener觀測器相較於onXYZ觀測器之優點為

1. 可以對於同一事件施予不同的函式之術
2. 可控制事件觸發階段之捕獲或冒泡之設定(將於之後的篇章說明)
3. 日前世上操術師多使用此觀測器

示例之術式

紀錄者註：本篇之術式內容置於下方連結供參閱，日後之篇章亦會陸續將術式內容置於其上。
https://github.com/CReticulata/2024ithome/tree/main/Day02

翻譯

事件處理函式之術：event handler
鼠輩：滑鼠
操術法：語法
術名：function name

相關連結

• addEventListener - MDN