JS-事件处理

事件简介

我们知道通过js才能让HTML的静态界面动起来,而js通过事件才能完成网页中酷炫的特效和交互等操作
JS 能够对 HTML 事件做出反应。用户点击某个元素时执行代码，可以给一个 HTML 事件属性添加JS代码给事件源（目标节点）分配事件

给事件源（目标节点）分配事件
1、HTML 事件属性<a 事件属性 = “事件触发时执行的代码”>
2、HTML DOM 来分配事件

<script> 对象.on事件=处理事件的代码 </script>

事件指的是具体的操作（比如点击、双击、滚动、鼠标移动到元素上）。分为以下几类：
鼠标相关事件
键盘相关事件
文档相关事件
input相关事件
框架窗口相关
图像加载相关

事件分类及相关操作

1、鼠标相关事件
click 单击
dblclick 双击
mouseover 鼠标放在元素上
mouseout 鼠标移出元素
mousemove 鼠标在元素上移动
mousedown 鼠标在元素上点击下去
mouseup 鼠标点击元素之后抬起

2、键盘相关事件
keypress 按下键盘的数字字母键（包括空格、回车等，不包括方向键、Fn功能键）
keyup 抬起键盘上的某个键
keydown 按下键盘上的任意键

3、文档相关事件
load 加载完毕
unload 用户退出页面时发生 谷歌和新版本的firefox不会执行alert，confirm这种语句，会拦截掉
beforeunload 关闭页面之前 不会弹出alert、confirm 适用于window对象，用下面的方法代替
window.onbeforeunload = function ( ) { return “您要离开吗?”; }

4、input相关事件
focus 获取焦点
blur 失去焦点
submit 提交表单 注意只支持form标签 不支持input标签
change input输入框文字改变 并且 失去焦点时触发
reset 重置按钮被点击 注意只支持form标签 不支持input标签
select 文本框中的文本被选中

5、框架窗口相关
resize 窗口或框架被重新调整大小。支持所有常用标签

6、图像加载相关
onabort 图像的加载被中断。
当用户在图像完成载入之前放弃图像的装载（如单击了 stop 按钮）时，就会调用该句柄
onerror 在加载文档或图像时发生错误

<img src = "image.png" onerror=" alert( 'The image could not be loaded.' ) "/>

事件对象Event

Event代表事件的状态，比如事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
不管什么事件，只要事件发生了，就会产生一个event对象，在处理事件的函数里就可以操作这个事件。

1、altKey 返回一个布尔值。在指定的事件发生时，Alt 键是否被按下并保持
event.altKey = true|false|1|0
2、ctrlKey 返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持
返回值同上
3、shiftKey 返回一个布尔值，当事件发生时，“SHIFT” 键是否被按下并保持
返回值同上
4、button 返回一个整数，指示当事件被触发时哪个鼠标按键被点击
event.button = 0|1|2

0 鼠标左键 1 鼠标中键 2 鼠标右键
IE拥有不同的参数：1 鼠标左键 4 鼠标中键 2 鼠标右键

5、clientX、clientY 鼠标指针距离浏览器当前窗口的水平、竖直坐标
6、screenX、screenY 鼠标相对于屏幕左上角的水平、竖直坐标
7、relatedTarget 返回与事件的目标节点相关的节点
对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
对于其他类型的事件来说，这个属性没有用。

标准Event属性和方法

1、bubbles 返回布尔值，指示事件是否是起泡事件类型
事件传播分为三个阶段：

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

第二个阶段发生在目标节点自身。直接注册在目标上的适合的事件句柄将运行

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

2、currentTarget 返回触发该事件的元素
注意：在捕获和起泡阶段，它不同于 target 属性

3、eventPhase返回事件传播的当前阶段。
他的值是下面3个常量之一，分别表示捕获阶段、正常事件派发和起泡阶段。

4、target 返回触发此事件的元素（事件的目标节点）。IE 不支持
5、timeStamp 返回一个时间戳。指示发生事件的日期和时间
从 epoch 开始的毫秒数

epoch 是一个事件参考点。在这里，它是客户机启动的时间

并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的

6、type 返回发生的事件的类型，即当前 Event 对象表示的事件的名称
它与注册的事件句柄同名，或者是事件句柄属性删除前缀 “on” 比如 “submit”、“load” 或 “click”。

IE 的事件模型不支持以下方法

1、stopPropagation( ) 不再派发事件
不再派发事件

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点