信息:原创2014-09-160 次阅读0 个评论
标签:后天堂向上,网站制作,自学教程,网站技术,javascript,javascript 事件
Javascript 事件类型:HTML事件、键盘事件、鼠标事件。
HTML 事件
事件名称 | 触发条件 |
onload | 文档或者图片加载完毕之后 |
onunload | 文档被卸载 |
onabort | 图片加载被中断 |
onfocus | 对象获取焦点 |
onblur | 对象失去焦点 |
onchange | 表单元素值被改变 |
onerror | 脚本发生错误 |
ondragdrop | 用户将一个对象拖放到浏览器窗口中 |
onmove | 浏览器窗口移动 |
onreset | 表单重置按钮被点击 |
onsubmit | 表单提交按钮被点击 |
onselect | 表单控件文字被选定 |
oncontextmenu | 上下文菜单事件(鼠标右键弹出窗) |
键盘事件
事件名称 | 触发条件 |
onkeydown | 键盘按键被按下 |
onkeypress | 键盘按键被按下然后松开(仅对字符键有效) |
onkeyup | 键盘按键被松开 |
keyCode、charCode
在发生 keydown、keyup 中,event 对象的 keyCode 属性会包含一个代码,其值与 ASCII 码 相对应。
火狐、谷歌、苹果的 event 对象都支持 charCode 属性,这个属性只有在发生 keypress 事件时才包含值。
事件属性 | 火狐 | 谷歌 | 苹果 | IE10 | IE9 | IE8- |
字 | 非 | 字 | 非 | 字 | 非 | 字 | 非 | 字 | 非 | 字 | 非 |
keydown | keyCode | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
charCode | × | × | × | × | × | × | × | × | × | × | - | - |
keypress | keyCode | × | √ | √ | × | √ | × | √ | × | √ | × | √ | × |
charCode | √ | × | √ | × | √ | × | √ | × | √ | × | - | - |
(以上数据均经过测试,字:字符按键,非:非字符按键,√:支持,×:不支持,-:无此属性)
鼠标事件
事件名称 | 触发条件 |
onclick | 标签对象被单击 |
ondblclick | 标签对象被双击 |
onmousedown | 鼠标在对象上按下 |
onmouseup | 鼠标在对象上按下后松开 |
onmouseover | 鼠标移到对象上 |
onmouseout | 鼠标移出对象外 |
onmousemove | 鼠标在对象上移动 |
鼠标事件对象可以用于检测用户鼠标的操作情况和鼠标指针的定位。
鼠标事件主要是通过 onmousedown、onmouseup 来触发的,大部分高版本的浏览器都支持了 W3C 鼠标事件对象,但 IE8 及其以下的浏览器并不支持,鼠标事件对象使用的是自己的标准。
W3C 鼠标事件对象 button 属性
属性值 | 说明 |
0 | 鼠标左键被按下 |
1 | 鼠标中间被按下 |
2 | 鼠标右键被按下 |
IE 鼠标事件对象 button 属性
属性值 | 说明 |
0 | 鼠标无操作 |
1 | 鼠标左键被按下 |
2 | 鼠标右键被按下 |
3 | 鼠标左、右键同时被按下 |
4 | 鼠标中键被按下 |
5 | 鼠标左键、中键同时被按下 |
6 | 鼠标右键、中键同时被按下 |
7 | 鼠标左键、中键、右键同时被按下 |
鼠标位置
属性 | 属性值 | 说明 |
clientX | 数值 | 可视区域 X 坐标,距离左边框的距离 |
clientY | 数值 | 可视区域 Y 坐标,距离上边框的距离 |
screenX | 数值 | 屏幕区域 X 坐标,距离屏幕左边的距离 |
screenY | 数值 | 屏幕区域 Y 坐标,距离屏幕上边的距离 |
修改键
属性 | 属性值 | 说明 |
shiftKey | 布尔值 | 鼠标点击时,是否按下了 Shift 键 |
ctrlKey | 布尔值 | 鼠标点击时,是否按下了 Ctrl 键 |
altKey | 布尔值 | 鼠标点击时,是否按下了 Alt 键 |
metaKey | 布尔值 | 鼠标点击时,是否按下了 windows 键 |
W3C 与 IE
W3C 事件对象
属性/方法 | 类型 | 读写 | 说明 |
bubbles | Boolean | 只读 | 事件是否冒泡 |
cancelable | Boolean | 只读 | 是否可以取消事件的默认行为 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
detail | Integer | 只读 | 事件细节 |
eventPhase | Integer | 只读 | 事件阶段 1.捕获阶段 2.处理目标 3.冒泡阶段 |
target | Element | 只读 | 事件的目标 |
view | AbstractView | 只读 | 与事件相关联的抽象视图 |
preventDefault() | Function | 只读 | 取消事件的默认行为 |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡 |
IE 事件对象
属性/方法 | 类型 | 读写 | 说明 |
cancelBubble | Boolean | 读写 | 取消事件的冒泡,默认值为 false |
returnValue | Boolean | 读写 | 取消事件的默认行为,默认值为 true |
srcElement | Element | 只读 | 事件的目标 |
type | String | 只读 | 事件的类型 |