JS HTML DOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应：
对事件作出反应
JS 能够在事件发生时执行，比如用户点击某个HMTL 元素时。
做法：
为了在用户点击元素时执行代码，请向HTML 事件属性 添加JS代码
语法：
onclick = JavaScript
HTML 事件列子
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当HTML表单被提交时
- 当用户敲击按键时
实例：
当用户点击<h1>时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>
</body>
</html>
实例：
从事件处理程序调用函数：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点击此文本！</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
HTML 事件属性
如需向 HTML 元素分配事件，您能够使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">试一试</button>
在上例中，名为 displayDate 的函数会在按钮被点击时执行。
使用HTML DOM分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
实例
为 button 元素指定 onclick 事件：
<!DOCTYPE html>
<html>
<body>
<p>请点击“试一试”按钮，以执行 displayDate() 函数。</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
在上例中，名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素。
当点击按钮时将执行函数。
HTML DOM 事件
Event对象
Event对象代表事件的状态
举例：
- 事件在其中发生的元素
- 键盘按键的状态
- 鼠标的位置
- 鼠标按钮的状态
事件句柄 （Event Handlers）
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。
下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
onabort事件
定义和用法
onabort 事件会在图像加载被中断时发生。
当用户在图像完成载入之前放弃图像的装载（如单击了 stop 按钮）时，就会调用该句柄。
语法
οnabοrt="SomeJavaScriptCode"
支持该事件的 HTML 标签：
<img>
支持该事件的 JavaScript 对象：
image
实例 1
在本例中，如果图像的加载被中断，则会显示一个对话框：
<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />
实例 2
在本例中，如果图像的加载中断，我们将调用一个函数：
<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>
</html>
onerror事件
定义和用法
onerror 事件会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
支持该事件的 HTML 标签：
<img>, <object>, <style>
支持该事件的 JavaScript 对象：
window, image
实例 1
在本例中，如果装载图像时发生了错误，则显示一个对话框：
<img src="image.gif" onerror="alert('The image could not be loaded.')" />
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
实例
获得焦点时，触发
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
请输入您的名字：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，将触发一个更改背景颜色的函数。</p>
</body>
</html>
onblur 事件
定义和用法
onblur 事件会在对象失去焦点时发生。
语法
οnblur="SomeJavaScriptCode"
支持该事件的 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, submit, text, textarea, window
实例 1
在本例中，我们将在用户离开输入框时执行 JavaScript 代码：
<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />
</body>
</html>
onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件用途：
可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
实例
onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookie 已启用";
} else {
text = "Cookie 未启用";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
onload事件
定义和用法
onload 事件会在页面或图像加载完成后立即发生。
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象：
image, layer, window
实例
在本例中，文本 “Page is loaded” 会被显示在状态栏中：
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
onunload事件
定义和用法
onunload 事件在用户退出页面时发生。
支持该事件的 HTML 标签：
<body>, <frameset>
支持该事件的 JavaScript 对象：
window
实例
在本例中，在页面关闭时会显示一个对话框：
<body onunload="alert('The onunload event was triggered')">
</body>
onchange 事件
定义和用法
onchange 事件会在域的内容改变时发生。
语法
οnchange="SomeJavaScriptCode"
支持该事件的 HTML 标签：
<input type="text">, <select>, <textarea>
支持该事件的 JavaScript 对象：
fileUpload, select, text, textarea
onchange 事件经常与输入字段验证结合使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入您的名字：<input type="text" id="fname" onchange="myFunction()">
<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>
<script>
function mOver(obj) {
obj.innerHTML = "谢谢您"
}
function mOut(obj) {
obj.innerHTML = "请把鼠标移上来"
}
</script>
</body>
</html>
onmousemove事件
定义和用法
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('您的鼠标刚才经过了图片！')" />
onmousedown, onmouseup 以及 onclick 事件
onmousedown,onmouseup以及onclick事件构成了完整的鼠标点击事件。
- 首先当鼠标按钮被点击时，onmousedown 事件被触发；
- 然后当鼠标按钮被释放时，onmouseup 事件被触发；
- 最后，当鼠标点击完成后，onclick 事件被触发。
实例：
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "松开鼠标";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢您";
}
</script>
</body>
</html>
onclick事件
定义和用法
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
实例 1
在本例中，当按钮被单击时，第一个输入框中的文本会被拷贝到第二个输入框中：
<html>
<body>
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>
</body>
</html>
ondbclick事件
定义和用法
ondblclick 事件会在对象被双击时发生。
语法
οndblclick="SomeJavaScriptCode"
支持该事件的 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
实例 1
在本例中，当您双击按钮时，第二个域中内容会根据第一个域的内容而改变：
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
双击下面的按钮，把 Field1 的内容拷贝到 Field2 中：
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>
onkeydown,onkeyup以及onkeypress事件
onkeydown事件
定义和用法
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
提示和注释
浏览器差异：
- Internet Explorer 使用 event.keyCode 取回被按下的字符，
- Netscape/Firefox/Opera 使用 event.which。
实例
在本例中，用户无法在输入框中键入数字：
<html>
<body>
<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>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>
onkeyup事件
定义和用法
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
实例
当您在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）：
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />
</body>
</html>
onkeypress事件
定义和用法
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
实例
在本例中，用户无法在输入框中键入数字：
<html>
<body>
<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>
<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</html>
onreset事件
定义和用法
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>
onresize事件
定义和用法
onresize 事件会在窗口或框架被调整大小时发生。
支持该事件的 HTML 标签：
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>,
<dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>,
<hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>,
<pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>,
<textarea>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
window
实例
在本例中，当用户试图调整窗口的大小时，将显示一个对话框：
<body onresize="alert('You have changed the size of the window')">
</body>
onselect事件
定义和用法
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>
onsubmit事件
定义和用法
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>
鼠标、键盘属性
altkey事件属性
定义和用法
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>
ctrlKey事件属性
定义和用法
ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。
语法
event.ctrlKey=true|false|1|0
实例
下面的例子可提示当鼠标按键被点击时 “CTRL” 键是否被按住：
<html>
<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>
</html>
metaKey事件属性
定义和用法
metaKey 事件属性可返回一个布尔值，指示当事件发生时，“meta” 键是否被按下并保持住。
语法
event.metaKey
实例
下面的例子可提示当鼠标按键被点击时 “meta” 键是否被按住：
检测 meta 键是否被按住（不支持 IE）。
<html>
<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>
</html>
shiftKey事件属性
定义和用法
shiftKey 事件属性可返回一个布尔值，指示当事件发生时，“SHIFT” 键是否被按下并保持住。
语法
event.shiftKey=true|false|1|0
实例
下面的例子可提示当鼠标按键被点击时 “SHIFT” 键是否被按住：
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift 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 shift key or not.</p>
</body>
</html>
button 事件属性
定义和用法
button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。
语法
event.button=0|1|2
Internet Explorer 拥有不同的参数：
提示和注释
注释：
对于惯用左手的鼠标配置，上面的参数是颠倒的。
提示：
Mozilla 的 Ctrl–Click 参数是 2 （等价于右击）。
实例
The following example alerts which mouse button was clicked:
<html>
<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>
</html>
clientX，clientY事件属性
定义和用法
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
- 客户区指的是当前窗口。
语法
event.clientX
提示和注释
2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。
在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。
clientY事件属性
定义和用法
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
- 客户区指的是当前窗口。
语法
event.clientY
提示和注释
- 注意，该坐标不考虑文档的滚动。如果事件发生在窗口的顶部，无论文档滚了多远，clientY 的值都是 0。
- 但是，2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。
- 在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。
实例
下面的例子可显示出事件发生时鼠标指针的坐标：
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
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 mouse pointer.</p>
</body>
</html>
screenX和screenY事件属性
screenX
定义和用法
screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。
语法
event.screenX
screenY
定义和用法
screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。
语法
event.screenY
实例
下面的例子可显示出事件发生时鼠标指针的坐标：
<html>
<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>
</html>
relatedTarget事件属性
定义和用法
-
relatedTarget 事件属性返回与事件的目标节点相关的节点。
-
对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
-
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
对于其他类型的事件来说，这个属性没有用。
语法
event.relatedTarget
实例
下面例子可返回指针刚刚离开的元素：（不支持IE）
<html>
<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>
</html>
IE支持的属性
除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
标准Event属性
下面列出了 2 级 DOM 事件标准定义的属性。
bubbles事件属性
定义和用法
bubbles 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。
语法
event.bubbles
事件传播
在2级 DOM中，事件传播分为 三个阶段：
- 第一： 捕获阶段。事件从Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄
- 第二阶段： 发生在目标节点自身。直接注册着目标上的合适的事件句柄将运行，这与0级事件模型提供的事件处理方法相似
- 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回Document 对象的文档层次
实例
下面的例子可检测发生的事件是否是一个起泡事件：
<html>
<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>
</html>
cancelable事件属性
定义和用法
cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。
语法
event.cancelable
currentTarget事件属性
定义和用法
currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
语法
event.currentTarget
实例
下面的例子可获得哪个元素的监听器触发了事件：
<html>
<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>
</html>
eventPhase事件属性
定义和用法
eventPhase 属性返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。
target事件属性
定义和用法
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
语法
event.target
实例
下面的例子可获得触发事件的元素：
<html>
<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>
</html>
timeStamp事件属性
定义和用法
timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。
-
epoch 是一个事件参考点。在这里，它是客户机启动的时间。
-
并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的。
实例
下面的例子可获得系统启动开始的事件戳：
返回系统启动至今的分钟数（IE 浏览器不支持）。
<html>
<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>
</html>
type事件属性
定义和用法
type 事件属性返回发生的事件的类型，即当前 Event 对象表示的事件的名称。
它与注册的事件句柄同名，或者是事件句柄属性删除前缀 “on” 比如 “submit”、“load” 或 “click”。
实例
下面的例子可返回被触发的事件的类型：
<html>
<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>
</html>
标准Event方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
initEvent（）方法
定义和用法
初始化新事件对象的属性
语法
event.initEvent(eventType,canBubble,cancelable)
说明
该方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。
只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派之前，才能调用 Event.initEvent() 方法。
preventDefault() 方法
定义和用法
取消事件的默认动作。
语法
event.preventDefault()
说明
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
例如，
如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。
注意，
如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
stopPropagation() 方法
定义和用法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
语法
event.stopPropagation()
说明
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。
注意，
虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
