事件、文档的加载、练习（点击按钮切换图片）、练习（点击按钮全选、取消、反选、提交）——DOM

嘻嘻哈哈二郎神

已于 2022-11-28 19:44:36 修改

阅读量141

点赞数

分类专栏：李立超 javascript 前端文章标签：前端 javascript 开发语言

于 2022-11-27 13:28:46 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128056413

版权

javascript 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

前端

28 篇文章 0 订阅

订阅专栏

李立超

21 篇文章 2 订阅

订阅专栏

一、事件

二、文档的加载

三、练习（点击按钮切换图片）

四、练习（点击按钮全选、取消、反选、提交）

一、事件

事件（event）

- 事件就是用户和页面之间发生的交互行为

比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键……

- 可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互

- 绑定响应函数的方式：

1.可以直接在元素的属性中设置

2.可以通过为元素的指定属性设置回调函数的形式来绑定事件（一个事件只能绑定一个响应函数，再绑定会被覆盖）

3.可以通过元素.addEventListener( )方法来绑定事件（更推荐）

两个参数：

第一个参数表示事件，如click（不需要加on）C:\Users\mm\Desktop\code\html\index.html
C:\Users\mm\Desktop\code\学习.html

第二个参数为响应函数

一个事件可以绑定多个响应函数，对同一个事件多次通过使用元素.addEventListener( )方法实现绑定多个响应函数，因此更推荐使用该方法绑定响应函数。

方法一：

<body>	
	<!-- 响应函数直接在元素的属性中设置，如alert() -->
	<button id="btn" onclick="alert('你点我干嘛')">点我一下</button>
</body>

方法二：

<body>	
	<button id="btn">点我一下</button>
	<script>
		// 获取到按钮对象
		const btn = document.getElementById("btn")
		// 为按钮对象的事件属性设置响应函数
		btn.onclick = function(){//单击响应函数，即点击按钮时，函数会被调用
			alert("我又被点了一下~")
		}
		btn.onclick = function(){//一个事件只能绑定一个响应函数，再绑定就会覆盖原来的
			alert("改变了呢~")
		}
	</script>
</body>

方法三：

<body>	
	<button id="btn">点我一下</button>
	<script>
		// 获取到按钮对象
		const btn = document.getElementById("btn")
		
		btn.addEventListener("click",function(){
			alert("hhh")
		})
		btn.addEventListener("click",function(){
			alert("嘻嘻嘻")
		})
		btn.addEventListener("click",function(){//都会执行，按顺序依次执行
			alert("呜呜呜")
		})
	</script>
</body>

二、文档的加载

网页是自上向下加载的，如果将JS代码编写到网页的上边即head中，

js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况

window.onload 事件会在窗口中的内容加载完毕之后才触发

document的DOMContentLoaded事件会在当前文档加载完毕之后触发

但窗口可能有多个文档，如iframe内联框架，作用是向当前网页中嵌入其他网页，这样会使窗口有多个文档，因此DOMContentLoaded执行性能更好

如何解决这个问题（四种方式）：

1.将script标签编写到body里的最后

2.将代码编写到window.onload的回调函数中

3.将代码编写到document对象的DOMContentLoaded的回调函数中（执行时机更早）

4.将代码编写到外部的 js 文件中，然后以 defer 的形式进行引入（执行时机更早，早于DOMContentLoaded）

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script>
		//网页是自上向下加载的，如果将JS代码编写到网页的上边即head中，
		// js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况
		const btn = document.getElementById("btn")
		console.log(btn);//null

		// window.onload 事件会在窗口中的内容加载完毕之后才触发
		// 将代码编写到window.onload回调函数中
		window.onload = function(){//使用为元素的指定属性设置回调函数的方式编写
			const btn = document.getElementById("btn")
	 		console.log(btn);
		}
		//使用元素.addEventListener()方法编写
		window.addEventListener("load",function(){
			const btn = document.getElementById("btn")
		    console.log(btn);
		})

		// 将代码编写到document对象的DOMContentLoaded的回调函数中
		document.addEventListener("DOMContentLoaded",function(){
			const btn = document.getElementById("btn")
		    console.log(btn);
		})
	</script>

	<!-- 4.将代码编写到外部的 js 文件中，然后以 defer 的形式进行引入
	 -->
	<!-- <script defer src="../script/script.js"></script> -->
