---
# System prepended metadata

title: 2-1 、 用 JS 聽案件發生
tags: [Lidemy心得, 2020九月第一周, FE102, HTML+CSS, 進度筆記]

---

# 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)  

---

