嗨嗨！我是Winnie溫尼～

前言

前面的章節，我們認識到了DOM元素中修改文字內容、增加、修改和移除標籤中的屬性以及各式取值方法，今天要介紹的是增加網頁更多互動效果的Event事件，一起來看看吧～！

Event事件

addEventListener 註冊監聽事件

用於偵測使用者是否有對此元素觸發特定的行為。

變數名稱.addEventListener("觸發行為",function(event){
    觸發後要進行的動作;
});

<-- HTML -->
<a href="#" class="btn">Button</a>

//JavaScript
const btn = document.querySelector(".btn");
btn.addEventListener("click", function (event) {
  console.log("點到按鈕"); //在console印出"點到按鈕"的資訊
  btn.textContent = "Click!"; //將原本`<a></a>`標籤內的文字Button更換成Click!
});

nodeName 取得HTML標籤

常使用於判斷當前的元素HTML標籤。
注意：回傳的值會是大寫英文字
變數名稱.nodeName;
例：

<-- HTML -->
<a href="#" class="btn">Button</a>

//JavaScript
const btn = document.querySelector(".btn");
btn.addEventListener("click",function(event){
    console.log(btn.nodeName)
})
//A

event.target 偵測目前觸發元素的位置

常與nodeName一起使用，寫成e.target.nodeName判斷當前的元素。
event.target;
例：

<-- HTML -->
<a href="#" class="btn">Button</a>

//JavaScript
const btn = document.querySelector(".btn");
btn.addEventListener("click", function (event) {
  console.log(event.target);
});
//<a href="#" class="btn">Button</a>

preventDefault 取消預設觸發行為

preventDefault();
例：

<!-- HTML -->
<a href="https://ithelp.ithome.com.tw">iT邦幫忙</a>

//JavaScript
const link = document.querySelector("a"); //選取a標籤
link.addEventListener("click", function (event) {
  event.preventDefault(); //正常來說點擊a連結會跳轉到iT邦幫忙的網站，使用取消預設觸發行為即可取消連結跳轉
});

補充-回調函式 Callback function

在這個章節所看到得函式跟先前的函式長得有些不一樣，這邊的函式稱為「回調函式 Callback function」，回調函式在設定的事件被觸發滿足該條件時才會被動去執行我們所指定的第二個參數，也就是某個「函式」。

參考資料

原生JavaScript 觸發事件表
事件 (Event) 的註冊、觸發與傳遞
重新認識 JavaScript: Day 18 Callback Function 與 IIFE

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～