JSDOM Event 对象
DOM之Event
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
onresize —— 事件会在窗口或框架被调整大小时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>,
<tfoot>, <th>, <thead>, <tr>, <ul>, <var>
支持该事件的 JavaScript 对象：
window
// 当用户试图调整窗口的大小时，将显示一个对话框：
<body onresize="alert('You have changed the size of the window')">
</body>
onload —— 事件会在页面或图像加载完成后立即发生。
支持该事件的 HTML 标签：
<body>, <iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象：
image, layer, window
举例：
<html>
<head>
<script type="text/javascript">
function load() {
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
onunload —— 事件在用户退出页面时发生。
支持该事件的 HTML 标签：
<body>, <frameset>
支持该事件的 JavaScript 对象：
window
举例：
// 在页面关闭时会显示一个对话框：
<body onunload="alert('The onunload event was triggered')">
</body>
onerror —— 事件会在文档或图像加载过程中发生错误时被触发。
支持该事件的 HTML 标签：
<img>, <object>, <style>
支持该事件的 JavaScript 对象：
window, image
举例：
<img src="image.gif" onerror="alert('The image could not be loaded.')" />
onabort —— 事件会在图像加载被中断时发生。当用户在图像完成载入之前放弃图像的装载（如单击了 stop 按钮）时，就会调用该句柄。
支持该事件的 HTML 标签：<img>
支持该事件的 JavaScript 对象：image
举例：
<img src="image_w3default.gif" onabort="abortImage()" />
<script type="text/javascript">
function abortImage() {
alert('Error: Loading of the image was aborted')
}
</script>
onfocus —— 事件在对象获得焦点时发生。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>,
<caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>,
<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>,
<li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>,
<small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,
<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea, window
举例：
First name: <input type="text" onfocus="setStyle(this.id)" id="fname" />
<script type="text/javascript">
function setStyle(x) {
document.getElementById(x).style.background="yellow"
}
</script>
onblur —— 元素失去焦点。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>,
<tfoot>, <th>, <thead>, <tr>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window
onchange —— 事件会在域的内容改变时发生。
支持该事件的 HTML 标签：
<input type="text">, <select>, <textarea>
支持该事件的 JavaScript 对象：
fileUpload, select, text, textarea
onselect —— 事件会在文本框中的文本被选中时发生。
支持该事件的 HTML 标签：
<input type="text">, <textarea>
支持该事件的 JavaScript 对象：
window
举例：
// 当用户试图选择文本框中的文本时，会显示一个对话框：
<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5" onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
</form>
onreset —— 事件会在表单中的重置按钮被点击时发生。
支持该事件的 HTML 标签：
<form>
支持该事件的 JavaScript 对象：
form
举例：
// 当重置按钮被点击时，表单会改为默认值，并显示一个对话框：
<form onreset="alert('The form will be reset')">
Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">
</form>
onsubmit —— 事件会在表单中的确认按钮被点击时发生。
支持该事件的 HTML 标签：
<form>
支持该事件的 JavaScript 对象：
form
举例：
// 当用户点击提交按钮时，会显示一个对话框：
<form name="testform" action="jsref_onsubmit.asp" onsubmit="alert('Hello ' + testform.fname.value +'!')">
What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
onclick —— 事件会在对象被点击时发生。请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>,
<ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>,
<thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, document, checkbox, link, radio, reset, submit
举例：
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
点击下面的按钮，把 Field1 的内容拷贝到 Field2 中：
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
ondblclick —— 事件会在对象被双击时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>,
<ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>,
<thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
document, link
onmousedown —— 事件会在鼠标按键被按下时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>,
<p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, document, link
举例：
// 点击图片时会弹出一个对话框：
<img src="/i/example_mouse2.jpg" onmousedown="alert('You clicked the picture!')" />
// 对话框将显示出所点击的元素的标签名：
<head>
<script type="text/javascript">
function whichElement(e) {
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<h2>This is a header</h2>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" alt="Ball">
</body>
onmouseup —— 事件会在鼠标按键被松开时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>,
<p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, document, link
举例：
// 点击图片并松开鼠标按键后，将显示一个对话框：
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseup="alert('您点击了图片！')" />
// 对话框中会显示出您所点击的元素的标签名：
// ...... （同 onmousedown）
onmouseover —— 事件会在鼠标指针移动到指定的对象上悬浮时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>,
<p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
layer, link
举例：
// 用户把鼠标指针移动到图像上时显示一个对话框：
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseover="alert('您的鼠标在图片上！')" />
// 在网页上添加一个用作连接按钮的图像，然后我们会添加 onMouseOver 和 onMouseOut 事件，这样就可以在运行两个 JavaScript 函数来切换两幅图像：
<head>
<script type="text/javascript">
function mouseOver() {
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut() {
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
onmouseout —— 事件会在鼠标指针移出指定的对象时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>,
<p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
layer, link
举例：
// 在鼠标指针移出图像时显示一个对话框：
<img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才离开了图片！')" />
onmousemove —— 事件会在鼠标指针移动时发生。
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>,
<img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>,
<p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
onmousemove is, by default, not an event of any object,
because mouse movement happens very frequently.
每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
举例：
// 当用户把鼠标移动到图像上时，将显示一个对话框：
<img src="/i/eg_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才经过了图片！')" />
onkeydown —— 事件会在用户按下一个键盘按键时发生。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>,
<div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>,
<i>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>,
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>,
<var>
支持该事件的 JavaScript 对象：
document, image, link, textarea
举例：
// 在本例中，用户无法在输入框中键入数字：
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
<script type="text/javascript">
function noNumbers(e) {
var keynum
var keychar
var numcheck
if(window.event) { // IE
keynum = e.keyCode
}
else if(e.which) { // Netscape/Firefox/Opera
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
onkeyup —— 事件会在键盘按键被松开时发生。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>,
<div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>,
<i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>,
<ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
document, image, link, textarea
onkeypress —— 事件会在键盘按键被按下并释放一个键时发生。
支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>,
<div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>,
<i>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>,
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>,
<var>
支持该事件的 JavaScript 对象：
document, image, link, textarea
Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。
举例：
<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>
<script type="text/javascript">
function noNumbers(e) {
var keynum
var keychar
var numcheck
if(window.event) { // IE
keynum = e.keyCode
} else if (e.which) { // Netscape/Firefox/Opera
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
鼠标/键盘 事件的 鼠标/键盘属性
event.relatedTarget —— 事件属性返回与事件的目标节点相关的节点。对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时先前所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针即将进入的节点。对于其他类型的事件来说，这个属性没有用。
举例：
// 下面例子可返回指针刚刚离开的元素：
<head>
<script type="text/javascript">
function getRelElement(event) {
var txt="The cursor just exited the ";
txt=txt + event.relatedTarget.tagName + " element.";
alert(txt);
}
</script>
</head>
<body>
<p onmouseover="getRelElement(event)">
Mouse over this paragraph.</p>
</body>
event.button=0|1|2 —— 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。
- 0：规定鼠标左键。
- 1：规定鼠标中键。
- 2：规定鼠标右键。
Internet Explorer 拥有不同的参数：
- 1 规定鼠标左键。
- 4 规定鼠标中键。
- 2 规定鼠标右键。
对于惯用左手的鼠标配置，上面的参数是颠倒的。Mozilla 的 Ctrl–Click 参数是 2 （等价于右击）。
举例
// The following example alerts which mouse button was clicked:
<head>
<script type="text/javascript">
function whichButton(event) {
if (event.button==2) {
alert("You clicked the right mouse button!")
}
else {
alert("You clicked the left mouse button!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will
alert which mouse button you clicked.</p>
</body>
event.clientX —— 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。
举例：
// 下面的例子可显示出事件发生时鼠标指针的坐标：
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.</p>
</body>
<script type="text/javascript">
function show_coords(event) {
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
event.clientY —— 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。该坐标不考虑文档的滚动。如果事件发生在窗口的顶部，无论文档滚了多远，clientY 的值都是 0。但是，2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。
event.screenX —— 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。
举例：
// 下面的例子可显示出事件发生时鼠标指针的坐标：
<head>
<script type="text/javascript">
function show_coords(event) {
x=event.screenX
y=event.screenY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert
the x and y coordinates of the cursor.</p>
</body>
event.screenY —— 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。
altKey —— 事件属性返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了。
语法：
event.altKey=true|false|1|0
举例：
// 下面的例子可提示当鼠标按键被点击时 "ALT" 键是否已被按住：
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event) {
if (event.altKey==1) {
alert("The ALT key was pressed!")
}
else {
alert("The ALT key was NOT pressed!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click somewhere in the document.
An alert box will tell you if you
pressed the ALT key or not.</p>
</body>
</html>
event.ctrlKey=true|false|1|0 —— 返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。
举例：
// 下面的例子可提示当鼠标按键被点击时 "CTRL" 键是否被按住：
<head>
<script type="text/javascript">
function isKeyPressed(event) {
if (event.ctrlKey==1) {
alert("The CTRL key was pressed!")
}
else {
alert("The CTRL key was NOT pressed!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click somewhere in the document.
An alert box will tell you if you
pressed the CTRL key or not.</p>
</body>
event.metaKey —— 返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。
举例：
<head>
<script type="text/javascript">
function isKeyPressed(event) {
if (event.metaKey==1) {
alert("The meta key was pressed!")
}
else {
alert("The meta key was NOT pressed!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click somewhere in the document.
An alert box will tell you if you
pressed the meta key or not.</p>
</body>
event.shiftKey=true|false|1|0 —— 返回一个布尔值，指示当事件发生时，"SHIFT" 键是否被按下并保持住。
IE 属性
除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
| 属性 | 描述 |
|---|---|
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
标准 Event 属性
2 级 DOM 事件标准定义的属性。
event.type —— 事件属性返回发生的事件的类型，即当前 Event 对象表示的事件的名称。它与注册的事件句柄同名，或者是事件句柄属性删除前缀 "on" 比如 "submit"、"load" 或 "click"。
举例：
// 下面的例子可返回被触发的事件的类型：
<head>
<script type="text/javascript">
function getEventType(event) {
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>Click somewhere in the document.
An alert box will tell what event
type you triggered.</p>
</body>
event.target —— 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
// 下面的例子可获得触发事件的元素：
<head>
<script type="text/javascript">
function getEventTrigger(event) {
x=event.target;
alert("The id of the triggered element: "
+ x.id);
}
</script>
</head>
<body >
<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will
show which element triggered the event.</p>
</body>
event.currentTarget —— 返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
// 下面的例子可获得哪个元素的监听器触发了事件：
<head>
<script type="text/javascript">
function getEventTrigger(event) {
x=event.currentTarget;
alert("The id of the triggered element: "
+ x.id);
}
</script>
</head>
<body >
<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will
show which element triggered the event.</p>
</body>
event.bubbles —— 返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。
在 2 级 DOM 中，事件传播分为三个阶段：
- 第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
- 第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
- 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。
// 下面的例子可检测发生的事件是否是一个起泡事件：
<head>
<script type="text/javascript">
function getEventType(event) {
alert(event.bubbles);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>Click somewhere in the document.
An alert box will tell if the event is a bubbling event.</p>
</body>
eventPhase —— 属性返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。
| 常量 | 值 |
|---|---|
| Event.CAPTURING_PHASE | 1 |
| Event.AT_TARGET | 2 |
| Event.BUBBLING_PHASE | 3 |
event.timeStamp —— 返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。epoch 是一个事件参考点。在这里，它是客户机启动的时间。并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的。
// 下面的例子可获得系统启动开始的事件戳：
<head>
<script type="text/javascript">
function showTimestamp(event) {
var minutes = 1000*60
x=event.timeStamp;
alert(x/minutes)
}
</script>
</head>
<body onmousedown="showTimestamp(event)">
<p>Click in the document. An alert
box will alert the timestamp.</p>
</body>
event.cancelable —— 返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。
// 下面的例子讲检测发生的事件是否是一个 cancelable 事件：
<head>
<script type="text/javascript">
function isEventCancelable(event) {
alert(event.cancelable);
}
</script>
</head>
<body onmousedown="isEventCancelable(event)">
<p>Click somewhere in the document.
An alert box will tell if the
event is a cancelable event.</p>
</body>
标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法。
event.preventDefault() —— 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
event.stopPropagation() —— 不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
event.initEvent(eventType,canBubble,cancelable) —— 初始化新事件对象的属性
- eventType：字符串值。事件的类型。
- canBubble：事件是否起泡。
- cancelable：是否可以用 preventDefault() 方法取消事件。
该方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派之前，才能调用 Event.initEvent() 方法。
浙公网安备 33010602011771号