## DOM 事件 DOM 「事件」是在網頁或瀏覽器環境中，發生的特定動作或行為。 例如點擊按鈕、滾動滾輪、按下鍵盤鍵等。 它讓 JavaScript 在這些事件動作發生時，可以執行特定的代碼，並促成互動式網頁的基本機制。 ## 常見的DOM事件 DOM 定義了許多種事件，以下列出一些常見的事件： * click：當使用者點擊元素時觸發。 * mousemove：當滑鼠在元素上移動時觸發。 * keydown：當使用者按下鍵盤按鍵時觸發。 * load：當瀏覽器完成載入網頁時觸發。 * change：當表單元素的值被改變時觸發。 ## 事件監聽器 ``` document.addEventListener(event, function); ``` ## 範例1 Hello ```xml <!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>Hello!</h1> <form> <input autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> </body> <script> document.querySelector('form').addEventListener('submit', function(){ let name = document.querySelector('#name').value; alert(`Hello, ${name}!`); }); </script> </html> ``` ## Project1 ::: success 請寫一個heading 上面寫 HELLO 跟一個按鈕 按下按鈕可以 讓heading 在 HELLO 跟 GOODBYE 做切換 ::: ## 範例2 Counter ```xml <!DOCTYPE html> <html> <head> <title>Counter</title> </head> <body> <h1>0</h1> <button>Count</button> </body> <script> let counter = 0; document.querySelector('button').addEventListener('click', function count(){ counter ++; document.querySelector('h1').innerHTML = counter; } }); </script> </html> ``` ## Project 2 :::success 針對範例題目做修改 增加新功能: 1. counter 數到10的倍數時 會跳出一個 alert 報數 2. 新增一個reset 按鈕 可以讓 counter 歸零 ::: 其實DOM操作還可以做到很多事情，可以修改節點屬性 CSS 內容。甚至還可以增加跟刪除節點 ## 範例3 Color ```xml= <!DOCTYPE html> <html> <head> <title>Colors</title> </head> <body> <h1 id="hello">Hello!</h1> <button date-color="red">Red</button> <button data-color="blue">Blue</button> <button data-color="green">Green</button> </body> <script> //change font color to red document.querySelector("#red").onclick = function(){ document.querySelector('#hello').style.color = 'red'; }; //change font color to blue document.querySelector("#blue").onclick = function(){ document.querySelector('#hello').style.color = 'blue'; }; //change font color to green document.querySelector("#green").onclick = function(){ document.querySelector('#hello').style.color = 'green'; }; </script> </html> ``` ## Project 3 :::success 很簡單 將按鈕修改成更改字體大小 (大中小) :::