事件

最新推荐文章于 2024-11-27 21:30:00 发布

cherry...a

最新推荐文章于 2024-11-27 21:30:00 发布

阅读量64

点赞数

本文链接：https://blog.youkuaiyun.com/qq_46466568/article/details/108863802

版权

这篇博客探讨了JavaScript中的事件处理，包括点击、鼠标悬浮等事件的绑定和处理函数，以及如何通过事件监听实现多事件绑定。此外，还详细讲解了焦点事件在表单中的应用，如输入框获得和失去焦点时的处理。最后，文章介绍了如何使用JavaScript进行简单的表单验证，确保用户名和密码符合特定规则。

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

事件

<body>
		<button type="button" onclick="show()">一个按钮</button>
		<h1 id="myh">aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
		<h1>aaaa</h1>
	</body>
</html>
<script type="text/javascript">
	// 事件：生活中的指的就是一件事情。
	// JS中的事件，指的就是一些特定的事情，或行为。
	//JS中的事件：
	//事件源 ：事件在那个标签发生。
	//事件类型 ：各种各样的事件 比如点击事件，双击事件  等等
	//事件绑定 ：把这个事件绑定给元素某个元素
	//事件的处理函数：事件触发后的处理函数。
	
	//给标签如何来绑定某个事件
	//绑定事件的3种方式：
	//方式1：直接在标签上，绑定事件
	function show(){//事件一点击  事件处理函数就执行了
		alert("单击了");
	}
	
	//方式2：用代码来绑定事件： 标签对象.事件名=function(){}
	var h1=document.getElementById("myh");
	h1.onclick=function(){
		alert("弹了");
	}
	
	var h1Arr=document.getElementsByTagName("h1");
	for(var i=0;i<h1Arr.length;i++){
		h1Arr[i].onclick=function(){
			//每点一个元素，随机变换一个文本颜色。
			//this表示当前触发了点击事件的那个元素对象。
			//随机取整数，进行颜色搭配
			var a=Math.floor(Math.random()*255);
			var b=Math.floor(Math.random()*255);
			var c=Math.floor(Math.random()*255);
			
			this.style.color=`rgb(${a},${b},${c})`;
		}
	}
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="myBtn">一个按钮</button>
	</body>
</html>
<script type="text/javascript">
	var btn=document.getElementById("myBtn")
	var show=function(){
		alert("点击了");
	}
	
	var show2=function(){
		alert("点击了22222");
	}
	var show3=function(){
		this.style.background="red";
	}
	var show4=function(){
		this.style.background="yellow";
	}
	//给一个元素，绑定多个事件
	btn.addEventListener("click",show);
	
	btn.addEventListener("click",show2);
	
	btn.addEventListener("mouseover",show3);
	btn.addEventListener("mouseout",show4);
	
	// removeEventListener() 方法 移除事件 值1：事件名，值2：事件的处理函数
	btn.removeEventListener('click',show);
</script>

焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- * 焦点事件：针对表单
					* onfocus 元素获得焦点。 
					* onblur  元素失去焦点 -->
		<form action="#" method="get">
		用户名：	<input type="" name="" id="uname" value="请输入用户名6-16位字母" onfocus="clearValue()" onblur="show()"/><br>
		密码：	
		<input type="" name="" id="" value="" placeholder="请输入密码6-16位数字"/>
		<br>
		<input type="submit" value="提交"/>
		</form>
	</body>
</html>
<script type="text/javascript">
	function clearValue(){
		//alert("获取焦点了");
		document.getElementById("uname").value="";
	}
	function show(){
		var v=document.getElementById("uname").value;
		alert(v);
	}
</script>

表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--onsubmit 表单提交事件 
		  onsubmit="return true" 返回true表单会提交
		  onsubmit="return false" 返回false 表单不会提交 
		 -->
		<form action="#" method="get" onsubmit="return checkForm()">
			用户名： <input type="" name="username" id="uname" value="请输入用户名6-16位字母" onfocus="clearValue()" onblur="checkUsername()" />
			<span id="usp"></span>
			<br>
			密码：
			<input type="" name="password" id="pwd" value="" placeholder="请输入密码6-16位数字" onblur="checkPassword()" /><span id="psp"></span>
			<br>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
<script type="text/javascript">
	function checkForm(){
		return checkUsername()&&checkPassword();
	}
	function clearValue() {
		//alert("获取焦点了");
		document.getElementById("uname").value = "";
	}

	function checkUsername() {
		var username = document.getElementById("uname").value;
		var regx=/^[a-z]{6,16}$/i;
		var f=regx.test(username);
		if(f){
			document.getElementById('usp').innerHTML="<span style='color: aquamarine;'>用户名规则正确</span>"
		}else{
			document.getElementById('usp').innerHTML="<span style='color:red;'>用户名规则错误</span>"
		}
		
		return f;
		
	}
	
	function checkPassword() {
		var password = document.getElementById("pwd").value;
		var regx=/^[1-9][0-9]{5,15}$/;
		var f=regx.test( password);
		if(f){
			document.getElementById('psp').innerHTML="<span style='color: aquamarine;'>密码规则正确</span>"
		}else{
			document.getElementById('psp').innerHTML="<span style='color:red;'>密码规则错误</span>"
		}
		
		return f;
	
	}
</script>