HTML DOM Event 对象-优快云博客

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

onabort //图像的加载被中断。

<img src="image_w3default.gif" onabort="abortImage()" />

function abortImage()
{
alert('Error: Loading of the image was aborted')
}

onblur //元素失去焦点。

输入您的姓名：<input type="text" id="fname" onblur="upperCase()" />

function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}

onchange //域的内容被改变。

输入您的姓名：<input type="text" id="fname" onchange="upperCase(this.id)" />

function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}

onclick //当用户点击某个对象时调用的事件句柄

<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>

ondblclick //当用户双击某个对象时调用的事件句柄。

<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>

onerror //在加载文档或图片时发生错误，将返回一个提示框

<img src="image.gif" onerror="alert('The image could not be loaded.')" />

onfocus //元素获得焦点。


function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}


First name: <input type="text"
onfocus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
onfocus="setStyle(this.id)" id="lname" />

onkeydown //某个键盘按键被按下

onkeypress //某个键盘按键被按下并松开

onkeyup //某个键盘按键被松开

onload //一张页面或一幅图像完成加载。

function load()
{
window.status="Page is loaded"
}

<body onload="load()">  </body>

onmousedown //鼠标按钮被按下。

<img src="/i/example_mouse2.jpg" onmousedown="alert('You clicked the picture!')" />

onmousemove //鼠标被移动。

<img src="/i/eg_mouse2.jpg" alt="mouse"
onmousemove="alert('您的鼠标刚才经过了图片！')" />

onmouseout ///鼠标从某元素移开

<img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才离开了图片！')" />

onmouseover //鼠标移到某元素之上。

<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseover="alert('您的鼠标在图片上！')" />

onreset //重置按钮被点击

<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 //窗口或框架被重新调整大小

在本例中，当用户试图调整窗口的大小时，将显示一个对话框：
<body onresize="alert('You have changed the size of the window')">
</body>

onselect //文本被选中

在本例中，当用户试图选择文本框中的文本时，会显示一个对话框：
<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 //确认按钮被点击

在本例中，当用户点击提交按钮时，会显示一个对话框：
<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>

onunload //用户退出页面

在本例中，在页面关闭时会显示一个对话框：
<body onunload="alert('The onunload event was triggered')">  </body>

转载于:https://my.oschina.net/xiaojunx/blog/711884