鼠标事件

最新推荐文章于 2025-06-21 16:50:39 发布

weixin_44588331

最新推荐文章于 2025-06-21 16:50:39 发布

阅读量373

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44588331/article/details/89370493

本文详细介绍了网页开发中的鼠标事件，包括单击、经过和移开事件的使用方法及示例代码，帮助开发者理解并运用这些基本交互事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标事件
（作者：张承睿，撰写时间：2019年4月10日）

鼠标单击事件( onclick ）

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <script type="text/javascript">
      function shubiaodanji(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" " shubiaodanji ()" />
   </form>
</body>
</html>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
现实鼠标经过"确定"按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <script type="text/javascript">
      function shubiaojingguo(){
        confirm("请输入姓名后，再单击确定！");}
   </script>
</head>
<body>
   <form>
   密码：<input name="password" type="text" />
   <input name="button" type="button" value="确定" " shubiaojingguo ()" />   
   </form>
</body>
</html>

鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <script type="text/javascript">
      function shubiaojingguo(){
        confirm("请输入姓名后，再单击确定！");}
   </script>
</head>
<body>
   <form>
   密码：<input name="password" type="text" />
   <input name="button" type="button" value="确定" " shubiaojingguo ()" />   
   </form>
</body>
</html>