Day 9 - Event - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 9

自我挑戰組

Be friend with JavaScript系列第 9 篇

Day 9 - Event

13th鐵人賽

Wen Ning

2021-09-10 23:59:10

1238 瀏覽

分享至

Event 表示在 DOM 物件上所發生的事件，例如

click 點擊滑鼠
dblclick 滑鼠連點兩下
keydown 按下鍵盤時
load 網頁或圖片完成下載時
mousedown 按下滑鼠按鍵時
scroll 當捲軸被拉動時
select 當文字被選取時
submit 當按下送出時

而當 Event 發生時，就會需要 EventListener（事件監聽）來了解 Event 發生的始末。

addEventListener()

element.addEventListener(event, function, useCapture)
第一個參數是 Event 的類型，第二個參數是在 Event 發生時調用的函數，第三個參數是一個布林值，表示使用事件冒泡(false)或是事件捕獲(true)，若沒寫第三個參數，會預設為 false。

例如：

<button id="myBtn">Try it</button>

// 綁定 id 為 myBtn 的這個元素
let myBtn = document.getElementById("myBtn");

// 對 myBtn 做事件監聽，點擊 button 時會觸發 myFunction
myBtn.addEventListener("click", myFunction);
function myFunction() {
  alert("Hello!");
}

執行上面的程式碼，點擊 button 後就會跳出一個視窗寫 Hello!

target

<body>
<h1>This is h1</h1>
</body>

let h1 = document.querySelector('h1');
h1.addEventListener('click',e =>{
    console.log(e)//得到一個click的event object
    console.log(e.target)//得到點擊的所在位置，點h1時得到<h1>
    console.log(e.target.innerHTML)//按下h1時，得到This is h1
    console.log(e.target.parentElement)//<body>
    console.log(typeof e.target)//object
})

preventDefault()

submit會導致提交時網頁會重新整理過一遍，想取消這個預設動作可以用preventDefault()，使表單不提交出去

<form>
<button type="submit">送出</button>
</form>

let btn = document.querySelector('button');
btn.addEventListener('click',e =>{
    e.preventDefault();
})

則點按鈕時，表單不會被提交出去，頁面也不會重刷

Event Bubbling

點選元素時，他的parent element也會跟著被啟動，像泡泡一樣一直擴散出去

<div class="adiv">
    <button class="btn">click</button>
</div>

let adiv = document.querySelector('div.adiv');
let btn = document.querySelector('div.button');
adiv.addEventListener("click",()=>{
    alert('div的callback正在執行');
})
btn.addEventListener("click",()=>{
    alert('button的callback正在執行');
})

執行上面程式碼後，點擊按鈕後除了會跳出按鈕的視窗之外，也會跳出div的視窗(往父層擴散)，但如果點擊div則指會跳出div的視窗

stopPropagation()

停止Event Bubbling

<div class="adiv">
    <button class="btn">click</button>
</div>

let adiv = document.querySelector('div.adiv');
let btn = document.querySelector('div.button');
adiv.addEventListener("click",()=>{
    alert('div的callback正在執行');
})
btn.addEventListener("click",e =>{
    e.stopPropagation();
    alert('button的callback正在執行');
})

執行上面程式碼停止Event Bubbling後，點擊按鈕後就不會也跳出div的視窗了
參考資料：
w3schools - Dom Event Objects