JavaScript红皮书学习(16)--HTML5 脚本编程

Posted by liveipool on January 14, 2017

HTML5 脚本编程

16.0.png

16.1 原生拖放

HTML5 以IE的实例为基础指定了拖放规范.

16.1.1 拖放事件

16.1.1.png

16.1.2 自定义放置目标

虽然所有元素都支持放置目标事件,但这些元素默认是不允许放置的.如果拖动元素经过不允许放置的元素,无论用户如何操作的,都不会发生drop事件,而不会发生drop事件我们就无法定义在drop事件发生时会产生怎样的变化.
把任何元素变成有效的放置目标的方法是:重写dragenter和dragover事件的默认行为:

	var node1 = document.getElementById("drag");
	node1.addEventListener("dragover", function(event) {
		event.preventDefault();
	})
	node1.addEventListener("dragenter", function(event) {
		event.preventDefault();
	})

firefox上还有个小bug,在拖动图片后,它会自动打开图片的URL,这时还需要在drop事件中加上event.preventDefault().

16.1.3 dataTransfer 对象

16.2.3.png
暂时没用到过这个对象

16.1.4 可拖动

16.2.5.png

由于元素的放置事件的默认行为是什么都不做,所以要自己重写这个行为,比如,可通过下面这段代码实现一个拖动添加图片:(但这种写法不太好,最好是能够直接复制,但还没学会怎么直接复制图片,应该是要用到dataTransfer对象,以后看看).

	//jade 
	div.m-20
		img(src="/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg")
	div#drag.w-500.h-500.m-20(style="border: 1px solid black")

	//JavaScript
	var node1 = document.getElementById("drag");
	var nodeImg = document.getElementsByTagName("img")[0];
	node1.addEventListener("dragover", function(event) {
		console.log("1");
		event.preventDefault();
	})
	node1.addEventListener("dragenter", function(event) {
		console.log("2");
		event.preventDefault();
	})
	node1.addEventListener("drop", function(event) {
		var image = document.createElement("img");
		image.src = "/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg";
		node1.appendChild(image);
		event.preventDefault();
	})

16.2 媒体元素

HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入浏览器的音频和视频内容.这两个标签就是< audio >和< video >.
16.3.png
但是要注意,不同浏览器对这两个标签的支持区别很大,在使用时一定要注意.

16.2.1 属性

16.3.11.png
16.3.12.png

16.2.2 事件

16.3.2.png

16.2.3 检测编解码器的支持情况

16.3.41.png
16.3.42.png

16.2.4 Audio类型

16.3.51.png
16.3.52.png

16.3 历史状态管理

历史状态管理是现代Web应用中的一个难点.因为在现代Web应用中,用户的每次操作不一定会打开一个一个全新的页面,因此”后退”和”前进”按钮也就失去了作用,导致用户很难在不同状态间切换.

要解决这个问题,首选使用hashchange事件,通过这个事件,可以知道URL参数什么时候发生了变化,即什么时候该有所反应.而通过状态管理API,能够在不加载新页面的情况下改变浏览器的URL.为此,需要使用history.pushState()方法,该方法可以接收三个参数:1.状态对象. 2.新状态的标题. 3.可选的相对URL.但是,这个方法现在还未被所有浏览器完全支持,如firefox会忽略第二个参数等.
16.41.png
16.42.png
16.43.png

16.4 小结

16.5.png

相关文章链接