JavaScript – 事件

刘遵强 | liuzunqiang@staff.hexun.com

eventevent 对象和事件冒泡对象和事件冒泡什么是 event 对象• 用来获取事件的详细信息：鼠标位置、键盘按键

– 例子：获取鼠标位置： clientX

获取 event 对象 ( 兼容性写法 )• var oEvent=ev||event;

事件流• 事件冒泡

– 取消冒泡： oEvent.cancelBubble=true– DOM 事件流

鼠标事件鼠标事件

键盘事件keyCode• 获取用户按下键盘的哪个按键• 例子：键盘控制 Div 移动

其他属性• ctrlKey 、 shiftKey 、 altKey• 例子：提交留言

– 回车 提交– ctrl+ 回车 提交

默认行为• 什么是默认行为

阻止默认行为• 普通写法： return false;• 例子 1. 屏蔽右键菜单

– 弹出自定义右键菜单• 例子 2. 只能输入数字的输入框

– keydown 、 keyup 事件的区别

拖拽简易拖拽• 拖拽原理

– 距离不变– 三个事件

完美拖拽• 原有拖拽的问题

– 直接给 document 加事件• FF 下，空 Div 拖拽 Bug

– 阻止默认事件• 防止拖出页面

– 修正位置

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

本课练习 (1)

基础• 模拟 select 控件• 点击页面，显示单击的坐标• 用户按下键盘，显示 keyCode• 阻止右键菜单（阻止默认事件）

本课练习 (2)

必做• Div 跟随鼠标移动（注意滚动条）• 只允许输入数字的文本框• 自定义右键菜单• 完美拖拽

选做• 用键盘控制 Div 的移动• Div 闪烁功能• 拖拽物体时记录路径，点击按钮回放移动过程

2012 年 08 月 17 日