javascript DOM事件

最新推荐文章于 2023-06-24 12:06:52 发布

潦艹

最新推荐文章于 2023-06-24 12:06:52 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weiwei266/article/details/84865662

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了前端开发中常见的鼠标事件、按钮点击响应、输入验证、背景颜色切换及下拉菜单选择等交互设计技巧，通过具体实例展示了如何使用HTML、CSS和JavaScript实现这些功能。

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

一、鼠标事件

当鼠标划过`按钮`和离开`按钮`时的事件

鼠标滑过时：`onmouseover`；

鼠标离开时：`onmouseout`；

点击时：`onclick`

HTML部分（`this可省略`）

<div><button type="button" class="btn btn-dark" 
id="bb" 
onclick="time()" 
onmouseover="over()" 
onmouseout="out()">确定</button></div>

用CSS对按钮进行样式修饰部分

<style type="text/css">
		#btn{
			margin-left: 30px;
			width: 500px;
			height: 50px;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		#bb{
			margin-left: 30px;
			width: 500px;
			height: 50px;
			margin-top: 50px;
			margin-bottom: 50px;
		}
	</style>

JavaScript部分

<script type="text/javascript">

	 function over(){  //鼠标停留
	 	bb.style.background="yellow";
	 }
	
	function out(){ //鼠标离开
		bb.style.background="#272727";
	}
	function time(){ //鼠标点击
			bb.style.background="green";
		}
	</script>

效果图

| 在这里插入图片描述 |

二、鼠标点击背景，颜色随机变化

HTML部分

<div id="demo" onclick="comecolor()"></div>

css修饰部分

#demo{
			
			width: 500px;
			height: 300px;
			background-color: red;

		}

JavaScript部分

<script type="text/javascript">
		var colors = ["red","blue","green","pink","yellow"]; //颜色数组
		function comecolor(){
			demo.style.background=colors[Math.floor(5*Math.random())];
		}
	</script>

2）、（`第二种方法，不用onclick="comecolor()"`）鼠标点击背景，颜色随机变化

CSS都一样，这里就不说了，直接上HTML和JavaScript部分
HTML部分

<div id="demo" ></div>

JavaScript部分

<script type="text/javascript">
		var colors = ["red","blue","green","pink","yellow"]; //颜色数组
		function comecolor(){
			demo.style.background=colors[Math.floor(5*Math.random())];
		}
		demo.onclick=comecolor;//点击按钮获取函数
	</script>

三、鼠标点击，换颜色和状态，比如，原来是`蓝色`，`锁定`状态，点击鼠标后，变成`黑色`，`解锁`（用隐匿函数做法，也就是匿名函数做法）

什么是匿名函数？？

`答：比如 function（）{}就是匿名函数`

`function name（）{} 就不是匿名函数`

HTML部分（要用到`class--类`）

<button type="button" class="bto" id="btn">锁定</button>

CSS部分（两个类，一个是原始，一个是点击鼠标后）

<style type="text/css">
		.bto{
			margin:50px auto;
			margin-left: 20px;
			height: 50px;
			width: 310px;
			background-color: blue;
		}
		.bt{
			background-color: #272727;
			margin:50px auto;
			height: 50px;
			width: 310px;
			color:white;
			margin-left: 20px;
		}
	</style>

JavaScript部分（`这部分JavaScript只能使按钮变化一次，而不能变回来`）

<script type="text/javascript">
		var btn=document.getElementById("btn")//获取按钮id
		btn.onclick=function(){ //给按钮一个按钮事件和一个函数，当点击按钮时，执行函数里面的内容
			this.className="bt"; //this是对该元素的引用
			this.innerHTML="解锁";
			
		}
	</script>

标题JavaScript加`强部分`（`这部分JavaScript可以让按钮变回来，再变回去`）

<script type="text/javascript">
		var btn=document.getElementById("btn")//获取按钮id
		btn.onclick=function(){ //给按钮一个按钮事件和一个函数，当点击按钮时，执行函数里面的内容
			if (this.className=="bto") { //这里是等于号  
				this.className="bt";
				this.innerHTML="解锁";
			}
			else
			{
				this.className="bto";
				this.innerHTML="锁定";
			}
		}
	</script>

`第二中方法：还可以更加按钮里面的内容来改变按钮状态，比如是解锁时，变成锁定，锁定时变成解锁`只要把 if 里的条件修改为`this.innerHTML=="锁定"`就好（

不推荐使用innerHTML事件）

