事件机制

事件机制

1.什么是事件？

a)在文档中，可以被识别的控件的操作就是事件。鼠标的点击，

单击双击。。鼠标经过移出，键盘按下等。。。

2.事件流？

a)在文档中事件执行的顺序就是事件流。

微软公司提出事件的流程应该为冒泡流。

网景公司提出事件的流程应该为捕获流。

W3C为了平衡事件流机制，制订了标准的事件流。

第一阶段：事件流的捕获阶段

第二阶段：处于事件阶段

第三阶段：事件流的冒泡阶段

关于浏览器的问题：

关于标准的事件流，并不是所有的浏览器都能够很好的支持。

能支持标准时间流的浏览器为:IE9+、chrome、firefox、safari、opera，低版本IE678等只支持冒泡流

毋须担心，因为大部分常用事件都是处于冒泡流。

如何添加或者注册事件以及事件的取消:

DOM0阶段（无标准阶段）

注册事件

方法1：在HTML中使用事件相关属性

例如:

方法2：在JS的元素节点中使用和事件同名的属性添加

例如：元素节点.onlick=action;

注意：方法2中的action是一个函数，可以是声明函数也可以是一个匿名函数

取消事件

在添加事件的方法2基础上进行重新赋值即可

元素节点.onclick=null;

该方法对于使用DOM0的2中事件添加方法都可以取消。DOM2阶段

注册事件

IE浏览器

attachEvent()方法

格式:元素节点.attachEvent(事件名,事件的执行方法);

参数1：书写时必须是字符串，而且必须有on

参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使

用匿名函数。推荐使用声明函数

非IE浏览器

addEventListener()

格式：元素节点.addEventListener(‘事件名’,事件的执行方法,处于事件流的阶段);

参数1：书写必须是字符串，而且不能有on

参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使

用匿名函数。推荐使用声明函数

参数3:设置事件发生的阶段，true捕获阶段false冒泡阶段，默认是false（推荐false）

取消事件

IE浏览器

detachEvent() 方法

格式:元素节点.detachEvent(事件名,事件的执行方法);

参数1：书写时必须是字符串，而且必须有on

参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使

用匿名函数。推荐使用声明函数

非IE浏览器

removeEventListener()

格式：元素节点.removeEventListener(‘事件名’,事件的执行方法,处于事件流的阶段);

参数1：书写必须是字符串，而且不能有on

参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使

用匿名函数。推荐使用声明函数

参数3:设置事件发生的阶段，true捕获阶段false冒泡阶段，默认是false（推荐false）

注意：无论IE或者非IE浏览器，在删除事件的时候必须保证参数和添加事件的完全一致才可以删除事件，否则无效，而且无法使用DOM0的方式删除

事件的类型：

JavaScript事件列表

事件解说

一般事件

onclick 鼠标点击时触发此事件

ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件

onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件

onmouseout 当鼠标离开某对象范围时触发此事件onkeypress 当键盘上的某个键被按下并且释放时触发此事件. onkeydown 当键盘上某个按键被按下时触发此事件onkeyup 当键盘上某个按键被按放开时触发此事件

页面相关事

件

onabort 图片在下载时被用户中断onbeforeunload当前页面的内容将要被改变时触发此事件onerror 出现错误时触发此事件

onload 页面内容完成时触发此事件

onmove 浏览器的窗口被移动时触发此事件

onresize 当浏览器的窗口大小被改变时触发此事件

onscroll 浏览器的滚动条位置发生变化时触发此事件

onstop

浏览器的停止按钮被按下时触发此事件或者正在

下载的文件被中断oncontextmenu 当弹出右键上下文菜单时发生onunload 当前页面将被改变时触发此事件

表单相关事

件

onblur 当前元素失去焦点时触发此事件onchange

当前元素失去焦点并且元素的内容发生改变而触

发此事件

onfocus 当某个元素获得焦点时触发此事件onreset 当表单中RESET的属性被激发时触发此事件onsubmit 一个表单被递交时触发此事件

事件对象：

发生事件的时候用来记录事件信息的对象。存在于每一个事件当中。

键盘相关属

性名值类

型

读/写描述

altKey Boole

an

R true表示按下了ALT键；false表示没有按下

ctrlKey Boole

an

R true表示按下了CTROL，false表示没有

shiftKey Boole

an

R true表示按下了shift，false表示没有

keyCode Integ

er

R/W(IE)

R(W3C)

对于keypress事件，表示按下按钮的Unicode字

符；对于keydown/keyup事件，表示按下按钮的

数字代号

charCode(仅W3C) Integ

er

R

在keypress事件中所按键的字符Unicode编码，

如果不是字符键，则该属性为0，并且，当CapsLock

打开与关闭时charCode的值也对应着大小写字母

screenX: 鼠标点击时相对于屏幕的x位置

screenY: 鼠标点击时相对于屏幕的y位置

offsetX：鼠标点击时，鼠标相对于据事件最近元素的X位置offsetY：鼠标点击时，鼠标相对于据事件最近元素的Y位置clientX：鼠标点击时，鼠标相对于视窗的X坐标clinentY：鼠标点击时，鼠标相对于视窗的Y坐标pageX：鼠标点击时，鼠标相对于视窗的X坐标仅FF pageY：鼠标点击时，鼠标相对于视窗的Y坐标仅FF x：鼠标点击时，鼠标相对于视窗的X坐标仅IE