HTML5新特性2(拖放事件/历史管理/延时加载JS)

1.拖放事件

draggable

：

设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素

dragstart

, 拖拽前触发

drag

, 拖拽前和拖拽结束之间连续触发，与move的区别

dragend

, 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter

, 进入目标元素触发，相当于mouseover

dragover

,进入目标、离开目标之间，连续触发

dragleave

, 离开目标元素触发，相当于mouseout

drop

, 在目标元素上释放鼠标触发（必须在dragover上阻止默认事件

ev.preventDefault()

）

代码展示如下

<img src="hahaha.jpg">
<div id="div1" draggable="true"></div>
<script>
var oImg = document.querySelector("img");
var oDiv = document.getElementById("div1");
oDiv.ondragstart = function (ev) {
ev = ev || event;
ev.dataTransfer.setData('name','a');
console.log("拖放开始了");
};
oDiv.ondrag = function () {
console.log("拖放进行中");
};
oDiv.ondragend = function () {
console.log("拖放结束");
};
oImg.ondragenter = function () {
console.log("进入目标元素");
};
oImg.ondragover = function () {
event.preventDefault();
console.log("在目标中移动");
};
oImg.ondragleave = function () {
console.log("拖放结束");
};
oImg.ondrop = function (ev) {
ev = ev || event;
var str = ev.dataTransfer.getData('name');
console.log(str);
}
</script>

2.拖放事件的执行顺序

dragstart  >  drag >  dragenter >  dragover > dragleave > dragend

ev.preventDefault();

dragstart  >  drag dragenter >  dragover >  drop > dragend

oDiv.ondragstart = function (ev) {
ev = ev || event;
ev.dataTransfer.setData('name','a');    //设置数据 key和value(必须是字符串)
console.log("拖放开始了");
};
oImg.ondrop = function (ev) {
ev = ev || event;
var str = ev.dataTransfer.getData('name');    //获取对应的value值
console.log(str);
}

3.dataTransfer对象(event对象)

1.

effectAllowed

（dragstart）

2.

effectAllowed

: 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

3.

setDragImage

（改变拖拽clone的元素，dragstart ）,三个参数：指定的元素，坐标X，坐标Y

4.

files

<div draggable="true"></div>
<img src="block.png" width="68" height="28">
<script>
var oImg = document.querySelector("img");
var oDiv = document.querySelector("div");
oDiv.ondragstart = function (ev) {
ev = ev || event;
ev.dataTransfer.setData('name','a');
ev.dataTransfer.setDragImage(oImg,34,14);
};
</script>

FileReader

readAsDataURL

:参数为要读取的文件对象，将文件读取为DataUrl

onload

:当读取文件成功完成的时候触发此事件

this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

4.历史管理（通过跳转页面）

Window.onhashchange：改变hash值（#x）来管理

用途：可以做成不改变网址，仅改变hash值进行历史管理（window.location.hash）

history：需要在服务器下运行

history.pushState

Window.onpopstate

//示例：随机彩票页面

<input type="button" value="生成彩票" id="btn1"/>
<div id="div1"></div>
<script>
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
var json = {};
oBtn.onclick = function(){
var oArr = caiPiao(35,7);
var num = Math.random();
json[num] = oArr;
oDiv.innerHTML = oArr;
window.location.hash = num;
}
window.onhashchange = function(){
oDiv.innerHTML = json[window.location.hash.substring(1)];
}
function caiPiao(numL,howL){
var arr = [];
for(var i=0;i<numL;i++){
arr.push(i+1);
}
var newArr = [];
for(var i=0;i<howL;i++){
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}
</script>

5.延时加载JS

JS的加载会影响后面的内容加载,很多浏览器都采用了并行加载JS，但还是会影响其他内容

Html5的defer和async（外部script标签属性）

defer

: 延迟加载，会按顺序执行，在onload执行前被触发

async

: 异步加载，加载完就执行，有顺序问题（某个js基于前面一个js时会有错误），互相不影响时可以使用

Labjs

库—异步加载js库，解决了兼容性