JavaScript的常用事件（onclick、onmouseover、onmouseout、onmousemove、onload、onblur、onchange、表单事件）

最新推荐文章于 2024-04-28 12:24:08 发布

Program Debug

最新推荐文章于 2024-04-28 12:24:08 发布

阅读量4.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46990454/article/details/110919862

版权

JavaScript 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

JavaScript的常用事件

JavaScript是基于对象、采用事件驱动的脚本文件。通过鼠标或案件在浏览器窗口或网页元素上执行的操作称为事件（event）。

事件
1.onclick事件
onclick事件是鼠标单击页面元素时触发的事件。

<body>
	<script type="text/javascript">
		function check(obj){
			alert("你选择的属性是：" + obj.value);
		}
	</script>
	<h3>性别：</h3>
	<form action="#" method="post" name="test">
		<input type="radio" value="男" name="sex" onclick="check()"/>男
		<input type="radio" value="女" name="sex" onclick="check()"/>女
	</form>
</body>

2.onmouseover事件和onmouseout事件
onmouseover事件和onmouseout事件是指鼠标移入、移出页面元素时触发的事件。

<body>
	<marquee direction="right" onmouseover="stop()" onmouseout="start()">
		Hello World!!!
	</marquee>
</body>

3.onmousemove事件
onmousemove事件是指鼠标指针移动时发生的事件。

<body onmousemove="move(this)" onmouseout="out(this)">
	<script type="text/javascript>
		function move(obj){
			obj.ineerText += "hello<br/>";
		}
		function out(obj){
			obj.ineerText += "bye<br/>";
		}
	</script>
</body>

4.onload事件
onload事件会在页面加载完成后立即发生。

<body>
	<script type="text/javascript">
		alert("页面加载完成！");
	</script>
</body>

5.onblur事件
onblur事件是指光标或者焦点离开元素后触发的事件。

//判断密码是否为6位
<body>
	<p>请输入密码：<input id="pwd" type="text" onblur="judge"/></p>
	<script type="text/javascript">
		function judge(){
			var pwdLen = document.getElementById("pwd").value.length;
			if(pwdLen == 6){
				alert("密码长度验证成功");
			}else{
				alert("密码长度验证失败");
			}
		}
	</script>
</body>

6.onchange事件
onchange事件通常指输入框发生了变化或者改变下拉框列表的选项时会触发的事件。

<body>
	<select id="list" onchange="change()">
		<option>百度</option>
		<option>CSDN</option>
		<option>开源中国</option>
	</select>
	<script type="text/javascript">
		function change(){
			var tem = document.getElementById("list").value;
			alert("您选择的是：" + change());
		}
	</script>
</body>

7.表单事件
单击表单元素submit的提交按钮会触发表单中的onsubmit事件，浏览器的默认处理方式是将数据提交给actio属性指定的页面进行处理（一定是submit按钮对应onsubmit事件）。
当οnsubmit="return true"时，则将数据提交到指定页面进行处理；而当οnsubmit="return false"时，不将数据进行提交。

<body>
	<form id="form1" action="#" method="post" onsubmit="return ren()">
		<input id="sub" type="submit" value="提交"/>
	</form>
	<script type="text/javascript">
		function ren(){
			return true/false;
		}
	</script>
</body>