DHTML 事件句柄（Event Handlers）
DHTML 2023-08-04 20:44:23小码哥的IT人生shichen
DHTML 事件句柄（Event Handlers）
您可以在某个事件发生时通过一个事件句柄对某个元素进行某种操作。
实例
注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！
完整实例【onmouseover 和 onmouseout】：
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
请把鼠标移动到文本上</h1>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何在鼠标指针移到并移开一个元素时改变一个元素的颜色。
完整实例【onclick】：
<html>
<head>
<script type="text/javascript">
cc=0
function changeimage()
{
if (cc==0)
{
cc=1
document.getElementById('myimage').src="/i/eg_bulbon.gif"
}
else
{
cc=0
document.getElementById('myimage').src="/i/eg_bulboff.gif"
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeimage()"
border="0" src="/i/eg_bulboff.gif"
width="100" height="180" />
<p>请点击这个灯泡，把它点亮吧！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
把灯点亮。如何当您单击一副图像时改变图像，然后再次单击它时换回原来的图像。
完整实例【onmousedown 和 onmouseup】：
<html>
<head>
<script type="text/javascript">
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif"
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif"
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()"
onmouseup="lightoff()"
src="/i/eg_bulboff.gif" width="100"
height="180">
<p>请点击灯泡，把它点亮！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这次只有当你按住鼠标按钮时灯才会亮。
完整实例【onload】：
<html>
<head>
<script type="text/javascript">
function mymessage()
{
alert("该消息被 onload 事件触发")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
当页面完成加载时显示一个提示框。
事件句柄
通过一个事件句柄，您可以在某个事件发生时对某个元素进行某种操作：当用户点击元素时，当页面加载时，当一个表单被提交时，等等。
<h1 onclick="style.color='red'">Click on this text</h1>
上面的例子可定义当用户点击一个标题时标题变为红色。
您也可以在页面的 head 部分添加一段脚本，然后从事件句柄调用函数：
<html>
<head>
<script type="text/javascript">
function changecolor()
{
document.getElementById('header').style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()">Click on this text</h1>
</body>
</html>HTML 4.0 事件句柄
| 事件 | 当...时发生 |
|---|---|
| onabort | 用户终止页面加载。 |
| onblur | 用户离开对象。 |
| onchange | 用户改变对象的值。 |
| onclick | 用户点击对象。 |
| ondblclick | 用户双击对象。 |
| onfocus | 用户激活对象。 |
| onkeydown | 按下键盘。 |
| onkeypress | 按压键盘。 |
| onkeyup | 松开键盘。 |
| onload |
页面完成加载。 注释：在 Netscape 中，当页面加载时会发生该事件。 |
| onmousedown | 用户按鼠标按钮。 |
| onmousemove | 鼠标指针在对象上移动。 |
| onmouseover | 鼠标指针移动到对象上。 |
| onmouseout | 鼠标指针移出对象。 |
| onmouseup | 用户释放鼠标按钮。 |
| onreset | 用户重置表单。 |
| onselect | 用户选取页面上的内容。 |
| onsubmit | 用户提交表单。 |
| onunload | 用户关闭页面。 |
