JavaScript事件

最新推荐文章于 2024-10-02 05:39:15 发布

水沉草木

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量303

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_69761234/article/details/126402305

版权

本文详细讲解了HTML页面中的各种事件，包括load、resize、click等，并演示了如何通过onclick、addEventListener和自定义函数绑定鼠标、表单和键盘事件。实例涵盖双击、焦点切换、颜色变化和键盘输入验证。

摘要由CSDN通过智能技术生成

事件是文档或者浏览器窗口中发生的，特定的交互瞬间

典型事例：

页面加载完毕，触发load事件

浏览器窗口放大或缩小，触发resize事件

用户单击元素，触发click事件

绑定事件

var btn=document.getElementById("btn");
btn.onclick=function(){
	alert("我是第一种绑定事件的方法");
}
btn.addEventListener("click",function(){
	alert("我是第二种绑定事件的方法");
},false)
function clickFn(){
	alert("我是第三种绑定事件的方法");
}

鼠标事件：由鼠标或类似用户动作触发的事件

事件名	描述
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseup	某个鼠标按键被松开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				height: 300px;
				border: 1px solid #f00;
			}
		</style>
	</head>
	<body>
		<p>双击我看效果</p>
		<h2>按下鼠标和放开鼠标某个键</h2>
		<div></div>
	</body>
	<script>
		//获取标签
		var pEle = document.querySelector("p");
		//添加事件，执行操作
		pEle.ondblclick = function(){
			this.style.backgroundColor = "#F00";
		}
		
		//获取标签
		var h2Ele = document.querySelector("h2");
		h2Ele.onmousedown=function(){
			this.style.backgroundColor = "#0f0";
		}
		
		h2Ele.onmouseup=function(){
			this.style.backgroundColor = "#00f";
		}
		
		//获取标签
		var divEle = document.querySelector("div");
		divEle.onmousemove = function(){
			var num = parseInt(Math.random()*899999+100000);
			divEle.style.backgroundColor="#"+num;
			// console.log(num);
		}
		
	</script>
</html>

表单事件：由 HTML 表单内的动作触发的事件

事件名	描述
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	用户改变域的内容
onreset	表单重置时触发
onsubmit	表单提交时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				margin-left: 10px;
				color: #ccc;
				font-size: 14px;
			}
			
			.err{
				color: #f00;
			}
			
			.right{
				color: #0f0;
			}
		</style>
	</head>
	<body>
		<form>
			昵称：<input type="text"/><span></span>
		</form>
	</body>
	<script>
		//获取元素
		var inputEle = document.querySelector("input");
		var spanEle = document.querySelector("span");
		//添加事件
		inputEle.onfocus = function(){
			spanEle.className = "";
			this.style.backgroundColor = "#f00";
			spanEle.innerText = "昵称长度在6-12位";
		}
		
		inputEle.onblur = function(){
			//获取input标签内输入的数据
			var value =inputEle.value;
			if(value.length>12||value.length<6){
				spanEle.innerText ="昵称长度不对";
				spanEle.className = "err";
			}else{
				spanEle.innerText ="恭喜你，此昵称可以使用";
				spanEle.className = "right";
			}
			console.log(value);
		}
		
	</script>
</html>

键盘事件：对键盘操作触发的事件

事件名	描述
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下并释放一个键时发生
onkeyup	某个键盘的键被松开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input  type="text"/>
	</body>
	<script>
		//获取标签
		var inputEle = document.querySelector("input");
		//添加事件
		inputEle.onkeydown=function(){
			console.log("你按下了一个键");
		}
		
		inputEle.onkeyup = function(){
			console.log("你释放了一个键")
		}
			
	</script>
</html>

UI事件：UI（User Interface，用户界面）事件，指的是那些不一定与用户操作有关的事件

事件名	描述
onload	某个页面或图像被完成加载
onresize	窗口或框架被调整尺寸
onscroll	当文档被滚动时发生的事件

window.onload=function(){
		alert("页面加载完成");
}
function reSizeFn(){
		alert("您改变了浏览器窗口大小！");
}
var myDiv=document.getElementById("myDiv");
myDiv.onscroll=function(){
		alert("您滚动了div！");
}