iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

Be friend with JavaScript系列 第 9

Day 9 - Event

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


上一篇
Day 8 - DOM - Element Object
下一篇
Day 10 - Web Storage API
系列文
Be friend with JavaScript39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言