HTML5其他一些API

网站建设

建站基本步骤
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言

首页 > 专业技术 > 网站建设 > HTML5其他一些API

上一主题

下一主题

HTML5其他一些API

Page Visibility API
Fullscreen全屏 API
鼠标指针锁定API
requestAnimationFrame
Mutation Observer
JavaScript Promise
Beacon API
WebRTC
FileReader API
拖放 API

一、Page Visibility API：

通过该API，开发者知道一个Web页面何时变为可见或获取焦点。当用户在多个浏览器的标签之间进行切换时，Web页面可能从可见变为不可见。在Page Visibility API中，当用户将Web页面最小化或将当前浏览器标签切换到其他标签时，将会触发一些事件，可以指定在该事件中所需执行的处理。

1.实现Page Visibility API：

使用Page Visibility API之前，需要判断当前浏览器是否支持。代码为：
if(typeof document.mozHidden!=="undefined"){
  //对firefox的代码
}else if(typeof document.msHidden!=="undefined"){
  //对IE的代码
}else if(typeof document.webkitHidden!=="undefined"){
  //对chrome和opera的代码
}else if(typeof document.hidden!=="undefined"){
  //对其他浏览器的代码
}
Page Visibility API中，可以通过document对象的hidden属性值来判断页面是否处于可见状态，当页面处于可见状态时属性值为false，当页面处于不可见状态时属性值为true。
Page Visibility API中，可以通过document的visibilityState属性值来判断页面的可见状态，属性值为一个字符串：
·visible：页面至少部分可见，当前页面位于用户正在查看的浏览器标签窗口中且浏览器窗口未被最小化。
·hidden：页面内容对用户不可见，当前页面不在用户正在查看的浏览器标签窗口中或浏览器已被最小化。
·prerender：页面内容已被渲染，但是用户不可见。

2.video元素使用Page Visibility API的示例：

var hidden,visibilityChange,videoElement;
if(typeof document.mozHidden!=="undefined"){
  hidden="mozhidden";
  visibilityChange="mozvisibilitychange";
}else if(typeof document.msHidden!=="undefined"){
  hidden="mshidden";
  visibilityChange="msvisibilitychange";
}else if(typeof document.webkitHidden!=="undefined"){
  hidden="webkithidden";
  visibilityChange="webkitvisibilitychange";
}else if(typeof document.hidden!=="undefined"){
  hidden="hidden";
  visibilityChange="visibilitychange";
}
document.addEventListener(visibilityChange,handlevisibilityChange,false);
function window_onload(){
  videoElement=document.getElementById("videoElement");
  videoElement.addventListener('ended',videoEnded,false);
  videoElement.addventListener('play',videoPlay,false);
  videoElement.addventListener('pause',videoPause,false);
}
function handleVisibilityChange(){
  if(document[hidden]){
    videoElement.pause();
  }else{
    videoElement.play();
  }
}
function play(){
  //播放视频
  videoElement.play();
}
function pause(){
  //暂停播放
  videoElement.pause();
}
function PlayOrPause(){
  if(videoElement.paused){
    videoElement.play();
  }else{
    videoElement.pause();
}
}
function videoEnded(ev){
  videoElement.currentTime=0;
  this.pause();
}
function videoPlay(ev){
  var btnPlay=document.getElementById("btnPlay");
  btnPlay.innerHTML="暂停";
}
function videoPause(ev){
  var btnPlay=document.getElementById("btnPlay");
  btnPlay.innerHTML="播放";
}
其中对应的页面元素HTML为：
<body onload="window_onload()">
<video id="videoElement" src="BigBuck.webm" controls></video><br/>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<body>

二、Fullscreen API：

Fullscreen API作用是将页面整体或页面中某个局部区域设为全屏显示状态。

1.判断支持Fullscreen API：

