昨天我們學會了用DOM找到HTML裡的元素。也成功讓JavaScript把標題改掉，但如果我希望：
「按下按鈕之後，標題才改變。」
這時候就需要今天的主角——Event（事件）!!!
將Event當作是觸發一件事情的開關，讓操作者點擊或者滑動又或者是任何操作時的觸發事件。有很多事件都可以觸發大致如下：
JavaScript可以「等待」這些事件發生，然後輸出操作者給予的指令。
以下會有一個小示範
const title = document.querySelector("#title");
title.textContent = "你被我找到了!";
const button = document.querySelector("#button")
button.addEventListener("click", function() { title.textContent = "成功觸發事件拉"; });
我們來分析看看意思是什麼呢?
const title = document.querySelector("#title");
title.textContent = "你被我找到了!";
以上是昨天學到的DOM，querySelector("#title") 會去 HTML 裡面找到 id="title" 的元素，然後把它存到 title 這個變數裡。下面那行title.textContext就是改成你要的文字，網頁即可呈現。
const button = document.querySelector("#button")
button.addEventListener("click", function() { title.textContent = "成功觸發事件拉"; });
這裡id概念跟上面title一樣，改成尋找id="button"的元素，然後存到button這個變數裡。到這邊我相信大家都可以，接著重頭戲來啦!!!先把下面這行拆成三個部分
button(我要監聽誰?)、click(要等待什麼事件發生?)、funtion(發生了要做誰什麼?)
從這裡去轉一下語意就變成：
「當button被點擊時，就把title的文字改成"成功觸發事件拉"」
<body>
<h1 id="title">JavaScript</h1>
<button id="button">點我</button>
</body>
點擊「點我」就會觸發點擊事件(Onclick)
將這個addEventListener()函式想像成一個「小耳朵」，他會一直等到我們指定的觸發事件發生，當真的點下按鈕觸發事件，就會執行funtion()裡面的程式，而title.textContent="你被我找到了!"單純改變文字標題。
經過這兩天對DOM還有Event有了一定的了解，對於單純改文字還有觸發事件也做了明確的區分，我相信不會再有搞混的時候啦~ 那今天也明確知道JavaScript不只可以直接改網頁還可以等待我們的動作，再做出反應!!!很有趣吧!!明天見啦!!
iThome鐵人賽
看影片追技術