上一篇已經可以透過 DOM 修改文字、樣式和元素，不過那些程式會在網頁載入時直接執行。如果想等使用者按下按鈕後再修改畫面，就要使用事件。

事件是網頁中發生的動作，例如點擊按鈕、在輸入框打字或按下鍵盤。這裡先從最常見的click開始，準備一個按鈕和顯示次數的文字：

<button id="add" type="button">增加一次</button>
<button id="reset" type="button">重新計算</button>
<p>點擊次數：<span id="count">0</span></p>

首先選取要操作的元素，並準備一個變數保存目前次數：

const addButton = document.querySelector("#add");
const resetButton = document.querySelector("#reset");
const countText = document.querySelector("#count");
let count = 0;

接著使用addEventListener()監聽按鈕的點擊事件：

addButton.addEventListener("click", () => {
  count += 1;
  countText.textContent = count;
});

addEventListener()的第一個資料是事件名稱，這裡的click代表點擊。第二個資料是一個函式，只有按鈕被點擊時才會執行。每點一次，count會增加 1，再透過textContent更新畫面。

重新計算按鈕也能監聽自己的click事件：

resetButton.addEventListener("click", () => {
  count = 0;
  countText.textContent = count;
});

按下這個按鈕後，變數和畫面上的文字都會回到 0。不同元素可以分別設定要監聽的事件，也可以在事件發生後執行不同操作。

除了按鈕，輸入框也能監聽input事件。先準備輸入框和預覽文字：

<label for="message">輸入內容</label>
<input id="message" type="text">
<p>即時預覽：<span id="preview">尚未輸入</span></p>

接著在輸入內容發生變化時，取得輸入框目前的value：

const messageInput = document.querySelector("#message");
const preview = document.querySelector("#preview");

messageInput.addEventListener("input", () => {
  preview.textContent = messageInput.value;
});

現在每輸入一個字，input事件就會執行一次，預覽文字也會跟著改變。click適合處理點擊，input則適合處理即時輸入，之後遇到其他操作時也能使用相同方式加入對應的事件監聽器。