可以通过DOM对象的根节点对象document.documentElement或某个元素requestFullscreen属性值来判断浏览器是否支持Fullscreen API。代码为：
var docElm=document.documentElement;
if(docElm.mozRequestFullscreen){
  //对firefox的代码
}else if(docElm.webkitRequestFullscreen){
  //对chrome和opera的代码
}else if(docElm.requestFullscreen){
  //对其他浏览器的代码
}
也可以通过DOM对象的根节点对象或某个元素的exitFullscreen属性值或CancelFullscreen属性值来判断浏览器是否支持Fullscreen API。代码为：
if(document.mozCancelFullscreen){
  //对firefox的代码
}else if(document.webkitCancelFullscreen){
  //对chrome和opera的代码
}else if(document.exitFullscreen){
  //对其他浏览器的代码
}

2.设定为全屏显示状态：

可以通过DOM对象的根节点对象document.documentElement或某元素的requestFullscreen方法修改为全屏显示状态。代码为：
var docElm=document.documentElement;
if(docElm.mozRequestFullscreen){
  docElm.mozRequestFullscreen();
}else if(docElm.webkitRequestFullscreen){
  docElm.webkitRequestFullscreen();
}else if(docElm.requestFullscreen){
  docElm.requestFullscreen();
}

3.设定为非全屏状态：

if(document.mozCancelFullscreen){
  document.mozCancelFullscreen();
}else if(document.webkitCancelFullscreen){
  document.webkitCancelFullscreen();
}else if(document.exitFullscreen){
  document.exitFullscreen();
}

4.fullscreenchange事件：

可以通过监听DOM对象或某个元素的fullscreenchange事件并指定事件处理函数来指定当页面或元素变为全屏显示状态或非全屏显示状态时所需执行的处理。代码为：

5.CSS中的相应伪类：

在CSS样式表中，可以使用伪类选择器单独指定处于全屏显示状态的页面或元素的样式。代码为：
html:-moz-full-screen{
  background:red;
}
html:-webkit-full-screen{
  background:red;
}
html:fullscreen{
  background:red;
}

三、鼠标指针锁定API：

允许开发者获取鼠标指针的移动信息，将鼠标事件锁定到单个目标元素上，消除对于鼠标指针在某个方向上可移动距离的限制，同时从屏幕上依次鼠标指针。当应用程序需要控制鼠标指针的移动或旋转某个对象时非常有用。目前，在使用鼠标指针锁定API时需要在锁定目标元素之前首先将目标元素设定为全屏状态。

鼠标指针锁定API中对元素新增一个requestPointerLock方法，通过pointetlockchange事件与pointerlockerror事件来通知脚本程序锁定鼠标指针的请求是否成功。
鼠标指针锁定API同时新增document对象的pointerLockElement属性及exitPointerLock方法，其中pointerLockElement用来访问被锁定的目标元素，exitPointerLock方法用于取消鼠标指针的锁定。
pointerLockElement属性也可以用于判断页面是否存在元素处于被锁定状态，也可以用来访问被锁定的目标元素。代码为：

document.pointerLockElement = document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement;
if(!!document.pointerLockElement){
  //鼠标指针被锁定
}else{
  //鼠标指针未被锁定
}
if(!!document.pointerLockElement==someElement){
  //someElement代表目前被锁定的目标元素
}

元素的exitPointerLock方法可用来消除鼠标指针的锁定，取消成功时触发pointetlockchange事件，取消失败时触发pointerlockerror事件。
当鼠标指针锁定状态改变时，将触发document对象的pointetlockchange事件，该事件中不携带任何数据。
鼠标指针锁定API为鼠标事件扩展了两个属性，分别代表鼠标指针在水平方向上的移动距离与垂直方向上的移动距离。当鼠标指针被锁定后，标准的鼠标事件对象的clientX、clientY、screenX、screenY属性保持不变，就好像鼠标指针没有被移动一样，而movementX与movementY属性将持续提供鼠标指针移动信息。
针对iframe元素，鼠标指针API一次只能锁定一个iframe元素，如果需要锁定另一个iframe元素需要首先取消对当前锁定的iframe元素的锁定。默认情况下，iframe的sandboxed属性将阻止脚本程序将鼠标指针锁定到该iframe元素上。

