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

最新推荐文章于 2025-01-22 14:17:22 发布

原创

最新推荐文章于 2025-01-22 14:17:22 发布

· 519 阅读

9 ·

版权

文章标签：

#前端 #学习 #html5

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();

最低0.47元/天解锁文章