1. JavaScript – 事件

2. 刘遵强 | liuzunqiang@staff.hexun.com

3. event 对象和事件冒泡
什么是 event 对象
• 用来获取事件的详细信息：鼠标位置、键盘按键
– 例子：获取鼠标位置： clientX
获取 event 对象 ( 兼容性写法 )
• var oEvent=ev||event;
事件流
• 事件冒泡
– 取消冒泡： oEvent.cancelBubble=true
– DOM 事件流

4. 鼠标事件

5. 键盘事件
keyCode
• 获取用户按下键盘的哪个按键
• 例子：键盘控制 Div 移动
其他属性
• ctrlKey 、 shiftKey 、 altKey
• 例子：提交留言
– 回车 提交
– ctrl+ 回车 提交

6. 默认行为
• 什么是默认行为
阻止默认行为
• 普通写法： return false;
• 例子 1. 屏蔽右键菜单
– 弹出自定义右键菜单
• 例子 2. 只能输入数字的输入框
– keydown 、 keyup 事件的区别

7. 拖拽
简易拖拽
• 拖拽原理
– 距离不变
– 三个事件
完美拖拽
• 原有拖拽的问题
– 直接给 document 加事件
• FF 下，空 Div 拖拽 Bug
– 阻止默认事件
• 防止拖出页面
– 修正位置

8. 获取事件对象
冒泡、取消冒泡
DOM 事件流
鼠标事件
键盘事件
阻止默认行为
拖拽

10. 本课练习 (1)
基础
• 模拟 select 控件
• 点击页面，显示单击的坐标
• 用户按下键盘，显示 keyCode
• 阻止右键菜单（阻止默认事件）

11. 本课练习 (2)
必做
• Div 跟随鼠标移动（注意滚动条）
• 只允许输入数字的文本框
• 自定义右键菜单
• 完美拖拽
选做
• 用键盘控制 Div 的移动
• Div 闪烁功能
• 拖拽物体时记录路径，点击按钮回放移动过程

13. 2012 年 08 月 17 日