四、requestAnimationFrame：

HTML5新增window.requestAnimFrame方法，用于更好地来实现动画。

五、Mutation Observer：

用于检测页面变化的新方法。

1.创建MutationObserver对象：

为了检测页面变化首先要创建MutationObserver对象，方法为：
function onchange(mutationRecords,mutationObserver){
alert("检测到DOM变化");
}
var mo=new MutationObserver(onchange);

MutationObserver对象的构造函数使用一个参数，参数值为检测到页面变化时所需执行的函数，该函数又使用两个参数，第一个参数为包含该页面变化时所产生的一系列信息的数组，第二个参数值为被调用的MutationObserver对象实例。

2.使用observe方法：

创建MutationObserver对象后，必须使用该对象的observe方法才能进行检测。代码为：
var div=document.getElementById("div");
var options={childlist:true};
var mo=new MutationObserver(onchange);
mo.observe(div,options);
MutationObserver对象的observe方法使用两个参数，第一个参数为被观察的目标节点，第二个参数为观察时所使用的各种选项。选项列表为：

名称	类型	观察对象
attributes	布尔	是否观察目标节点的所有属性
characterData	布尔	是否观察目标节点的子文字节点
childList	布尔	是否观察目标节点的子节点

上述所有选项的默认值均为false。
在将上述某些选项值设为true时，可以追加使用下列各种选项：

名称	类型	需设为true的项	观察对象
attributesFilter	数组	attributes	用于限定被观察的属性名
attributesOldValue	布尔	attributes	用于指定是否记录修改前的属性
characterDataOldValue	布尔	characterData	用于指定是否记录修改前的文字节点
subtree	布尔	childList	用于指定是否观察目标节点的子孙节点

3.使用示例：

4.停止对节点的观察：

可以使用MutationObserver对象的disconnect方法停止对目标节点的观察。示例：
mo.disconnect();

5.可以使用MutationObserver对象观察到的所有信息：

名称	类型	返回值
attributeName	字符串	被修改的属性值所属的属性名
attributeNamespace	字符串	被修改的属性名所属的命名空间
addedNodes	节点列表	所有被追加的节点
removedNodes	节点列表	所有被移除的节点
previousSibling	节点	被追加或移除节点的前一个节点
nextSibling	节点	被追加或移除节点的后一个节点
target	节点	被修改的节点
type	字符串	基本选项的内容（options选项中的内容）
oldValue	字符串	被修改之前的内容

6.使用MutationObserver对象可能触发的事件：

DOM事件	必须设定的MutationObserver选项值
DOMAttrModified	attributes:true(,attributeOldValue:true)(,attributeFilter:["属性名"])
DOMAttrbuteNameChanged	attributes:true(,attributeOldValue:true)(,attributeFilter:["属性名"])
DOMCharacterDataModified	characterData:true(,characterDataOldValue:true)
DOMNodeInserted	childList:true(,subtree:true)
DOMNodeInsertedIntoDocument	childList:true(,subtree:true)
DOMNodeRemoved	childList:true(,subtree:true)
DOMNodeRemovedFromDocument	childList:true(,subtree:true)
DOMSubtreeModified	childList:true,subtree:true

六、JavaScript Promise：

Promise是一种抽象异步处理，确保一件事做完之后再做另一件事。

1.创建一个Promise对象：

promise.then(function(result){
console.log(result);
},function(err){
console.log(err);
});

2.示例代码：

3.链式调用Promise对象的then方法：

可以通过链式调用Promise对象的then方法一个接一个地运行附加的异步操作。示例：
var promise=new Promise(function(resolve,reject){
  resolve(1);
});
promise.then(function(val){
  console.log(val);
  return val+2;
}).then(function(val){
  console.log(val);
});

4.将异步操作队列化：

