Day34、简单JavaScript事件

最新推荐文章于 2024-11-05 22:07:06 发布

格子衫的快乐

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量383

点赞数

分类专栏： java学习文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_72629130/article/details/127214733

版权

java学习专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、事件

1.1、什么是事件

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

2）典型事例：

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

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

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

1.2、绑定事件方法

1）在元素使用事件属性来绑定事件

2）先获取元素在绑定事件

3）使用事件监听器来绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button onclick="show()">
			点击一下
		</button>
	</body>
	<script>
		//绑定事件的第一种方式：在元素使用事件属性来绑定事件
		// function show(){
		// 	alert('第一种方式');
		// }
		
		//绑定事件的第二种方式：先获取元素在绑定事件
		// var btnEle=document.querySelector('button');
		// btnEle.ondblclick=function(){
		// 	alert('第二种方式');
		// }
		
		//绑定事件的第三种方式：使用事件监听器来绑定事件
		btnEle.addEventListener('mouseover', function() {
			alert('第三种方式');
		})
	</script>
</html>

1.3、鼠标事件

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

2）鼠标在div上移动随机改变div的背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 500px;
				height: 300px;
				border: 1px solid #f00;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script>
		//第一步：获取div元素
		var divEle = document.querySelector('div');
		//第二步：给获取的div元素绑定鼠标移动事件
		divEle.onmousemove = function() {
			//输入随机获取的整数
			// var num = parseInt(Math.random()*100);
			// console.log(num);

			//现在不输出随机数，随机改变div的背景颜色
			/*
				修改div元素的背景颜色不难实现，难的是如何随机获取一个6位的十六进制数
				
				分析：
					直接通过parseInt(Math.random()*10)只能获取到0-9这10个数字
					但是，表示颜色的十六进制除了0-9这10个数字，还有A-F这6个字母，所以直接通过Math.random()产生不了十六进制所有需的所有数字
					
					既然十六进制需要0-9，A-F这16个数字，那我给你准备好
					var nums = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F',];
					接下来，可以从上述数组中随机的取出6个数字，进行组合，形成颜色的十六进制表示法
			*/
			var nums = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
			//循环6次，从nums数组中取出数据，进行组合，形成“#xxxxxx”的形式
			var colorStr = "#";
			for (var i = 0; i < 6; i++) {
				var index = parseInt(Math.random() * 16);
				colorStr += nums[index];
			}
			console.log(colorStr);
			divEle.style.backgroundColor = colorStr;
		}
	</script>
</html>

1.4、表单事件

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

2）表单重置事件不支持input标签，支持form标签

1.5、键盘事件

1）键盘事件就是对键盘操作触发的事件

2）键盘事件的事件次序：onkeydown onkeypress onkeyup

function keyDown(){
		input[0].style.background="red";
}
function keyUp(){
		input[0].style.background="blue";
}
function keyPress(){
		input[1].style.background="pink";
}

1.6、UI事件

1）UI（User Interface，用户界面）事件

2）指的是那些不一定与用户操作有关的事件

3）如果重载页面，也会触发 unload 事件（以及 onload 事件）

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