2019-04-22
事件(Event)是可以被JavaScript侦测到的行为。
事件名称由事件类型前加一个"on"前缀来构成。即on+事件类型。
可以通过事件将JavaScript函数绑定到HTML对象上，当该对象上发生事件时触发JavaScript函数。
| 属性 | 说明 |
|---|---|
| onAbort | 图像加载被中断 |
| onBlur | 元素失去焦点 |
| onChange | 用户改变域的内容 |
| onClick | 鼠标点击某个对象 |
| onDblclick | 鼠标双击某个对象 |
| onError | 当加载文档或图像时发生某个错误 |
| onFocus | 元素获得焦点 |
| onKeydown | 某个键盘的键被按下 |
| onKeypress | 某个键盘的键被按下或按住，表示整个的按键事件。 |
| onKeyup | 某个键盘的键被松开 |
| onLoad | 当文档加载完成后，也就是网页中的所有内容都从服务器下载到浏览器后 |
| onMousedown | 某个鼠标按键被按下 |
| onMousemove | 鼠标被移动 |
| onMouseout | 鼠标从某元素移开 |
| onMouseover | 鼠标被移到某元素之上 |
| onMouseup | 某个鼠标按键被松开 |
| onReset | 重置按钮被点击 |
| onResize | 窗口或框架被调整尺寸 |
| onSelect | 文本被选定 |
| onSubmit | 提交按钮被点击 |
| onUnload | 用户退出页面,而导致卸载文档时发生。例如，当用户在地址栏中输入一个新的网址，或者使用浏览器工具栏中的导航按钮点击新的网页时，浏览器会载入这个新网页，从而导致当前页面卸载。 |
| onscroll | 鼠标滚动事件 |
onload事件
事件会在页面或图像加载完成后立即发生。
使用方式一：
<script type="text/javascript">
window.onload=function(){
......
}
</script>
使用方式二：
<script type="text/javascript">
function init(){
......
}
window.onload=init;
</script>
使用方式三：
<head>
<script type="text/javascript">
function init(){
......
}
</script>
</head>
<body onload="init()">
......
</body>
鼠标事件
1.MouseDown事件
鼠标某一个键被按下时发生，不区分左右键。
2.MouseUp事件
鼠标某一个键被释放时发生，不区分左右键。
3.MouseMove事件
鼠标移动时发生。
4.MouseOver事件
鼠标经过某一个对象时发生。
5.MouseOut事件
鼠标离开一个对象时发生。
6.select事件
在文本框中的文本被选中时发生。注意与select方法的区别。
7.Change事件
文本框失去焦点且内容发生改变时发生。
键盘事件
1.KeyDown事件
按下键盘任一个键时发生。
2.KeyUp事件
释放按键时发生。
3.KeyPress事件
发生在KeyDown事件之后KeyUp事件之前。只有发生了KeyDown事件才能发生KeyPress事件。如果KeyDown事件返回了false，按键动作被中止，KeyPress事件就不会发生。
主要区别：
KeyPress主要用来接收字母、数字等ANSI字符。KeyDown和KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键
KeyPress只能捕获单个字符。KeyDown和KeyUp可以捕获组合键。
KeyPress不显示键盘的物理状态（SHIFT键），而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解释，即作为两种不同的字符。
KeyDown和KeyUp不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式：
KeyPress不区分小键盘和主键盘的数字字符。KeyDown和KeyUp区分小键盘和主键盘的数字字符。
event对象
在事件发生时，会产生一个临时对象event，这个对象存储着事件行为的相关信息。
注意：产生event对象是一个线性的过程，当连续或同时有多个事件发生时，仅会产生一个event对象，它和当前事件相关联，而不会对应多个事件产生多个event对象。
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
标准event属性
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
| target | 返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
IE 属性
| 属性 | 描述 |
|---|---|
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。<br /> 把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
网友评论