也可以通过链式调用Promise对象的then方法来运行一系列异步操作。当从一个then方法的参数只回调函数进行返回时，如果返回一个值，下一个then方法将被立即调用，并且使用该返回值。如果then方法的参数值回调函数返回一个Promise对象，下一个then方法将对其等待，直到这个Promise对象的参数值回调函数中的处理结果确定以后才会被调用。

5.执行并行处理：

浏览器擅长同时执行多个异步处理，如果一个接一个执行会丧失性能，可以使用Promise类的all方法并行执行多个异步处理。使用方法为：
Promise.all(arrayOfPromises).then(function(arrayOfResults){
//回调函数
});
Promise.all方法以一个Promise对象数组作为参数，并创建一个当所有执行结果都已成功时返回肯定结果的Promise对象。在该对象的then方法中可以得到一个结果数组result，该结果数组与传入的Promise对象数组顺序保持一致。

6.race方法：

Promise还提供一个Promise.race方法，同样以一个Promise对象数组作为参数，但是当数组中任何元素返回肯定结果时Promise.race方法立即返回肯定结果，或者当任何元素返回否定结果时立即返回否定结果，即返回第一个肯定或否定结果。

七、Beacon API：

允许开发者在unload事件回调函数中向服务器端发送携带少量数据的异步请求，并不会阻塞unload事件回调函数中的任何代码，不需要用户做出任何等待就可以看见下一页面。

在Beacon API中，为navigator对象提供一个sendBeacon方法，该方法将数据放入一个队列中，当前页面被关闭时将立即发送数据，这个数据发送动作不会减慢页面跳转速度。当数据放入队列成功返回true，否则返回false。使用方法为：

navigator.sendBeacon(url,data);
在sendBeacon方法中，使用两个参数，第一个参数值必须为接收数据的服务器地址，第二个参数为被发送的数据，可以为一个ArrayBufferView对象、一个Blob对象、一个FormData对象或一个字符串。

示例：
window.addEventListener("unload",logData,false);
function logData(){
navigator.sendBeacon("http://localhost:1337","一些Beacon数据");
}

八、WebRTC：

WebRTC API提供一种访问用户客户端本地的摄像头或麦克风设备的能力，与getUserMedia方法紧密相关。包含MediaStream、RTCPeerConnection、RTCDataChannel三个API。在Chrome和Opera浏览器上将RTCPeerConnection命名为webkitRTCPeerConnection，在Firefox浏览器上则命名为mozRTCPeerConnection。不过因为涉及个人隐私信息问题，很多浏览器只在HTTPS环境下才支持此功能。

1.使用getUserMedia方法访问本地设备：

通过getUserMedia方法，可以不依靠插件而直接访问客户端本地的摄像头设备和麦克风设备。

1）使用前首先要进行浏览器检测：

function hasGetUserMedia(){
return !!(navigator.getUserMedia || navigater.webkitGetUserMedia || navigator.mozGetUserMedia);
}
if(hasGetUserMedia()){
alert("你使用的浏览器支持getUserMedia方法");
}

2）获取对视频输入设备或音频输入设备的访问权限：

首先需要使用getUserMedia方法获取对这些设备的访问权限。
navigator.getUserMedia({video:true,audio:false},function(stream){
video.src=window.URL.createObjectURL(stream);
},function(err){
console.log(err);
]);
在getUserMedia方法中使用三个参数，其中第1个参数是一个约束对象，具有一个video属性和一个audio属性，使用boolean值表示捕捉或不捕捉相关信息，相应的浏览器会弹出提示信息让用户确认是否允许。
getUserMedia方法的第2个参数为自定义的访问本地用户设备成功时的回调函数，该回调函数具有一个参数，参数值MediaStream对象代表同步媒体数据流，当浏览器执行getUserMedia方法时将自动创建该对象。每个MediaStream对象都拥有一个字符串类型的ID属性，以标识每一个同步媒体数据流。该对象的getAudioTracks()方法或getVideoTracks()方法将返回一个MediaStreamTrack对象数组，其中的每一个对象代表一个视频轨道或一个音频轨道，每一个MediaStreamTrack对象均具有一个字符串类型的kind属性值，以标识轨道种类，例如video或audio。每一个MediaStreamTrack对象均具有一个字符串类型的label属性值，以标识音频通道或视频通道，例如USB2.0 PC CAMERA(1908：2310)。
getUserMedia方法中的第3个参数值为自定义的访问本地设备失败时所执行的回调函数，还函数具有一个参数，参数值为error对象，代表浏览器抛出的错误对象。

