前端学习笔记——JavaScript（五）事件

最新推荐文章于 2021-06-29 00:27:00 发布

yellow_阿紫

最新推荐文章于 2021-06-29 00:27:00 发布

阅读量264

点赞数

分类专栏： Web 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44228263/article/details/114317743

版权

这篇博客详细介绍了JavaScript中的多种事件，包括鼠标单击（onclick）、鼠标经过（onmouseover）、鼠标移开（onmouseout）、光标聚焦（onfocus）、失焦（onblur）、内容选中（onselect）、文本框内容改变（onchange）、加载（onload）和卸载（onunload）事件。通过实例代码解释了这些事件如何与网页交互并触发相应的函数。

摘要由CSDN通过智能技术生成

JavaScript（五）事件

鼠标单击事件（onclick）

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

<html>
<head>
   <script type="text/javascript">
      function add2(){
    
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>
</body>
</html>

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

鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

现实鼠标经过"确定"按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>onmouseout</title>
	<script type="text/javascript">
		function info(){
    
			confirm("请输入姓名后，点击确定！");
		}
	</script>
</head>
<body>
	<form>
		密码：<input type="text" name="password">
		<input