# 五倍js-week3 jQuery 事件處理
課程大綱紀錄與補充教材：https://paper.dropbox.com/doc/202106-JS-vjgYUNZennszQoPwB911e
## event 事件
* JavaScript 是個事件驅動 ( Event-driven ) 的語⾔
* 瀏覽器讀入網⾴後，雖然⾺上載入 JavaScript 程式碼，但
是必須等到使⽤者點選連結或啟動其他滑鼠事件後，才會再
進⾏對應程式的執⾏。
* 就好比辦公室擺了⼀台電話在桌上，但是電話要是沒響，我
們不會主動去「接電話」 (也無法主動接) 。
* 電話響了 (event) -> 接電話 (callback function)
## 事件綁定
* HTML 標記內聯綁定事件
**極度不推薦使用**
``` <div onclick="alert('hi');">Hi</div> ```
* 非侵入⽅式綁定
關注點分離: HTML / CSS / JavaScript
### 網⾴常⾒事件
* 滑鼠相關事件
* click / hover / scroll
* 鍵盤相關
* keydown / keyup / keypress
* 表單相關
* focus / blur / change / submit
* 先前說的 load / ready 也是⼀種事件。
### 寫法
```$(SELECTOR).on(事件名稱, callback)```
* btn 按鈕被點擊了 [電話響了]
—> 跳 alert('Hello') 視窗 [接電話]
部分元素會有預設⾏為，如 <a> 的連結，或是表單
的 submit 等等。
如需在上⾯綁定 click 事件時，需要先透過
```event.preventDefault( )``` 取消預設⾏為
```
$('.block .btn').click(function(e){
//取消預設事件
e.preventDefault();
});
```
{"metaMigratedAt":"2023-06-16T04:37:15.935Z","metaMigratedFrom":"Content","title":"五倍js-week3 jQuery 事件處理","breaks":true,"contributors":"[{\"id\":\"59029f5b-08ba-4aaa-b70e-e21a1bc56f96\",\"add\":977,\"del\":0}]"}