可以结合video元素，使用URL.createobjectURL()方法将一个MediaStream对象转换为一个Blob URL，以便将其设置为一个video元素的属性。在支持WebRTC的浏览器中，可以将video元素的src属性值直接设置为数据流。
示例：
<video id="myVideo" width="400" height="300" autoplay></video>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video=document.getElementById('myVideo');
navigator.getUserMedia({video:true,audio:false},function(stream){
video.src=window.URL.createObjectURL(stream);
},function(err){
console.log(err);
]);
</script>
代码中，为video元素使用autoplay属性，否则video元素将停留在所获取的第1帧画面处。

3）实现拍照功能：

在Canvas API中，可以使用图形上下文对象的drawImage方法将video元素中的某个帧画面输出到canvas元素中。所以，可以将捕捉到的用户摄像头中的图像信息通过video元素输出到canvas元素中，即实现拍照功能。代码为：
<video id="myVideo" width="400" height="300" autoplay></video>
<img src="" id="img"></img>
<canvas width="400" height="300" style="display:none" id="canvas"></canvas>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.URL=window.URL||window.webkitURL;
var video=document.getElementById('myVideo');
video.addEventListener('click',snapshot,false);
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var localMediaStream=null;
navigator.getUserMedia({video:true,audio:false},function(stream){
  video.src=window.URL.createObjectURL(stream);
  localMediaStream=stream;
},function(err){
  console.log(err);
]);
function snapshot(){
  if(localMediaStream){
    ctx.drawImage(video,0,0);
    document.getElementById('img').src=canvas.toDataUrl('image/png');
  }
}
</script>
用鼠标单击video元素，页面中的img元素中将显示鼠标单击video元素中显示的影像。

4）与CSS3结合使用：

可以通过video元素使用CSS3代码的方法来对实时捕捉到的视频信息应用各种样式。
style="transform:scaleY(-1);" --垂直翻转视频图像
style="transform:scaleX(0.5);" --横向缩小1/2
style="-webkit-filter:sepia(80);" --使用sepia滤镜（chrome浏览器）
甚至可以在chrome浏览器中可以对视频图像应用旋转动画效果，代码为：
#myVideo{
  position:absolute;
  -webkit-animation-duration:2s;
  -webkit-animation-interation-count:infinite;
  -webkit-animation-time-function:linear;
  -webkit-animation-name:myVideoAni;
}
@-webkit--keyframes myVideoAni{
  0%{transform:rotate(0deg);}
  99%,100%{transform:rotate(360deg);}
}

通过在服务器端的设置和程序，还可以建立WebRTC通信，即将实时取得的视频、音频等数据流在浏览器之间进行通信，这就是RTCPeerConnection。这种通信使用UDP/IP，端口号自动分配，范围49152~65535之间。如果配合架设的服务器，可以在广域网内实现WebRTC通信，可实现多人通信。还有一种RTCDataChannel通信，可以实现浏览器之间的直接数据传输，但也需要服务器端的支持。

九、FileReader API：

可以允许开发者方便地使用JavaScript实现对磁盘文件的读写和上传。FileReader API提供了很多异步方法来读取File对象和Blod对象，当程序读取文件时不会发生阻塞，包括三种方法：

