javaScript事件

最新推荐文章于 2024-07-26 11:41:15 发布

東京QAQ

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量22

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/2201_75296675/article/details/134229717

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.单击事件的案例

点击按钮来回展示开始点名或停止点名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>开始点名</button>
		
		
		<script>
			
			
			var btn = document.getElementsByTagName("button")[0];
			
			
			btn.onclick = function(){
				//获取button的文本值.
				var text  = btn.innerText ; 
				if(text=="开始点名"){
					btn.innerText = "停止点名"
				}else{
					btn.innerText = "开始点名";
				}
			}
			
			
		</script>
	</body>
	
</html>

2.双击事件的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 230px;
				height: 230px;
				text-align: center;
				border : 1px  solid  black;
				display: none;
			}
		</style>
		
	</head>
	<body>
		<button>双击打开登录页面</button>
		
		<div>
			<h3>登录弹窗！！</h3>
			账号<input type="text" placeholder="请输入你的账号" /> <br>
			密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>
			<button>登录</button>  <button>返回</button>
		</div>
		
		
		
		<script>
			
			//思考:浏览器中的弹窗为啥那么好看
			//但是我们学习的三个弹窗 一个比一个丑 
			//其实浏览器的弹窗 并不是真正的弹窗.
			//思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.
			
			
			//需求:双击打开登录页面
			document.getElementsByTagName("button")[0].ondblclick = function(){
				
				document.getElementsByTagName("div")[0].style.display = "block";
				
			}
			
			document.getElementsByTagName("button")[2].onclick = function(){
				document.getElementsByTagName("div")[0].style.display = "none";
			}
		</script>
		
	</body>
</html>

3.鼠标移入移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				width: 200px;
				height: 200px;
			}
			.b{
				width: 400px;
				height: 400px;
			}
			
			
		</style>
	</head>
	<body>
		
		<img class="a" src="img/1.PNG"> 
		
		<script>
			//需求 鼠标移入图片内部 ,图片放大  鼠标移出图片  图片还原 
			var img = document.getElementsByTagName("img")[0];
			
			img.onmouseover = function(){
					// img.style.width = "400px";
					// img.style.height = "400px";
					img.className = "b";
			}
			
			img.onmouseout = function(){
					// img.style.width = "200px";
					// img.style.height = "200px";
					img.className = "a";
			}
			
		</script>
		
	</body>
</html>

4.演示键盘输入事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		小写字母：<input type="text" id="a" /> <br>
		大写字母：<input type="text" id="b" />
		
		<script>
			//在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母
			
			//思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.
			//获取第一个文本框的值.然后赋予给第二个文本框
			
			var i1 = document.getElementById("a");
			var i2 = document.getElementById("b");
			i1.onkeyup = function(){
				i2.value = i1.value.toUpperCase();
			}
			
		</script>
		
	</body>
</html>

5.演示获取焦点和失去焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		账号：<input type="text" id="a" />  		<span id="c"></span>  		<br>
		
		<script>
			var username = document.getElementById("a");
			var password = document.getElementById("a");
			var tip1 = document.getElementById("c");
			var tip2 = document.getElementById("d");
			
			//需求:输入账号之后.提示账号输入规则.
			//思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
			username.onfocus = function(){
				tip1.innerText = "账号的长度要在6-10之间";
				tip1.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			username.onblur = function(){
				var username123 = username.value; 
				if (username123.length >=6  && username123.length<=10) {
					tip1.innerText = "√";
					tip1.style.color = "green";
				} else{
					tip1.innerText = "X";
					tip1.style.color = "red";
				}
			}
			
			
		</script>
		
	</body>
</html>

6.演示表单提交事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="f" action="#" method="post">
			账号：<input type="text" id="a" />  			<span id="c"></span>  		<br>
			密码：<input type="password" id="b" />  		<span id="d"></span>  		<br>
			<input type="submit" value="登录" />
		</form>
		<script>
			var username = document.getElementById("a");
			var password = document.getElementById("b");
			var tip1 = document.getElementById("c");
			var tip2 = document.getElementById("d");
			var f = document.getElementById("f");
			
			
			//需求:输入账号之后.提示账号输入规则.
			//思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
			username.onfocus = function(){
				tip1.innerText = "账号的长度要在6-10之间";
				tip1.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			username.onblur = function(){
				var username123 = username.value; 
				if (username123.length >=6  && username123.length<=10) {
					tip1.innerText = "√";
					tip1.style.color = "green";
				} else{
					tip1.innerText = "X";
					tip1.style.color = "red";
				}
			}
			
			password.onfocus = function(){
				tip2.innerText = "密码的长度要在6-10之间";
				tip2.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			password.onblur = function(){
				var password123 = password.value; 
				if (password123.length >=6  && password123.length<=10) {
					tip2.innerText = "√";
					tip2.style.color = "green";
				} else{
					tip2.innerText = "X";
					tip2.style.color = "red";
				}
			}
			
			
			
			//onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交  return false就表示不提交
			f.onsubmit = function(){
				
				if(tip1.innerText=="√"  && tip2.innerText=="√" ){
					return true;
				}else{
					alert("请按照要求写");
					return false;
				}
			}
			
			
		</script>
		
	</body>
</html>