# 2-1 、 用 JS 聽案件發生 ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/03 --- ## EventListener *** __==參考 [`EventListener.handleEvent()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/EventListener/handleEvent) 。==__ - 可以對監聽的事件做出反應，例如 User 點擊按鈕或文字(元素)，這些事件觸發後，瀏覽器就會幫你觸發函式。 *** 存成 index.html 檔案，實際上是 `<script src="./index.js"></script>` 指向 .js 檔案: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style> .active { background: orange; } </style> </head> <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.addEventListener('click', onClick) function onClick() { alert('Click yo !') } </script> </body> </html> ``` - `element.addEventListener('監聽的事件名稱', 傳一個 function )` : call back function 。 - 下面用的 anonymous function 跟 call back function 沒甚麼關係，只是無名。 - click Hello ?! Yolo~ 會產生視窗跟你 say Click yo ! ![](https://i.imgur.com/jTC0yDf.png) - 比較常看到的寫法可能是: ``element.addEventListener('click', function() {})`` ; 直接宣告一個 function 在 () 內。 *** 參考資料: [何謂callback function？ - iT 邦幫忙::一起幫忙解決難題，拯救IT ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwio2MqNzd3rAhXoxYsBHabcB60QFjAAegQIAxAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10006207&usg=AOvVaw0ugQBa6wFZIAJvbjc9ZI7L) [重新認識JavaScript: Day 18 Callback Function 與IIFE - iT 邦幫忙](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwio2MqNzd3rAhXoxYsBHabcB60QFjABegQIFRAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10192739&usg=AOvVaw2mbdkbR-1vV2tnH-tCsGKb) [回呼函式\- 術語表| MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwio2MqNzd3rAhXoxYsBHabcB60QFjAEegQIBBAB&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FGlossary%2FCallback_function&usg=AOvVaw1AL8vWCOKkBvzG_w1NUY0X) --- # 2-2 、 call back function (補充) ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/03 --- ==2-1 提到的 - `element.addEventListener('監聽的事件名稱', 傳一個 function )` : call back function 。== - 為何這樣寫? 1. 因為不知道 User 何時按按鈕，所以無法一直停在這等。 - 例如這樣寫的話，程式 會一直卡在這，無法做其他事情: ``` <script> const element = document.querySelector('#block') element.addEventListener('click', function() {}) const event.addEventListener('click') </script> ``` 2. 以 EventListener 來說，可以告訴瀏覽器，當有人點擊按鈕時，觸發事件後，幫忙呼叫 function 。 3. 例如在百貨公司美食街吃飯時不可能一直排在那，會給你一個震動提示器，餐點好了後會叫你這樣。 --- # 2-3 、 E for Everything ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/04 ==之前 EventListener 點擊事件補充。== - 瀏覽器對應事件 (event) 呼叫參數的時候，會有所紀錄。 - 而像 ``addEventListener('keyDown', function(e)`` ， 有人會取名 (evt) 。 - event 簡寫 e ， e 這個名稱是可以自己取名的，是一 個參數。 --- 存成 index.html 檔案，實際上是 `<script src="./index.js"></script>` 指向 .js 檔案: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style> .active { background: orange; } </style> </head> <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.addEventListener('click', function(e) { console.log(e) }) </script> </body> </html> ``` - 如果對 "e" 進行 log ， 再用 dev tool 看會發現: ![](https://i.imgur.com/PWijBmi.png) 回傳並記錄了許多參數。 - 瀏覽器會對應 event ， 呼叫 function 對應並代入許多參數。 - 這個 e 是一個 Mouse Event ， target 是比較重要的代表點了哪個元素。 - 可以用 `console.log(e.target)` 找出拿到了甚麼元素。 ## keydown 用上面的 .html 檔案，代入 ``<script></script>`` : ``` <body> <div id='block'> Hello ?! <input /> <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.addEventListener('keydown', function(e) { console.log(e) }) </script> </body> ``` - 會記錄按的哪個按鍵，可以用 e 來拿到按到的資訊。 ## 也可以做到觸發事件換背景顏色 ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style> .active { background: orange; } </style> </head> <body> <div id='block'> Hello ?! <input /> <a>Yolo~</a> <button class='change-btn'>change</button> </div> <script> const element = document.querySelector('.change-btn') element.addEventListener('click', function(e) { document.querySelector('body').classList.toggle('active') }) </script> </body> </html> ``` - event 觸發 CSS 更改背景樣式。 --- 參考資料: [重新認識JavaScript 番外篇(6) - 網頁的生命週期 - iT 邦幫忙 ...](https://ithelp.ithome.com.tw/articles/10197335) [Event.target - MDN Web Docs - Mozilla](https://developer.mozilla.org/zh-TW/docs/Web/API/Event/target) --- # 2-4 、 表單事件處理 onSubmit ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/04 ## __==表單送出以前觸發事件。==__ - 像是用在表單驗證、不要送出...等。 --- .html 內: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style> .active { background: orange; } </style> </head> <body> <form class='login-form' method='GET' action=''> <div> username: <input name='username' /> </div> <div> password: <input name='password' type='password' /> </div> <div> password again: <input name='password2' type='password' /> </div> <input type='submit' /> </form> <script> const element = document.querySelector('.login-form') element.addEventListener('submit', function(e) { alert('submit!') }) </script> </body> </html> ``` - 要注意密碼要給 code 一個 type='password' 。 - 表單送出，如果沒有指定送出的話，預設就是同一個網頁。 - 表單的網頁如沒有指定 method 的話預設動作就是 GET 。 --- ## __==如果不想送出表單。==__ - 可以在 ``function(e) {e.preventDefault()}`` 這樣做。 - 會阻止瀏覽器的預設行為，送出表單的這個動作。 --- 詳細一點如果密碼不同可以這樣做: ``` <script> const element = document.querySelector('.login-form') element.addEventListener('submit', function(e) { const input1 = document.querySelector('input[name=password]') const input2 = document.querySelector('input[name=password2]') if(input1.value !== input2.value) { alert('密碼不同') e.preventDefault() } }) </script> ``` - 輸入的密碼不同就不會提交表單。 ![](https://i.imgur.com/sAMpbv9.png) *** # 2-5 、 阻止預設行為 ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/04 ## `e.preventDefault` ==以 2-4 的阻止密碼送出，設定個超連結:== ``` <a href='/test'>link</a> </form> <script> const element = document.querySelector('.login-form') element.addEventListener('click', function(e) { e.preventDefault() }) </script> ``` - 幫超連結點擊加上了阻止送出。 ## 或是阻止某些字輸入 ==以 2-4 的阻止密碼送出，設定個阻止字元輸入:== ``` <script> const element = document.querySelector('input[name=username]') element.addEventListener('keypress', function(e){ if (e.key === 'e') { e.preventDefault() } }) </script> ``` - 可以阻止使用小寫 e 的字元輸入。 - 常見在表單的送出還有超連結。 *** 參考資料: [Event.preventDefault() - MDN Web Docs - Mozilla](https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault) [[筆記][JavaScript]所謂的「停止事件」到底是怎麼一 ... - iT 邦幫忙](https://ithelp.ithome.com.tw/articles/10198999) ---