1）读取用户在<input>选择文件后返回的FileList对象：
2）使用拖放API方式自动生成的DataTransfer对象：
3）获取在HTML文档中的canvas上执行的mozGetAsFile()方法后返回的对象：

1. FileReader API的方法有：

1）readAsText()方法：
此方法用来读取文本文件，包括2个参数，第1个参数为用来读取的File对象或Blod对象；第2个参数为可选，用来指定文件的编码，如果不指定则使用UTF-8。
因为此为异步方法，需要设置在文件加载完成时的事件监听器，当调用onload事件时可以访问读取的FileReader实例的result属性以获取文件内容。示例：
var reader=new FileReader();
reader.onload=function(e){
var text=reader.result;
}
reader.readAsText(file,encoding);

2）readAsDataURL()方法：
此方法用来接收File或Blod对象，并生成data URL，这是一个Base64编码的文件数据字符串，可用来设为图片的src属性。示例：
var reader=new FileReader();
reader.onload=function(e){
var dataURL=reader.result;
}
reader.readAsDataURL(file);

3）readAsBinaryString()方法：
此方法可以读取任何类型的文件，并从文件返回原始二进制数据，配合使用XMLHttpRequest.sendAsBinary()方法，可以使用JavaScript将任何文件上传到服务器。示例：
var reader=new FileReader();
reader.onload=function(e){
var rawData=reader.result;
}
reader.readAsBinaryString(file);

4）readAsArrayBuffer()方法：
此方法读取一个File或Blod对象，产生ArrayBuffer对象，这是一个固定长度的二进制数据缓冲，一般用于处理文件，如将JPEG图像转换为PNG。示例：
var reader=new FileReader();
reader.onload=function(e){
var arrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);

5）abort()方法：
此方法可以终止任何操作，可在读取大文件时使用。示例：
reader.abort();

2. FileReader的常用属性：

属性名	类型	描述
error	DOMError	当读取文件时发生错误
readyState	Unsigned short	表明FileReader对象的当前状态，值为State constants中的一个
result	jsval	读取到的文件内容，只在读取完成后有效，格式对应方法

属性状态的常量State constants：

常量名	值	描述
EMPTY	0	还没有加载任何数据
LOADING	1	数据正在被加载
DONE	2	已完成全部的读取请求

3. 应用示例：

1）文本读取案例：
HTML代码中加入文本选择按钮：<input type="file" id="fileinput">
还需要加入用来展示文本文件内容区域：<pre id="fileDisplayArea">text</pre>
javascript代码为：
window.onload=function(){
  var fileInput=document.getElementById('fileInput');
  var fileDisplayArea=document.getElementById('fileDisplayArea');
  fileInput.addEventListener('change',function(e){
    var file=fileInput.files[0];
    var textType=/text.*/;
    if(file.type.match(textType)){
      var reader=new FileReader();
      reader.onload=function(e){
        fileDisplayArea.innerText=reader.result;
      reader.readAsText(file);
      };}else{
        fileDisplayArea.innerText='不支持此文件格式';
    }
  });
};