</head>
<body>	
	<button id="btn">点我一下</button>
	<!-- iframe内联框架，作用是向当前网页中嵌入其他网页 -->
	<iframe src="https://wwww.lilichao.com" frameborder="0"></iframe>

	 <!-- 1.将script标签编写到body里的最后 -->
	<script>
		// const btn = document.getElementById("btn")
	    // console.log(btn);
	</script>
</body>

三、练习（点击按钮切换图片）

将几张图片点击按钮时可以切换

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<style>
		.outer{
			width:1080px;
			margin:30px auto;
			text-align:center;

		}
		
	</style>
	<script>
		window.onload = function(){
			// 点击按钮切换图片

			// 获取Info
			const info = document.getElementById("info")

			// 获取到图片
			const img = document.getElementsByTagName("img")[0]

			// 获取两个按钮
			const prev = document.getElementById("prev")
			const next = document.getElementById("next")	

			// 创建一个数组来存储图片的路径
			const imgArray = [
				"../exercise/JS143练习的图片/白色1.jpg",
				"../exercise/JS143练习的图片/黑色2.jpg",
				"../exercise/JS143练习的图片/灰色3.jpg",
				"../exercise/JS143练习的图片/蓝色4.jpg",
				"../exercise/JS143练习的图片/棕色5.jpg"
			]
			// 创建一个变量记录当前图片的索引
			let current = 0

			info.textContent = `总共${imgArray.length}张图片，当前是第${current + 1}张`

			// 上一张
			prev.onclick = function(){
				current--

				//检查current的值是否合法
				if(current < 0){
					// current = 0
					current = imgArray.length - 1
				} 
				img.src = imgArray[current]

				info.textContent = `总共${imgArray.length}张图片，当前是第${current + 1}张`
			}
			
			// 点击next按钮后，切换图片
			next.onclick = function(){
				// 切换图片 -->  2.jpg, 就是修改img 的src 属性
				current++
				if(current > imgArray.length - 1){
					// current = imgArray.length - 1
					current = 0
				}
				img.src = imgArray[current]

				info.textContent = `总共${imgArray.length}张图片，当前是第${current + 1}张`
			}
		}
	</script>
</head>
<body>	
	<div class="outer">
		<p id="info">
			总共n张图片，当前是第m张
		</p>
		<div class="img-wrapper">
			<img src="../exercise/JS143练习的图片/白色1.jpg" alt="这是一个图片">
		</div>

		<div class="btn-wrapper">
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</div>

</body>

四、练习（点击按钮全选、取消、反选、提交）

