DHTML 事件句柄（Event Handlers）

您可以在某个事件发生时通过一个事件句柄对某个元素进行某种操作。

实例

注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

onmouseover 和 onmouseout

如何在鼠标指针移到并移开一个元素时改变一个元素的颜色。 

  1. <html>
  2. <body>
  4. <h1 onmouseover="style.color='red'"
  5. onmouseout="style.color='black'">
  6. 请把鼠标移动到文本上</h1>
  8. </body>
  9. </html>

onclick

把灯点亮。如何当您单击一副图像时改变图像，然后再次单击它时换回原来的图像。 

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. cc=0
  5. function changeimage()
  6. {
  7. if (cc==0) 
  8. {
  9. cc=1
  10. document.getElementById('myimage').src="/i/eg_bulbon.gif"
  11. }
  12. else
  13. {
  14. cc=0
  15. document.getElementById('myimage').src="/i/eg_bulboff.gif"
  16. }
  17. }
  18. </script>
  19. </head>
  21. <body>
  23. <img id="myimage" onclick="changeimage()" 
  24. border="0" src="/i/eg_bulboff.gif" 
  25. width="100" height="180" />
  26. <p>请点击这个灯泡，把它点亮吧！</p>
  28. </body>
  29. </html>

onmousedown 和 onmouseup

这次只有当你按住鼠标按钮时灯才会亮。 

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function lighton()
  5. {
  6. document.getElementById('myimage').src="/i/eg_bulbon.gif"
  7. }
  8. function lightoff()
  9. {
  10. document.getElementById('myimage').src="/i/eg_bulboff.gif"
  11. }
  12. </script>
  13. </head>
  15. <body>
  16. <img id="myimage" onmousedown="lighton()" 
  17. onmouseup="lightoff()" 
  18. src="/i/eg_bulboff.gif" width="100" 
  19. height="180">
  20. <p>请点击灯泡，把它点亮！</p>
  21. </body>
  22. </html>

onload

当页面完成加载时显示一个提示框。 

  1. <html>
  2. <head>
  4. <script type="text/javascript">
  5. function mymessage()
  6. {
  7. alert("该消息被 onload 事件触发")
  8. }
  9. </script>
  10. </head>
  12. <body onload="mymessage()">
  13. </body>
  15. </html>

事件句柄

通过一个事件句柄，您可以在某个事件发生时对某个元素进行某种操作：当用户点击元素时，当页面加载时，当一个表单被提交时，等等。

  1. <h1 onclick="style.color='red'">Click on this text</h1>

上面的例子可定义当用户点击一个标题时标题变为红色。

您也可以在页面的 head 部分添加一段脚本，然后从事件句柄调用函数：

  1. <html>
  2.  
  3. <head>
  4. <script type="text/javascript">
  5. function changecolor()
  6. {
  7. document.getElementById('header').style.color="red"
  8. }
  9. </script>
  10. </head>
  11.  
  12. <body>
  13. <h1 id="header" onclick="changecolor()">Click on this text</h1>
  14. </body>
  15.  
  16. </html>

HTML 4.0 事件句柄

事件 当…时发生
onabort 用户终止页面加载。
onblur 用户离开对象。
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus 用户激活对象。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。 注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown 用户按鼠标按钮。
onmousemove 鼠标指针在对象上移动。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。