HTML DOM 事件对象

事件是可以被 JavaScript 侦测到的行为

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序;事件通常与函数结合使用，函数不会在事件发生前被执行！(如用户点击按钮)

鼠标事件

oncontextmenu事件

所有浏览器都支持 oncontextmenu 事件，contextmenu 元素只有 Firefox 浏览器支持

语法：

<element oncontextmenu="myScript">     //HTML 中
object.oncontextmenu=function(){myScript};     //JavaScript 中
object.addEventListener("contextmenu", myScript);     //JavaScript 中使用addEventListener()方法

注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener()

键盘事件

框架/对象（Frame/Object）事件

onbeforeunload 事件

onbeforeunload事件在即将离开当前页面（刷新或关闭）时触发，该事件可用于弹出对话框提示用户是继续浏览页面还是离开当前页面

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框

注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）

onhashchange 事件

onhashchange事件在当前URL的锚部分(以'#'号为开始) 发生改变时触发。

可以使用以下方式调用事件:

通过设置Location对象的location.hash或location.href属性修改锚部分

使用不同书签导航到当前页面（使用"后退"或"前进"按钮）

点击链接跳转到书签锚

onpageshow 事件

onpageshow事件在用户浏览网页时触发

onpageshow事件类似于onload事件，onload事件在页面第一次加载时触发，onpageshow事件在每次加载页面时触发，而onload事件在页面从浏览器缓存中读取时不触发

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false

onpagehide 事件

onpagehide事件在用户离开网页时触发

离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。onpagehide 事件有时可以替代onunload事件，但onunload事件触发后无法缓存页面。

同样可以使用 PageTransitionEvent 对象的 persisted 属性来判断页面是否从浏览器的缓存中读取的该属性

表单事件

onfocusin事件和onfocusout事件

onfocusin 事件在一个元素即将获得焦点时触发，onfocusout 事件在元素即将失去焦点时触发

提示： onfocusin/onfocusout 事件类似于onfocus/onblur事件。 主要的区别是 onfocus/onblur 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用onfocusin/onfocusout事件。

虽然 Firefox 浏览器不支持 onfocusin/onfocusout 事件，但你可以通过使用 onfocus（使用addEventListener()方法的可选参数useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。

oninput事件

oninput事件在用户输入时触发。该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发。另外一点不同是onchange事件也可以作用于<keygen>和<select>元素

剪贴板事件

打印事件

拖动事件

多媒体（Media）事件

动画事件

过渡事件

其他事件

事件对象

常量

属性

bubbles 事件属性

bubbles事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle

事件冒泡分为三个阶段，它是这样的:

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

第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似

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

方法

目标事件对象

方法

事件监听对象

方法

文档事件对象

方法

鼠标/键盘事件对象

属性

button 事件属性

button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击

语法

event.button=0|1|2//0:指定鼠标左键;1:指定鼠标中键;2:指定鼠标右键

注意： Internet Explorer 8 及更早IE版本:

1:指定鼠标左键;4:指定鼠标中键;2:指定鼠标右键

location 事件属性

location 属性返回按键在键盘或设置上的位置。数字可由 4 个常数表示：

1. DOM_KEY_LOCATION_STANDARD:表示不是最左边或者最右边的按键，也不是数字键盘上的数字（该值几乎包含了所有的按键，如 "A", "U", "SPACE" 或 "5")
2. DOM_KEY_LOCATION_LEFT:左侧按键 (如果左侧的 "CTRL" 键或左侧的"ALT" 键)
3. DOM_KEY_LOCATION_RIGHT:右侧按键 (如果右侧的 "CTRL" 键或左侧的"ALT" 键)
4. DOM_KEY_LOCATION_NUMPAD:数字按键（在标准键盘的右侧）

注意： location 属性可用于onkeydown 和 onkeyup 事件，但不能用于onkeypress事件。该属性是只读的

charCode 属性

charCode 属性返回onkeypress事件触发键值的字母代码。Unicode 字符代码是一个字母的数字 (如数字 "97" 代表字母 "a")。

提示： 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。

注意： 如果该属性用于onkeydown 或 onkeyup 事件，返回值总为 "0"。该属性是只读的。

注意：IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 兼容这些浏览器你可以使用以下代码：

var x = event.charCode || event.keyCode; // 使用 charCode 或 keyCode, 这样可支持不同浏览器

两种代码类型的区别是:

字符代码 - 表示 ASCII 字符的数字

键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的，例如小写字符"w" 和大写字符 "W" 有相同的键盘代码，因为他们他们键盘上 ( "W" 代码为 "87")，但是它们有不同的字符代码，两个字符输出是不一样的( "w" 和 "W" 字符代码为"119" 和 "87")

IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。兼容这些浏览器你可以使用以下代码：

var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

方法