<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 事件绑定</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body onload='alert("文档载入，欢迎光临！");' onunload='alert("谢谢惠顾，再会！");'>
<h1 align="center">HTML 事件绑定举例</h1>
<hr>
<table bordercolorlight="#000000" bordercolordark="#008000" border="1" bgcolor="#C0CfCf" width="100%" height="100%">
<tr>
<td width="20%">鼠标事件</td>
<td>
<ul>
<li>onblur:
<input type="text" value="单击鼠标后离开" size="16" onblur="alert('失去焦点');" name="T1">
onfocus:
<input type="text" value="点击本域" onfocus="alert('获得焦点');" name="T3" size="16"></li>
<br><br>
<li>onclick: <input type="button" value="单击这里" onclick="alert('鼠标单击');">
onmousedown:
<input type="button" value="单击后按住不放" onmousedown="alert('鼠标按下');"></li>
<br><br>
<li>ondblclick: <input type="button" value="双击这里" ondblclick="alert('鼠标双击');">
onmouseup:
<input type="button" value="单击后并释放" onmouseup="alert('鼠标弹起');"></li>
</ul>
</tr>
<tr>
<td width="20%">键盘事件</td>
<td>
<ul>
<li>onkeydown:
<input type="text" value="按下按键后慢慢松开" size="16" onkeydown="alert('键按下');" name="T4">
onkeyup:
<input type="text" value="按下一个键然后松开" size="16" onkeyup="alert('键弹起');" name="T6"></li>
<br><br>
<li>onkeypress:
<input type="text" value="在这里输入内容" size="16" onkeypress="alert('内容改变');" name="T5">
onchange:
<input type="text" value="改变内容后离开" size="16" onchange="alert('内容已改变');" name="T2"></li>
</ul></td>
</tr>
<td width="20%">按钮事件</td>
<td>
onreset: <input type="reset" value="重置本文档">
onsubmit: <input type="submit" value="提交测试"></td>
</tr>
<tr>
<td width="20%">链接事件</td>
<td>
<ul>
<li>onmousemove: 在这里移动鼠标：<a href="#" onmousemove="alert('鼠标移过');">链接</a><br></li>
<li>onmouseout: 将鼠标放在 <a href="#" onmouseout="alert('鼠标移走');">这里</a> 然后离开。<br></li>
<li>onmouseover: 将鼠标放到这个 <a href="#" onmouseover="alert('鼠标在这里');">链接</a>上。</li>
<li>onunload: 通过点击该 <a href="http://www.google.com">链接</a> 离开本文档</li>
</ul></td>
</tr>
<td width="20%">文档事件</td>
<td>
<ul>
<li>onload: 本文档载入时会弹出一个警告对话框</li>
<li>onselect:
<input type="text" value="选择这里的文本" size="16" onselect="alert('选择了文本');" name="T7"></li>
</ul></td>
</tr>
</table>
</body>
</html>