注意：在事件的响应函数中，响应函数绑定给谁，this就是谁（箭头函数除外，箭头函数的this是外层作用域）

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script>
		window.onload = function(){
			/*
				全选功能 
				取消
				反选
				提交
				让四个小checkbox 与大checkbox同步
			*/
			/*
				全选功能
					-点击按钮后要使四个多选框都变成选中状态
			*/
			// 获取四个多选框
			const hobbies = document.getElementsByName("hobby")//是一个类数组
			// 获取全选按钮
			const allBtn = document.getElementById("all") 
			// 获取check-all
			const checkAllBtn = document.getElementById("check-all")
			// 获取取消按钮
			const noBtn = document.getElementById("no")
			// 为全选按钮绑定单击响应函数
			allBtn.onclick = function(){
				// 将多选框设置为选中状态,checked属性是一个布尔值，有表示选中，没有表示不选中
				for(let i=0; i< hobbies.length;i++){
					hobbies[i].checked = true
				}
				checkAllBtn.checked = true
				
			}

			/*
				取消功能
					-点击取消按钮后，取消所有选中状态
			*/

			// 为取消按钮绑定单击响应函数
			noBtn.onclick = function(){
				// 将多选框设置为未选中状态
				for(let i=0;i<hobbies.length;i++){
					hobbies[i].checked = false
				}

				checkAllBtn.checked = false
			}

			/*
				反选功能
					-点击反选按钮后，选中的取消，而没选中的选中
			*/
			// 获取反选按钮
			const reverseBtn = document.getElementById("reverse")

			// 为反选按钮绑定单击响应函数
			reverseBtn.onclick = function(){
				for(let i=0;i<hobbies.length;i++){
					hobbies[i].checked = !hobbies[i].checked
				}

				// 获取所有选中的checkbox
				const checkedBox = document.querySelectorAll("[name = hobby]:checked")

				// 判断hobbies是否全选
				if(hobbies.length === checkedBox.length){
					checkAllBtn.checked = true
				}else{
					checkAllBtn.checked = false
				}				

			}

			/*
				提交功能
					-点击提交按钮后，将选中的内容显示出来
			*/
			//获取提交按钮
			const sendBtn = document.getElementById("send")			 
			//  为提交按钮绑定单击响应函数
			sendBtn.onclick = function(){
				for(let i=0;i<hobbies.length;i++){
					// 两种方法，一个使用if，一种使用与运算符
					// if(hobbies[i].checked){//因为checked为布尔值，不需要再要求其等于true
					// 	alert(hobbies[i].value)
					// }
					hobbies[i].checked && alert(hobbies[i].value)
					// 可以使用该行代码代替使用if方法，使用与运算符，因为与运算符是短路的与，
					// 找false的，一旦第一个值为alse，则第二值不看
				}
			}

			/*
				check-all
					- 点击全选checkbox后，将小的checkbox和它同步
			*/

			// 为check-all绑定响应函数
			checkAllBtn.onchange = function(){//也可以将onchange 即改变事件改为 onclick ,但onchange更符合实际

				// console.log(this);//<input type="checkbox" id="check-all">
				// 在事件的响应函数中，响应函数绑定给谁，this就是谁（箭头函数除外）
				for(let i=0;i<hobbies.length;i++){

					// hobbies[i].checked = checkAllBtn.checked
					// 根据响应函数的this，上一行代码可以修改为
					hobbies[i].checked = this.checked//但不建议这样用this
				}
			}

			/*
				使全选checkbox和四个checkbox同步
					如果四个全选了，则全选checkbox也选中
					如果四个没全选，则全选checkbox也不选中
			*/			
			for(let i=0;i<hobbies.length;i++){
				hobbies[i].onchange = function(){

					// 获取所有选中的checkbox
					const checkedBox = document.querySelectorAll("[name = hobby]:checked")

					// 判断hobbies是否全选
					if(hobbies.length === checkedBox.length){
						checkAllBtn.checked = true
					}else{
						checkAllBtn.checked = false
					}
				}
			}

		}	
	</script>

</head>
<body>	
	<div>
		<form action="#">
			<div>
				请选择你的爱好：
				<input type="checkbox" id="check-all">全选
			</div>
			<div>
				<input type="checkbox" name="hobby" value="乒乓球">乒乓球
				<input type="checkbox" name="hobby" value="篮球">篮球
				<input type="checkbox" name="hobby" value="羽毛球">羽毛球
				<input type="checkbox" name="hobby" value="足球">足球
			</div>
			<div>
				<button type="button" id="all">全选</button>
				<button type="button" id="no">取消</button>
				<button type="button" id="reverse">反选</button>
				<button type="button" id="send">提交</button>
			</div>
		</form>
	</div>
</body>