[鼠年全马铁人挑战] Week26 - jQuery 事件处理

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();

});