2）图像读取案例：
HTML代码中加入文本选择按钮：<input type="file" id="fileinput">
还需要加入用来展示文本文件内容区域：<div id="fileDisplayArea"></div>
javascript代码为：
window.onload=function(){
  var fileInput=document.getElementById('fileInput');
  var fileDisplayArea=document.getElementById('fileDisplayArea');
  fileInput.addEventListener('change',function(e){
    var file=fileInput.files[0];
    var imgType=/image.*/;
    if(file.type.match(imgType)){
      var reader=new FileReader();
      reader.onload=function(e){
        fileDisplayArea.innerHTML="";
        var img=new Image();
        img.src=reader.result;
        fileDisplayArea.appendChild(img);
      }else{
        fileDisplayArea.innerText='文件类型不支持';
    }
  });
};

十、拖放 API：

虽然可以使用鼠标事件配合DOM实现拖放，但HTML5提供的API实现效率更高。当用户开始拖放操作时，拖动的起始位置称为拖动源，起始动作应为单击和拖动鼠标指针；从拖动鼠标开始到释放鼠标时指针最终到达区域称为放置目标，在用户释放鼠标前可能会经过很多放置目标。

1. 拖动API的事件：

事件名	说明
dragstart	用户主动拖动某个元素时，开始触发此事件
drag	被拖动的元素在拖动过程中持续触发的事件
dragenter	被拖动元素进入新元素的区域，会触发该元素的gragenter事件
dragleave	被拖动元素离开目标元素时触发，应在目标元素区域监听该事件
dragover	被拖动元素停留在目标元素之中时持续触发，应在目标元素区域监听该事件
drop	被拖动元素或从文件系统选中的文件，拖放的文件不全时触发此事件
dragend	网页元素拖动结束时触发该事件

2. 数据传输对象datatransfer：
处理拖动事件时，需要使用datatransfer，其负责发布拖动的数据存储信息。datatransfer包含的属性有：

属性	说明
files	该属性返回和放置相关的所有文件
types	该属性使用数组的形式返回当前注册的格式
effectAllowed	通知浏览器当前可被用户选用的操作，如果只设置copy，则只允许执行copy工作
dropEffect	拖放的操作类型，决定了浏览器如何显示鼠标形状，可能值包括copy、move、link和none
items	该属性返回所有项与相关格式的所有文件

datatransfer包含的方法有：

方法	说明
setData(format,data)	在dragstart事件调用此方法，用于在datatransfer对象上存储数据，参数format用来指定存储的数据类型，如text、url、text/html等
getData(format)	从datatransfer对象取出数据
setDragImage(element,x,y)	使用存在的图像元素作为拖动对象
addElement(element)	调用此函数需要提供一个页面元素作为参考，同时使用此参数作为拖放反馈图像
clearData()	不带参数表示清除所以已注册数据，带参数则清除指定的注册数据

使用时，为了标记特定元素可以被拖动，需要给元素加上属性。示例：
<div draggable="true">可拖放的盒子</div>

3. 应用示例：

1）拖动列表：
HTML代码中加入拖动列表：
<div class="container">
  <ul class="list-group commontest" id="drag-elements">
    <li class="list-group-item" draggable="true">段落1</li>
    <li class="list-group-item" draggable="true">段落2</li>
    <li class="list-group-item" draggable="true">段落3</li>
  </ul>
</div>
还需要加入拖动目标区域：   <ul class="commontest" id="drop-target"></ul>
javascript代码为：
var target=document.querySelector('#drop-target')
var dragElements=document.querySelectorAll('#drag-elements li')
var elementDragged=null
for(var i=0;i<dragElements.length;i++){
  dragElements[i].addEventListener('dragstart',function(e){
    e.dataTransfer.setData('text',this.innerHTML);
    elementDragged=true;
  })
  dragElements[i].addEventListener('dragend',function(e){
    elementDragged=null;
  })
}
target.addEventListener('dragover',function(e){
    e.preventDefault();
    e.dataTransfer.dropEffet='move';
    return false;
})

2）拖动文件：
HTML代码中加入容器：
<div class="alert alert-warning" role="alert">拖放文件到下面区域</div>
<div id="target" title="拖动文件到这里"><div id="content"></div></div>
javascript代码为：
var target=document.querySelector('#target');
var contentDiv=document.querySelector('#content');
target.addEventListener('drop',function(e){
  e.preventDefault();
  e.stopPropagation();
  var fileList=e.dataTransfer.files;
  if(fileList.length){
    var file=fileList[0];
    var reader=new FileReader();
    reader.onloadend=function(){
      if(e.target.readyState==FileReader.DONE){
        var content=reader.result;
        contentDiv.innerHTML='File: '+file.name+'\n\n'+content;
      }
    };
    reader.readAsBinaryString(file);
  }
})

赵工的个人空间

（专业技术部分）（转网页计算）（转业余爱好部分）