javascript 6.8 事件

--- title: javascript 6.8 事件 tags: javascript, 5x --- 6.8 0320 javascript 事件 === Q. 什麼時候會有事件發生? A. 滑鼠移動點擊某個連結/按鈕捲動滾輪 # 描述事件的方式 ## 1. 直接把事件加在元素的標籤裡面 Eg. onclick方法 ```htmlmixed <body> <a href="#" onclick="alert('hi');">按我!</a> </body> ``` 也可以寫成javascript的function ```htmlmixed <body> <a href="#" onclick="clickme();">先按我!</a> </body> <script> function clickme() { console.log('我被按了！'); } </script> ``` Eg. onmouseover ## 2. 把事件寫在Event Listener ### Step 1. 元素id取名 html ```htmlmixed <a href="#" id="clicker">Event Listener</a> ``` ### Step 2. 用DOM的概念將元素抓出來 javascript ```javascript var clicker = document.querySelector('#clicker'); ``` ### Step 3. callback function 回呼函式 1. 讓元素使用`.addEventListener`設定DOM想要監聽的事件為`click` 2. 只要事件發生了，就去觸發後的函式 javascript ```javascript= clicker.addEventListener("click", function(){ console.log('我被按了QQ'); }); ``` console ```bash 我被按了QQ ``` 注意! javascript重視引入的時序，所以使用Listener時，將要引入的script片段`<script></script>`放於底部 html ```htmlmixed <a href="#" id="clicker">Event Listener</a> <script src="script/script.js"></script> ``` ## 3. 省略Event Listener的方法 ```javascript= var clicker = document.querySelector('#clicker'); clicker.addEventListener("clicker", function(){ console.log('我被按了QQ'); }); ``` 以上的javascript可改寫為 ```javascript= var clicker = document.querySelector('#clicker'); clicker.onclick = function() { console.log('我被按了YY'); } ``` ## 4. Event Listener 傳參數 eg. 預設的送出表單`submit`，在實務上常常會先用`.preventDefault();`關掉原本的預設行為，目的是為了在送出表單前寫驗證的function，檢查表單上的欄位。 ```javascript= var clicker = document.querySelector('#clicker'); clicker.addEventListener("clicker", function(evt){ evt.preventDefault(); console.log('我被按了QQ'); }); ``` ## 5. 省略Event Listener的傳參數寫法 ```javascript= var clicker = document.querySelector('#clicker'); clicker.onclick = function(evt){ evt.preventDefault(); console.log('我被按了YY'); }; ``` # Unobtrusive JavaScript(UJS) 非侵入式Javascript ## Callback Function: 把function當作參數傳遞 eg. 以下程式把sayHello指定給`.onlick`或放在`.addEventListener`裡面 * 注意：這裡的sayHello後面沒有小括號，因為沒有馬上被呼叫 * 只有符合條件才會被呼叫 * 如果加了小括號，就會立刻被呼叫 javascript ```javascript= var zone = document.querySelector('#zone'); /* 第一種寫法 */ zone.onclick = sayHello; /* 第二種寫法 */ zone.addEventListener("click", sayHello); function sayHello() { console.log('Hello'); } ``` ## 改寫上一章節的程式碼，將事件寫為UJS ### Step 1. 把HTML裡的`onlick=`function都刪掉 html 把 ```htmlmixed <a href="#" class="addProduct" onclick="addProduct(-1)">-</a> <a href="#" class="addProduct" onclick="addProduct(1)">+</a> <a href="#" class="selectAll" onclick="selectAllSkills()">我全都要</a> ``` 改為 ```htmlmixed <a href="#" class="addProduct" id="minusItem">-</a> <a href="#" class="addProduct" id="addItem">+</a> <a href="#" class="selectAll">我全都要</a> ``` 如果class名稱相同，就取id名字區別功能。 ### Step 2. 用DOM抓取class (或id) * 1. 然後加上`.addeventlistener` ```javascript= document.querySelector('.selectAll').addEventListener("click", function(evt){ evt.preventDefault(); selectAllSkills(); }); ``` p.s. 若`.preventDefault()`省略不寫也不影響功能的情況，可改寫為： ```javascript= document.querySelector('.selectAll').addEventListener("click", selectAllSkills); ``` 注意：`selectAllskills`不含小括弧。 * 2. 或者是寫成`.onlick` ```javascript= document.querySelector('#minusItem').onclick = function(evt){ evt.preventDefault(); addProduct(-1); }; document.querySelector('#addItem').onclick = function(evt){ evt.preventDefault(); addProduct(1); }; ``` 改寫後可以讓HTML頁面的javascript語法移至script檔，讓程式碼更容易維護。

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.