JavaScript 中的事件_JavaScript入门教程_JS教程

JavaScript 中的事件

日期：2007-10-18 15:15:27　作者：程序员实验室　人气：　　来源：程序员实验室

事件是能够被 JavaScript 检测到的动作。

——————————————————————————
事件
使用JavaScript可以生成动态的网页。事件是JavaScript能够检测到的动作。
网页的每一个元素都能产生一定的事件，用这些事件可以触发JavaScript的函数。例如，我们可以使用一个按钮的点击(onClick)事件来指定当用户点击按钮时执行某个函数。事件在HTML的tag中定义。

事件举例:

鼠标点击
网页或图片加载
鼠标滑过网页上的热点
选择一个HTML表单中的输入框
提交一个HTML表单
某个键被按下

注意: 事件通常与函数结合使用，函数在事件触发前不会被执行。

——————————————————————————-
JavaScript的事件列表（事件属性 - 发生条件）：

onabort - 一个图片的加载被终止 (只用于)
onblur - 当一个元素失去焦点（光标移开）
onchange - 用户改变了一个域的值（用于 , ）</li> <li>onclick - 鼠标点击对象</li> <li>ondblclick - 鼠标双击对象</li> <li>onerror - 文件或图片加载出错（ <img>, <object>, <style>）</li> <li>onfocus - 一个元素得到焦点</li> <li>onkeydown - 键盘上任一键被按下</li> <li>onkeypress - 键盘上任一键被按下或保持按下</li> <li>onkeyup - 当被按下的键被释放时</li> <li>onload - 当页面或图片完成加载</li> <li>onmousedown - 当一个鼠标键被按下</li> <li>onmousemove - 鼠标移动</li> <li>onmouseout - 鼠标被从一个元素上移开</li> <li>onmouseover - 鼠标移至某元素上</li> <li>onmouseup - 鼠标键被释放</li> <li>onreset - 重置按钮被点击</li> <li>onresize - 窗口或框架大小被改变</li> <li>onselect - 文本被选择</li> <li>onsubmit - 提交按钮被点击</li> <li>onunload - 用户关闭页面</li> </ul> <p>————————————————————————————–<br /> <strong>onload 和 onUnload</strong></p> <p>onload 和 onUnload 事件分别是在用户进入或离开页面时被触发的。</p> <p>onload 事件通常被用来检查访问者的浏览器类型和版本，并根据这些信息加载适当的网页版本。</p> <p>onload 和 onUnload 事件也常常被用来在用户进入或离开页面时设置cookies。例如，当用户第一次访问你的网页时，你可以使用一个弹出窗口询问用户的名字，然后将名字存储在一个cookie中。下次当同一用户再次访问你的网页的时候，你可以用另外一个弹出窗口打出一些问候语，比如 “欢迎您，某某！”</p> <p>——————————————————————————–<br /> <strong>onFocus, onBlur 和 onChange</strong></p> <p>onFocus, onBlur 和 onChange 事件通常与表单域的验证结合使用。</p> <p>以下是一个例子，显示如何使用onChange 事件。每当用户改变这个输入域的值， checkEmail() 函数就会被调用：</p> <table align="center" border="0" cellpadding="3" cellspacing="1" width="96%"> <tr> <td class="quote"><input type=”text” size=”30″ id=”email” onchange=”checkEmail()”>;</td> </tr> </table> <p>———————————————————————————-<br /> <strong>onSubmit</strong></p> <p>onSubmit 事件通常被用来在表单提交之前验证所有的域值。</p> <p>下面是一个例子，显示怎样使用onSubmit事件。当用户点击表单的提交按钮时，函数checkForm()就会被调用。如果某些域值不能被接受，提交将会被取消。函数 checkForm()返回值为真或者假。如果返回值为真，则表单会被提交，否则，表单会被取消：</p> <table align="center" border="0" cellpadding="3" cellspacing="1" width="96%"> <tr> <td class="quote"><form method=”post” action=”xxx.htm” onsubmit=”return checkForm()”></td> </tr> </table> <p>————————————————————————————<br /> <strong>onMouseOver 和 onMouseOut</strong></p> <p>onMouseOver 和 onMouseOut 通常被用来生成动画按钮。</p> <p>以下为一个onMouseOver事件的例子。当鼠标移到链接“程序员实验室”上时，一个提示窗口就会弹出来：</p> <table align="center" border="0" cellpadding="3" cellspacing="1" width="96%"> <tr> <td class="quote"><a href=”http://www.prglab.com”<br /> onmouseover=”alert(’An onMouseOver event’);return false”> 程序员实验室 </a></td> </tr> </table> <div style=" text-align:right;">转自<a href="http://www.clde.net">CLDE.NET</a></div> <br><br> <div id="article_savelink">本文由CLDE.NET原创或整理(收集)，如您需转载，请保留一下链接，谢谢！</div> </div>  <br><br>  <div id="article_next"> 下一篇：<a href="/document/JS/page/20071018/R835FGP3pRG3ePd0.shtml" target="_blank">JavaScript中的Try…Catch 语句</a> </div> </div>   <div id="article_right"> <style type="text/css">  </style> <table width="156" border="0" cellpadding="4" cellspacing="0"> <tr> <td bgcolor="#000000"><span class="STYLE1">※视频教程※</span></td> </tr> <tr> <td><a href="http://www.clde.net/z/asp.shtml" target="_top">ASP入门到精通视频教程</a></td> </tr> <tr> <td><a href="http://www.clde.net/Document/JSP/page/327_page_1.shtml" target="_top">西安电科大JSP视频教程</a></td> </tr> <tr> <td><a href="http://www.clde.net/video/v/photoshopcs2.asp" target="_top" style="color:red;">photoshop cs2视频教程 </a></td> </tr> <tr> <td><a href="http://www.clde.net/video/v/flash.asp" target="_top">flash动画设计师视频教程</a></td> </tr> <tr> <td><a href="http://www.clde.net/video/v/Dreamweaver.asp" target="_top" style="color:blue;">Dreamweaver视频教程</a></td> </tr> <tr> <td><a href="http://www.clde.net/video/v/vb.asp" target="_top">VB从入门到精通视频教程</a></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div>  </div>  <br> <script language="javascript">  </script> <hr width="760" size="6" noshade style="color:#65ABEB"> <div style="line-height:200%;text-align:center;background-color:#F5F5F5;width:760px;"> <p><a href="http://www.CLDE.net" title="www.CLDE.net">网站首页</a> - <a href="/o/MoreFriendLink.asp">友情链接</a> - <a href="http://www.CLDE.net/f?action=work">公司简介</a> - <a href="http://www.CLDE.net/f?action=lx">联系方式</a> - <a href="http://www.CLDE.net/f?action=AD">广告投放</a> - <a href="http://www.CLDE.net/" title="www.CLDE.net - 暂未开通">客户服务</a> - <a href="mailto:CLDE.net*163.com" title="发送邮件时请把上边的"*"替换成"@"即可">错误报告</a> - <a href="http://www.CLDE.net/announce.shtml" title="本版暂未开通">免责声明</a> - <a href="http://www.CLDE.net/f?action=work">About us</a><br> CLDE.NET电脑教程中文网版权所有未经许可禁止镜象和复制本站资料 MSN:CLDE_NET@hotmail.com <br> 技术支持：CLDE.NET信息中心 <a href="http://www.miibeian.gov.cn">鲁ICP备05039940号</a> 友情链接QQ:784079(隐) <table width="235" height="36" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="59" align="center"><script src='http://s115.cnzz.com/stat.php?id=501751&web_id=501751&show=pic' language='JavaScript' charset='gb2312'></script></td> <td width="176" align="center"><img src="http://www.clde.net/Images/DownMail.gif" width="160" height="16"></td> </tr> </table> <table><tr><td></td></tr></table> </p> </div> </body> </html>