iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

33歲轉職者的前端筆記系列 第 26

[鼠年全馬鐵人挑戰] Week26 - jQuery 事件處理

event 事件

  • JavaScript 是個事件驅動 ( Event-driven ) 的語⾔
  • 瀏覽器讀入網⾴後,雖然⾺上載入 JavaScript 程式碼,但
  • 是必須等到使⽤者點選連結或啟動其他滑鼠事件後,才會再
  • 進⾏對應程式的執⾏。
  • 就好比辦公室擺了⼀台電話在桌上,但是電話要是沒響,我
  • 們不會主動去「接電話」 (也無法主動接) 。
  • 電話響了 (event) -> 接電話 (callback function)

事件綁定

  • HTML 標記內聯綁定事件
    但不推薦使用最好是別用這方法
    <div onclick="alert('hi');">Hi</div>

  • 非侵入⽅式綁定
    關注點分離: HTML / CSS / JavaScript

網⾴常⾒事件

https://ithelp.ithome.com.tw/upload/images/20210924/20120789uWJ3D2ivDL.png

滑鼠相關事件

click / hover / scroll

鍵盤相關

keydown / keyup / keypress

表單相關

focus / blur / change / submit

load / ready 也是⼀種事件。

如何寫

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

https://ithelp.ithome.com.tw/upload/images/20210924/20120789iO8f1xrPtx.png

btn 按鈕被點擊了 [電話響了]
—> 跳 alert(‘Hello’) 視窗 [接電話]

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

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

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

});

上一篇
33歲轉職者的前端筆記-DAY 25 JavaScript 迴圈語法筆記
下一篇
33歲轉職者的前端筆記 DAY 27 CSS 三角形、三角形折角、轉 45 度漸層色
系列文
33歲轉職者的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言