【学习前端第三十八课】 HTML5事件

-Wake-

于 2024-01-19 09:53:45 发布

阅读量401

点赞数 10

分类专栏：【前端】入门到就业文章标签：前端学习 html5

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135689805

版权

【前端】入门到就业专栏收录该内容

79 篇文章 1 订阅

订阅专栏

HTML5事件

1、oncontextmenu 事件

2、onbeforeunload 事件

3、DOMContentLoaded 事件

window的load事件会在页面中的一切都加载完毕时触发，但是这个过程可能会因为要加载的外部资源过多而颇费周折，而DOMContentLoaded事件在形成完整的DOM树之后就会触发，不会理会图片，js文件，css文件或者其他的资源文件是否已经加载完毕，于load事件不同，DOMContentLoaded 支持页面下载的早期添加事件处理程序，这也就意味着可以尽早于页面进行交互

4、readystatechange事件

IE为DOM文档中的某些部分提供了readystatechange事件，这个事件的目的时提供于文档或元素的加载状态有关的信息，但是这个事件的行为有什么很难预料，支持readystatechange事件的每个对象都有一个readyState的属性，可能包含以下5种值中的一种

1、uninitlized（未初始化）：对象存在但是尚未初始化

2、loading（正在加载）：对象正在加载数据

3、loaded（加载完毕）：对象加载数据完毕

4、interactive（交互）：可以操作对象了，但是没有完全加载

5、complate （完成）：对象已经加载完毕

对于document而言，readyState属性的值为interactive会与DOMContentLoaded 大致相同的时刻触发readystatechange事件，此时，DOM树已经加载完毕，可以安全的操作它的，因此就可以进行交互阶段，但是此时，图片和其他外部文件不一定能用

document.addEventListener("readystatechange",function(event){
	if(document.readyState == "interactive"){
		alert("content loaded");
	}
})

1、支持readystatechange事件的浏览器有IE，firefox4.0+ 和 opera

2、虽然使用readystatechange事件可以事件接近的模拟DOMContentLoaded 事件，但是他们本质上不同的，在不同的页面中，load事件与readystatechange事件并不能保证以相同的顺序触发

5、hashchange事件

在说这个事件先简单说下什么时hash

HTML5 新增了hashchange事件，以便在URL的参数列表（URL中 # 后面的所有字符串），发生变化的时候通知开发人员，之所以添加这个事件，时因为后面ajax里面要用，开发人员会经常利用URL的参数列表保存状态或导航信息

拖放事件

一个页面上面DOM元素默认是不允许拖动的，如果想要拖动它需要添加属性 dragable="true"

<div class="box" draggable="true">
    我是一个可以被拖动的盒子
</div>

通过拖放事件，可以控制拖放相关的各个方面，其中最关键的地方在于确定哪里发生了拖放事件，有些事件是在被拖动的元素上触发的，有些事件是在放置目标上触发的，拖动元素时，按照操作过程依次触发下面事件

1、dargstart 拖动开始时

2、drag 拖动的时候

3、dragend 拖动结束的时候

按下鼠标并开始移动鼠标时，会在拖放元素上面触发dragstart事件，此时光标禁止图标，表示不能把元素放在自己身上，开始拖动时，可以通过ondargstart事件来绑定事件方法

当某一个元素被拖动到一个有效的放置目标上是，又会又下列事件依次触发

1、dragenter 拖动的元素进来了

2、dragover 拖动的元素悬停在放置目标上面

3、drop 拖动的元素在这里松开放置的时候

4、dragleave 拖动的元素又出来了

自定义放置目标

