---
# System prepended metadata

title: 五倍js-week3  jQuery 事件處理

---

# 五倍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


### 網⾴常⾒事件


![](https://i.imgur.com/o5286Fy.jpg)

* 滑鼠相關事件
* click / hover / scroll 
* 鍵盤相關
* keydown / keyup / keypress 
* 表單相關
* focus / blur / change / submit 
* 先前說的 load / ready 也是⼀種事件。

### 寫法

```$(SELECTOR).on(事件名稱, callback)```

![](https://i.imgur.com/q9xC7lj.jpg)



* btn 按鈕被點擊了 [電話響了] 
 —> 跳 alert('Hello') 視窗 [接電話]
 
 
 部分元素會有預設⾏為，如 <a> 的連結，或是表單
的 submit 等等。
如需在上⾯綁定 click 事件時，需要先透過
```event.preventDefault( )``` 取消預設⾏為

```
$('.block .btn').click(function(e){
//取消預設事件
e.preventDefault();

});
```

 
 
 