<script type="text/javascript">
		var btn=document.getElementById("btn")//获取按钮id
		btn.onclick=function(){ //给按钮一个按钮事件和一个函数，当点击按钮时，执行函数里面的内容
			if (this.innerHTML=="锁定") { //这里是等于号
				this.className="bt";
				this.innerHTML="解锁";
			}
			else
			{
				this.className="bto";
				this.innerHTML="锁定";
			}
		}

2）用自定义函数做法

`前面的HTML和CSS部分和上面都一样，这里就不单独写出来了，只写出JavaScript部分`

<script type="text/javascript">
		var btn=document.getElementById("btn")//获取按钮id
		function clibtn(){
				if (this.innerHTML=="锁定") {
				this.className="bt";
				this.innerHTML="解锁";
			}
			else
			{
				this.className="bto";
				this.innerHTML="锁定";
			}


		}
		btn.onclick=clibtn; //点击按钮引用函数

`注意：clibtn后面不能有括号，如果这里有括号，则会在还没点击鼠标时，就已经执行程序；`

四、每点击按钮一次，按钮里的数字+1（`第一种写法`）

<body>
	 <div class="btn-group" role="group" aria-label="Third group" >
    <input type="button" class="btn btn-secondary" id="bt" value=1>
  </div>
  <script type="text/javascript">

			
  			bt.onclick=function(){ 
					 this.value++;
					
				}
				

				
				
				
			
	
  </script>
	
</body>
</html>

`第二种写法`

<script type="text/javascript">
  			
			
  			function uu(){
  				if (bt.onclick=uu) {
  					this.value++;
  				}
  			}
		bt.onclick=uu;
  </script>

五、点击按钮，每次+1的值`显示在div里面`

HTML部分

 <button type="button" class="btn btn-success" id="bt">Success</button>
	 
	 <div style="width: 500px;height: 200px;margin: 100px auto;
	 border: 1px solid blue" id="ii"></div>

JavaScript部分

<script type="text/javascript">
			function $(id){	
			return document.getElementById(id);	//这一行和上面那行是定义全局id，
			是对id的封装，这样写，可以使代码变得简洁
		}
			
  			bt.onclick=function(){
  				$("ii").innerHTML=this.value++;//按钮的内容显示在div的id里面，
  				也就是放到div里
  			}
				
  </script>

六、点击按钮，`div变色`

HTML部分

<button type="button" class="btn btn-success" id="bt">Success</button>

	 <div style="width: 500px;height: 200px;margin: 100px auto;
	 border: 1px solid blue;text-align: center;" id="ii"></div>

JavaScript第一种写法

<script type="text/javascript">
  			var colors = ["red","blue","green","pink","yellow"];
			function $(id){
			return document.getElementById(id);
		}
			
  			bt.onclick=function(){
  				ii.style.background=colors[Math.floor(5*Math.random())];
  			}
				
  </script>

JavaScript第二种写法

<script type="text/javascript">
  			var colors = ["red","blue","green","pink","yellow"];
			function $(id){
			return document.getElementById(id);
		}
			
  			bt.onclick=function(){
  				ii.style.background=uu();
  			}

			function uu(){
				ii.style.background=colors[Math.floor(5*Math.random())];
			}
	
  </script>

七、`document.getElementById("picure").innerHTML=this.value;`等价于`$("picure").innerHTML=this.value;`都表示把this.value的内容放到id为picure的div里显示。后者需要用

function $(id){
			return document.getElementById(id);
		}

`来封装`

八、利用鼠标事件：`onfocus`(获得焦点触发)和`onblur`(鼠标失去焦点触发)，实现，当鼠标点击输入框时，弹出提示，鼠标对输入框失去焦点时，提示隐藏

`先看效果图`

在这里插入图片描述

代码部分

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		
		#tip{
			display: none;

		}
	</style>
	<script type="text/javascript">
		window.function(){
			// function $(id){
			// 	return document.getElementById(id);
			// }
			var btn=document.getElementById("btn");
			var tip=document.getElementById("tip");
			btn.onfocus= function (){//获得焦点时出现提示
				tip.style.display='block';
					
			}
			btn.onblur= function (){//失去焦点时隐藏
				tip.style.display='none';
					
			}

}
		</script>
</head>
<body>
	<table>
		<td><input type="" name="" id="btn" placeholder="请输入"></td>
		<td id="tip">请输入十一位号码</td>
	</table>
</body>
</html>