在HTML中，默认情况下所有的元素都是支持放置目录事件，也就是drop事件，但是这些元素默认是不允许放置的，所以也就无法触发ondrop事件，如果想触发ondrop事件，则需要取消dragenter与 dragover 事件的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width:200px;
				height:200px;
				background:red;
			}
			.box2{
				width:400px;
				height:400px;
				background:green;
			}
		</style>
	</head>
	<body>
		<div class="box" draggable="true">
			我是一个可以被拖动的盒子
		</div>
		<div class="box2">
			着是一个可以放置的盒子
		</div>
		<script type="text/javascript">
			var box2 = document.querySelector(".box2");
			box2.addEventListener("dragenter",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			box2.addEventListener("dragover",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
		</script>
	</body>
</html>

当取消了事件的默认行为以后，这个元素上面就可以放置目标了，当我们再把元素拖放再这个目标原算个的时候，我们就发现鼠标光标就发生了变化

dataTransfer对象

一个元素拖放到另一个元素上面去的时候，两个元素之间只发生了事件触发，不会又任何变化，为了实现数据的交换功能，event对象上面就有一个属性叫 dataTransfer这个属性负责在两个元素之间传递数据，以下有两个常用方法

1、setData()在拖动的元素上面设置数据

2、getData() 在放置的元素上面获取数据

以下面的案例来说明拖放功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.big-box{
				width:400px;
				height:400px;
				border:solid 2px #000;
			}
			.box1{
				width:200px;
				height:200px;
				background:red;
			}
			.box2{
				width:200px;
				height:200px;
				background:green;
			}
		</style>
	</head>
	<body>
		<div class="big-box">
			
		</div>
		<div class="box1" draggable="true" id="box1">
			我是一个可以被拖动的盒子
		</div>
		<div class="box2" draggable="true" id="box2">
			我也是一个可以拖动的盒子
		</div>
		<script type="text/javascript">
			var bigBox = document.querySelector(".big-box");
			var box1 = document.querySelector(".box1")
			var box2 = document.querySelector(".box2");
			bigBox.addEventListener("dragenter",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			bigBox.addEventListener("dragover",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			box1.addEventListener("dragstart",function(event){
				console.log("box1开始拖动了");
				var e = event || window.event;
				e.dataTransfer.setData("domId",this.id);
			})
			box2.addEventListener("dragstart",function(event){
				console.log("box2开始拖动了");
				var e = event || window.event;
				e.dataTransfer.setData("domId",this.id);
			})
			bigBox.addEventListener("drop",function(event){
				//console.log("drop事件触发");
				var domId = event.dataTransfer.getData("domId");
				var dragDom = document.querySelector("#" + domId);
				this.appendChild(dragDom);
			})
		</script>
	</body>
</html>

在上面的基础上再进行一个拖放的复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.big-box{
				width:400px;
				height:400px;
				border:solid 2px #000;
			}
			.box1{
				width:200px;
				height:200px;
				background:red;
			}
			.box2{
				width:200px;
				height:200px;
				background:green;
			}
		</style>
	</head>
	<body>
		<div class="big-box">
			
		</div>
		<div class="box1" draggable="true" id="box1">
			我是一个可以被拖动的盒子
			我们通过获取到outerHTML的值进行复制操作
		</div>
		<div class="box2" draggable="true" id="box2">
			我也是一个可以拖动的盒子
		</div>
		<script type="text/javascript">
			var bigBox = document.querySelector(".big-box");
			var box1 = document.querySelector(".box1")
			var box2 = document.querySelector(".box2");
			bigBox.addEventListener("dragenter",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			bigBox.addEventListener("dragover",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			box1.addEventListener("dragstart",function(event){
				console.log("box1开始拖动了");
				var e = event || window.event;
				e.dataTransfer.setData("domId",this.outerHTML);
			})
			box2.addEventListener("dragstart",function(event){
				console.log("box2开始拖动了");
				var e = event || window.event;
				e.dataTransfer.setData("domId",this.outerHTML);
			})
			bigBox.addEventListener("drop",function(event){
				//console.log("drop事件触发");
				var domId = event.dataTransfer.getData("domId");
				
				this.insertAdjacentHTML("beforeEnd",domId);
			})
		</script>
	</body>
</html>

文件拖放

拖放的主要应用点还是再文件的拖放上面，那么我们以拖放图片文件为例来制作一个拖放上传图片文件并实现上传图片预览的一个功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#img1{
				width:200px;
				height:200px;
				border:solid 1px grey;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img id="img1">
			<input type="file" id="file1" style="display:none">
			<button type="button" id="btnChooseFile" onclick="this.previousElementSibling.click()">选择文件</button>
		</div>	
		<script type="text/javascript">
			var file1Dom = document.querySelector("#file1");
			var img1 = document.querySelector("#img1");
			file1Dom.addEventListener("change",function(event){
				var e = event || window.event;
				console.dir(this);
				var file = this.files[0];
				//判断上传的文件类型是否是图片
				var reg = /^image\/(jpg|jpeg|png|gif)$/;
				if(reg.test(file.type)){
					img1.src = URL.createObjectURL(file);
				}else{
					alert("请选择图片文件");
				}
			})
			//-------------------拖放-------------------------------------
			document.addEventListener("dragenter",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			document.addEventListener("dragover",function(event){
				var e = event || window.event;
				e.preventDefault();
			})
			document.addEventListener("drop",function(event){
				var e = event || window.event;
				e.preventDefault();
				if(e.dataTransfer.files.length > 0){
					var reg = /^image\/(jpg|jpeg|png|gif)$/;
					var file = e.dataTransfer.files[0];
					if(reg.test(file.type)){
						img1.src = URL.createObjectURL(file);
						console.dir(file1Dom)
					}else{
					alert("请选择图片文件");
				}
				}
			})
		</script>
	</body>
</html>

心有所期，忙而不茫 ᴳᴼᴼᴰ ᴹᴼᴿᴺᴵᴺᴳ
Have a nice day ·✦

-Wake-

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【学习前端第三十八课】 HTML5事件

在HTML中，默认情况下所有的元素都是支持放置目录事件，也就是drop事件，但是这些元素默认是不允许放置的，所以也就无法触发ondrop事件，如果想触发ondrop事件，则需要取消dragenter与 dragover 事件的默认行为} .box2 {
复制链接

扫一扫