JavaScript高级程序设计(反刍)14

第16章：

跨文档消息传送，简称为XDM，核心是使用postMessage( )方法，接收两个参数：消息，消息接收方来自哪个域的字符串，第二个参数主要是为了保障传输的安全性。

拖放事件：
首先启用的是被拖放元素身上的事件，依次为: dragstart、drag、dragend，触发的顺序也是如此。三种方式具体表现在标签身上就是ondragstart( )，ondrag( )，ondragend( )，三种方法可传输event属性，表示当前的值。

function dragstart() {
	console.log("开始事件");
}
function drag(ev){
	ev.dataTransfer.setData("Text", ev.target.id);
	console.log("中间事件");
}

function dragend(){
	console.log("结束事件");
}

这里率先触发dragstart事件，随后触发stag事件，并且在拖拽的过程中会持续触发此事件，最后松开鼠标触发dragend事件

当元素被放置到一个有效的放置目标的时候，该目标会触发dragenter、dragover、dragleave或drop事件，触发顺序也是如此。这里最后的目标如果是被拖出放置目标，则触发dragleave，如果放在了正确的位置触发drop事件。
同理这里拖拽放置的过程中，首先调用的是dragenter事件，拖拽过程中持续调用dragover事件，且这时候的drag事件也在持续调用，最后放置到位置调用drop事件。

使用js将不能放置的位置转变为可放置的位置：

var droptarget = document.getElementById("div1");
EventUtil.addHandler(droptarget, "dragover", function(){
	EventUtil.perventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter", function(){
	EventUtil.perventDefault(event);
});

使用dataTransfer对象实现拖拽过程中传输值，该对象主要存在两个方法getData( )和setData( )，其中getData是为了获取setData保存的数据。

event.dataTransfer.setData("text", "sonme text");
var text = event.dataTransfer.getData("text");

event.dataTransfer.setData("URL", "www.baidu/com");
var url = event.dataTransfer.getData("URL");

HTML5标签中存在draggable属性，设置是否可拖动，图像和链接默认设置为true，但是其他被默认为false

HTML5嵌入视频和音频加入了新的标签video和audio，使用方法和其他标签一致。标签存在poster属性指定音频加载中显示的图像，存在controls属性指定音频是否显示控件，也就是暂停开始等。
因为各个浏览器可能支持的格式不相同，所以这里使用source标签设置多个格式的视频。
两种媒体中存在大量的视频音频标签和事件，相当具体的实现了很多操作，所以这里可以直接获取操作。