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’) 視窗 [接電話]

部分元素會有預設⾏為，或是表單
的 submit 等等。

如需在上⾯綁定 click 事件時，需要先透過
event.preventDefault( ) 取消預設⾏為

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

});