16、JavaScript与jQuery：事件驱动的网页交互编程

JavaScript与jQuery：事件驱动的网页交互编程

1. 什么是事件

当人们谈论JavaScript时，常常会提到“交互性”。JavaScript能让网页对访问者的操作做出反应，比如鼠标悬停在导航按钮上弹出链接菜单、选择单选按钮显示新的表单选项、点击小图片使页面变暗并弹出大图等。网页能够响应的各种访问者操作都被称为事件。JavaScript是一种事件驱动的语言，没有事件，网页就无法对访问者做出响应，也无法实现有趣的功能。

1.1 事件的触发

事件代表着某件事情发生的精确时刻。例如，当点击鼠标时，释放鼠标按钮的那一刻，浏览器会发出点击事件已发生的信号，也就是程序员所说的事件触发。当点击鼠标按钮时，浏览器实际上会触发多个事件：按下鼠标按钮时， mousedown 事件触发；松开按钮时， mouseup 事件触发；最后， click 事件触发。

1.2 不同类型的事件

1.2.1 鼠标事件

鼠标是个人计算机的重要输入设备，浏览器提供了多种跟踪鼠标与网页交互的方式：
| 事件名称 | 触发条件 | 用途示例 |
| ---- | ---- | ---- |
| click | 点击并释放鼠标按钮后触发 | 点击缩略图链接显示大图 |
| dblclick | 快速按下并释放鼠标按钮两次触发 | 类似于在桌面打开文件夹或文件 |
| mousedown | 按下鼠标按钮时触发 | 用于在页面上拖动元素 |
| mouseup | 释放鼠标按钮时触发 | 响应拖动元