事件

最新推荐文章于 2025-02-26 16:47:24 发布

cybcc

最新推荐文章于 2025-02-26 16:47:24 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cybcc/article/details/104196703

单击事件

1. onclick: 鼠标的单击事件
方式一： 获取元素，在js中给元素绑定。 直接赋值使用，不需要函数名。
方式二： 定义好函数，在html标签中绑定函数。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击事件</title>
	</head>
	<body>
		
		<!--按钮 -->
		<button class="btn" onclick="myClick()">按钮</button>
		<input type="button" class="ipt"  value="点我"/>
		
		<div class="box" style="width: 100px;height: 100px; border: 1px solid;"></div>
		<script type="text/javascript">
			
			//获取元素
			var btn = document.getElementsByClassName("ipt")[0];
			var box = document.getElementsByClassName("box")[0];
			btn.onclick = function(){
				box.style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";		
			}
			
			function randomColor(){
				return Math.floor(Math.random()*(250-200)+200);
			}
			
			//方式二： 定义好函数， 在html标签中 绑定函数
			function myClick(){
				box.innerHTML = "啊~~";
			}
			
			box.onclick = function(){
				box.style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
			}
		
		</script>
	</body>
</html>

2. onload : 当页面(html,图片之类)加载完成后，执行的方法。该方法用于，包裹所有内联js代码；比如说：1. 解决js获取html标签时，标签还没有加载的情况，2. 先加载页面，再加载功能。能够提高用户体验。

<script type="text/javascript">
			window.onload = function(){
				//这里存放 所有内联的js代码
				//以保证,先加载页面,再加载js功能
			}
< /script>

事件类型

onblur	失去焦点
onfocus	获得焦点
onselect	选中文本时触发
onchange	-在内容发生改变是触发-
onreset	重置时触发
ondblclick	双击时触发

移入移出事件

onmouseover	用户移入到指定元素身上时触发
onmouseout	用户从指定元素身上移出时触发
onmousedown	用户在指定元素身上按下时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件类型</title>
		
		<style>
			.box{
				width: 100px;
				height: 100px;
				background-color: mediumturquoise;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>

		<form action="#" method="get" id="ff" class="re">
			
			<input type="text" id="ipt"/>
			
			<input type="button" class="btn" value="双击"/>
			
			<input type="submit" value=""/>
			<!--重置按钮-->
			<input type="reset"  value="重置" /> 
		</form>
	
		<hr />
		
		<div class="box"></div>
		<div class="box" style="display: inline-block;"></div>
		<div class="box" style="display: inline-block;"></div>
		<script type="text/javascript">

				var ipt1 = document.getElementById("ipt");
				//onblur： 失去焦点
//				ipt1.onblur = function(){
//					console.log("我失去了焦点");
//				}
//				
//				//onfocus: 获得焦点
//				ipt1.onfocus = function(){
//					console.log("我获得了焦点");
//				}
//				
//				//onselect: 选中文本时触发
//				ipt1.onselect = function(){
//					console.log("我被选中了");
//				}
				
				//onchange: 在内容发生改变是触发
				ipt1.onchange = function(){
					console.log("我被改了");
				}
						
				//onreset: 重置时触发
			var res = document.getElementsByClassName("re")[0];
				
			   res.onreset = function (){
					console.log("我被重置了");
				}
				
				//ondblclick: 双击时触发
				var but = document.getElementsByClassName("btn")[0];
				
				but.ondblclick = function(){
					console.log("我被双击了");
				}
				
				//鼠标的移入移出类 事件 （该名称纯属自定义）
			function randomColor(){
				return Math.floor(Math.random()*(250-200)+200);
			}
				
				var box = document.getElementsByClassName("box");
				
				box[0].onmouseover = function(){
					box[1].style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
				}
				
				box[0].onmouseout = function(){
	     			box[2].style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
				}	
				box[1].onmousedown = function(){
					box[1].style.width = 200 + "px";
				}
				
				box[2].onmouseup = function(){
					box[2].style.height = 200 + "px";
				}
				
			}
	
		</script>
	
	
	</body>
</html>

键盘事件

onkeydown	用户按下键位的时候触发
onkeyup	用户抬起键位时触发
onkeypress	用户按下该键位再抬起时触发
keyCode	键盘编码
focus()	这个方法，谁调用，就将焦点赋给谁

event对象：表示事件源本身，我们在使用的时候，以形参的形式来使用，实参由事件本身传递，使用时，一定符合见名知意：例如： event ev evt e

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<style>
			button:hover{
				/*cursor 该属性表示鼠标的样式*/
				/*pointer : 鼠标样式为小手*/
				cursor: pointer;
			}
			
			.but{
				width: 100px;
				height: 50px;
				background: yellow;
				color: pink;
			}
		</style>
	</head>
	<body>
		<input type="text" class="ipt" />
		<input type="text" class="ipt" />
		<input type="text" class="ipt" />
		
		<button>来啊</button>
		<script>
			
		var b = document.getElementsByTagName("button")[0];
		
			b.onclick = function(){
				//给元素添加或修改class类型
			    	b.className = "but";
			}
		
			var ipt = document.getElementsByClassName("ipt");	
			ipt[0].focus();
			ipt[0].onkeypress = function(ev){		
					if(ev.keyCode == 13){						
						//focus():   这个方法，谁调用，就将焦点赋给谁					
						ipt[1].focus();
					}
			}
			
			ipt[1].onkeypress = function(ev){
					if(ev.keyCode == 13){										
						ipt[2].focus();
						
					}
			}
			
			ipt[2].onkeypress = function(ev){				
				// keyCode： 键盘编码
//				console.log(ev.keyCode);
					if(ev.keyCode == 13){									
						ipt[0].focus();
						
					}
			}
			
			
		</script>
	</body>
</html>