前兩篇關於 DOM 的文章，我們大略知道如何新增、刪除或修改 DOM 中的節點了。這篇來了解如何監控 DOM 產生的事件們。
具體的事件類別（type）有：
太多惹，以上僅列出部分
DOM 事件分成許多類，目前的主題聚焦在網頁上，所以我們討論的是使用者與瀏覽器互動所造成的 DOM 事件。
以下介紹關於 event 與他的好伙伴們（<ゝω・）☆
addEventListener() 監聽元素的事件，當目標元素的指定事件發生時，執行指定程式碼。removeEventListener() 將元素與事件斷開以下僅列出部分
只可讀：
cancelable="true" 時，取消事件的行為，但不影響事件的傳遞設定一個函式或物件，當指定的事件被呼叫時就會執行函式／加入物件。
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)
參數說明：
{capture: true} 的事件監聽器 type 會優先被捕捉；若有多個同樣為 true 的事件監聽器，則會依註冊順序捕捉。來個練習吧！例子來自 GPT，略為修改
<div class="box">
<h3>addEventListener 的練習</h3>
<p>嗨你好</p>
<p>我是</p>
<button id="btn">click</button>
<p>海獺</p>
</div>
// 基本使用
// Q. 按下按鈕在控制台出現一段話
const btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
console.log("被點惹>///<");
});
// 語法
theTarget = event.target
直接上例子吧 :D
<button id="btn">click</button>
// 取得 e.target
const btn = document.querySelector("#btn");
btn.addEventListener("click", function (e) {
console.log(e.target); // <button id="btn">click</button>
});
例子二
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<p id="output"></p>
// Q. 按下 btn 可改變 p 的內容
const buttons = document.querySelectorAll("button");
const output = document.getElementById("output");
function handleButtonClick(event) {
let content = event.target.textContent;
output.textContent = `"${content}" is clicked!`;
}
buttons.forEach((button) => {
button.addEventListener("click", handleButtonClick);
});
直接上例子吧:D
例子來自 GPT，略為修改
<input type="text" id="input" placeholder="輸入一些字">
// 取得 input 的輸入內容
const input = document.getElementById("input");
input.addEventListener("input", function (e) {
const content = e.target.value; // 取得 input 的輸入值
console.log("Input value:", content);
});
直接上例子吧:D
例子來自 GPT，略為修改
<div class="color-box">點我隨機換色</div>
.color-box {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 3% 4.5%;
}
// Q. event.target.style 更改 css style
const colorBox = document.querySelector(".color-box");
function changeColor(event) {
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
event.target.style.backgroundColor = randomColor;
}
colorBox.addEventListener("click", changeColor);
multiple="multiple" 屬性可以選取多個檔案直接上例子吧:D 一樣來自 GPT，略加修改
Q：請寫一個 HTML 表單，包含一個文件上傳的 <input> 元素。當使用者選擇文件後，請使用 JavaScript 來顯示所選文件的名稱和大小。
<input type="file" id="fileInput">
<div id="output"></div>
const input = document.getElementById("fileInput");
const output = document.getElementById("output");
input.addEventListener("change", function (e) {
const files = e.target.files;
if (files.length > 0) {
const file = files[0];
output.textContent = `檔案名稱：${file.name}, 檔案大小：${file.size} 位元組`;
} else {
output.textContent = "沒有選擇文件。";
}
});
自己覺得這篇很精實XD
要在一篇裡塞那麼多東西，獺腦袋瓜差點燒惹ˊ_>ˋ
參考資料
iThome鐵人賽
看影片追技術