HTML DOM Event 对象
onabort 事件:onabort 事件会在图像加载被中断时发生,当用户在图像完成载入之前放弃图像的装载,如单击了stop按钮时,就会调用该句柄;
οnabοrt="alert('Error: Loading of the image was aborted')" />
onblur 事件:对象失去焦点时触发;
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
输入您的姓名:
onchange:域的内容被改变时触发;
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
输入您的姓名:
onclick:与 onmousedown 不同的是,单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的;
// 在本例中,当按钮被单击时,第一个输入框中的文本会被拷贝到第二个输入框中
Field1:
Field2:
点击下面的按钮,把 Field1 的内容拷贝到 Field2 中:
Copy Text
ondblclick:事件会在对象被双击时发生;
// 在本例中,当您双击按钮时,第二个域中内容会根据第一个域的内容而改变
Field1:
Field2:
双击下面的按钮,把 Field1 的内容拷贝到 Field2 中:
Copy Text
onerror:事件会在文档或图像加载过程中发生错误时被触发,在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄;
// 如果装载图像时发生了错误,则显示一个对话框
onfocus:事件在对象获得焦点时发生;
// 当输入框获得焦点时,其背景颜色将改变
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
First name:
οnfοcus="setStyle(this.id)" id="fname" />
Last name:
οnfοcus="setStyle(this.id)" id="lname" />
onkeydown:事件会在用户按下一个键盘按键时触发;
// 用户无法在输入框中键入数字
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)
}
onkeypress:事件会在键盘按键被按下并释放一个键时发生;
// 用户无法在输入框中键入数字
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)
}
onkeyup:事件会在键盘按键被松开时发生
// 在例子中的输入域中键入字符时,字符会被更改为大写(逐一地)
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
输入您的姓名:
onload:事件会在页面或图像加载完成后立即发生;
// 文本 "Page is loaded" 会被显示在状态栏中
function load()
{
window.status="Page is loaded"
}
onmousedown:事件会在鼠标按键被按下时发生;
// 对话框将显示出您所点击的元素的标签名
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.")
}
This is a header
This is a paragraph
onmousemove:事件会在鼠标指针移动时发生
// 当用户把鼠标移动到图像上时,将显示一个对话框
οnmοusemοve="alert('您的鼠标刚才经过了图片!')" />
onmouseout:事件会在鼠标指针移出指定的对象时发生;
// 鼠标指针移出图像时显示一个对话框
οnmοusemοve="alert('您的鼠标刚才离开了图片!')" />
onmouseover:事件会在鼠标指针移动到指定的对象上时发生;
// 在网页上添加一个用作连接按钮的图像,然后我们会添加 onMouseOver 和 onMouseOut 事件,这样就可以在运行两个JavaScript 函数来切换两幅图像;
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()">
onmouseup:事件会在鼠标按键被松开时发生
// 点击图片并松开鼠标按键后,将显示一个对话框
οnmοuseup="alert('您点击了图片!')" />
onreset:事件会在表单中的重置按钮被点击时发生;
// 当重置按钮被点击时,表单会改为默认值,并显示一个对话框;
Firstname:
Lastname:
onresize:事件会在窗口或框架被调整大小时发生;
// 当用户试图调整窗口的大小时,将显示一个对话框
onselect:事件会在文本框中的文本被选中时发生;
// 当用户试图选择文本框中的文本时,会显示一个对话框
Select text:
οnselect="alert('You have selected some of the text.')" />
Select text:
οnselect="alert('You have selected some of the text.')">
Hello world!
onsubmit:事件会在表单中的确认按钮被点击时发生;
// 当用户点击提交按钮时,会显示一个对话框
οnsubmit="alert('Hello ' + testform.fname.value +'!')">
What is your name?
onunload:事件在用户退出页面时发生;
// 在页面关闭时会显示一个对话框