注：`onfocus`和`onblur`只能用于`输入框，密码框、文本框`

九、在输入框输入11位数字电话号码，当正确时，提示确定，错误时提示错误

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		
		#tip{
			display: none;

		}
		#tib{
			display: none;

		}
	</style>
	<script type="text/javascript">
		window.function(){
			var btn=document.getElementById("btn");
			var tip=document.getElementById("tip");
			
			btn.onblur= function (){
				if (this.value.length==11 && isNaN(this.value)==false) {
				tip.style.display='block';
				tib.style.display='none';}
				else{
					
					tib.style.display='block';
					tip.style.display='none';

				}	
			}

}
		</script>
</head>
<body>
	<table>
		<td><input type="" name="" id="btn" placeholder="请输入11位电话号码" value=""></td>
		<td id="tip">输入正确</td>
		<td id="tib">输入错误</td>
	</table>
</body>
</html>

用图片来显示，当正确时显示对的图，错误显示错误的图

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

		
	</style>
	<script type="text/javascript">
		window.function(){
			// function $(id){
			// 	return document.getElementById(id);
			// }
			var btn=document.getElementById("btn");
			var tip=document.getElementById("tip");
			
				btn.onblur= function (){
				if (this.value.length==11 && isNaN(this.value)==false) {
				tip.innerHTML='<img src="imgs/对.png">';
				}

				else{
					
					tip.innerHTML='<img src="imgs/错误.png">';

				}	
			}

}
		</script>
</head>
<body>
	<table>
		<td><input type="" name="" id="btn" placeholder="请输入11位电话号码" value=""></td>
		<td id="tip"></td>
		
	</table>
</body>
</html>

在这里插入图片描述

注意：这种方法，如果图片很大，我们可能没法修改，所以，`还可以采用下面这种方法`

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#tip{
			display: none;
		}
		#tib{
			display: none;
		}
		
	</style>
	<script type="text/javascript">
		window.function(){
			// function $(id){
			// 	return document.getElementById(id);
			// }
			var btn=document.getElementById("btn");
			var tip=document.getElementById("tip");
			
				btn.onblur= function (){
				if (this.value.length==11 && isNaN(this.value)==false) {
				tip.style.display="block";
				tib.style.display="none";
				}

				else{
					
					tib.style.display="block";
					tip.style.display="none";

				}	
			}

}
		</script>
</head>
<body>
	<table>
		<td><input type="" name="" id="btn" placeholder="请输入11位电话号码" value=""></td>
		<td id="tip"><img src="imgs/对.png" style="width: 20px;height: 20px;"></td>
		<td id="tib"><img src="imgs/错误.png" style="width: 20px;height: 20px;"></td>
		//这里可以对图片大小进行修改
	</table>
</body>
</html>

在这里插入图片描述

十、用`onchange`给页面背景换色

注意：onchange一般用于下拉（select）、多选框（checkbox）和单选（radio）

`代码`

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的前端笔记</title>
	<style type="text/css">
		#qqq{
			width: 500px;
			height: 500px;
			margin: 40px auto;
			}
	</style>
</head>
<body>
	<div>
		<span>市区：</span>
		<select name="shiqu" id="btn" >
			<option value="" selected="selected">请选择</option>	
		<option value="blue" id="one" onclick="kk()">蓝色</option>	
		<option value="yellow"  >黄色</option>
		<option value="#272727">灰黑</option>
		</select>
	</div>
	<div id="qq"></div>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id)
		}
		btn.onchange=function(){
			if (this.value==" ")return; //注意，这里是" ",表示空
			
			document.body.style.background=this.value;}
		
		
	</script>

	
</html>

其中，用document.body获取body，也可以给bod一个id，然后id.style.background=this.value;

十一、DOM点击出现图片

<!DOCTYPE html>
<html>
<head>
	<title></title>

</head>
<body>
	<ul>
		<li><a href="img/er.png"   onclick="showPic(this);return false;">第一</a></li>
		<li><a href="img/head.png" onclick="showPic(this);return false;">第二</a></li>
		<li><a href="img/qa.png" onclick="showPic(this);return false;">第三 </a></li>
	</ul>
	<img src=" " id="pic">
	
<script type="text/javascript">
	function showPic(withpic){
		var source=withpic.getAttribute("href");
		var pic= document.getElementById("pic");
		pic.setAttribute("src",source);
	}


</script>
	
	

	
</body>
</html>

在这里插入图片描述