JS高级程序设计16-HTML5脚本编程
-
跨文档消息传递480 原生拖放481 拖放事件 //拖拽元素时，依次触发三个事件： dragstart drag dragend //当元素被拖动到一个有效的放置目标上时，依次触发三个事件： dragenter dragover dragleave/drop 自定义放置目标 //将一个元素变为有效的放置目标 var droptarget=document.getElementById("droptarget"); EventUtil.addHandler(droptarget,"dragover",function(event){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"dragenter",function(event){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"drop",function(event){ //针对火狐 EventUtil.preventDefault(event); }); dataTransfer对象 dataTransfer对象是拖放事件的属性，所以只能在拖放事件处理程序中访问它 dataTransfer对象有两个主要方法(在drop事件处理程序中)：getData()和setData() //设置和接受文本数据 event.dataTransfer.setData("text","some text"); var text=event.dataTransfer.gatData("Text"); //设置和接受URL event.dataTransfer.setData("URL","http://www.wrox.com/"); var text=event.dataTransfer.gatData("url")||event.dataTransfer.gatData("text/uri-list"); dropEffect与effectAllowed dropEffect与effectAllowed是dataTransfer对象的两个属性 //dropEffect属性（在ondragenter事件处理程序中设置）可以知道被拖动的元素能够执行哪种放置行为： "none"--不能把拖动的元素放在这里（这是除文本框之外所有元素的默认值） "move"--应该把拖动的元素移动到放置目标 "copy"--应该把拖动的元素复制到放置目标 "link"--表示放置目标会打开拖动的元素（拖动的元素必须是一个链接，有URL） //dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性（在ondragstart事件处理程序中设置）表示允许拖动元素的哪种dropEffect: "uninitialized"--没有给被拖动的元素设置任何放置行为 "none"--被拖动的元素不能有任何行为 "copy"--只允许“copy”的dropEffect "link"--只允许“link”的dropEffect "move"--只允许“move”的dropEffect "copyLink"--允许“copy”和"link"的dropEffect "copyMove"--允许“copy”和"move"的dropEffect "linkMove"--允许“link”和"move"的dropEffect "all"--允许任意dropEffect 可拖动 //draggable属性 draggable属性表示元素是否可以拖动（默认情况下，图像、链接和文本是可以拖动的） <img src="smile.gif" draggable="false" alt="Smiley face"> //使图像不可拖动 <div draggable="true"></div> //使这个元素可以拖动 其他成员 //dataTransfer对象的其他属性和方法： addElement(element)--为拖动操作添加一个元素（只添加数据，不影响页面）； clearData(format)--清楚以特定格式保存的数据； setDragTmage(element,x,y)--指定一副图像（元素），当拖动发生时，显示在光标下方； types--当前保存的数据类型。这是一个类似数组的集合，以"text"这样的字符串形式保存着数据类型； 媒体元素486 有video和audio两种媒体元素 video和audio的属性（487） video和audio的事件（488） 自定义媒体播放器（488） 检测编解码的支持情况（489） Audio类型 <audio>元素还有一个原生的JS构造函数Audio,可以在任何时候播放音频 var audio=new Audio("sound.mp3"); EventUtil.addHandler(audio,"canplaythrough",function(event){ audio.play(); }); 历史状态管理491 解决用户难在不同状态之间切换的问题 当hashchange事件发生的时候，使用history.pushState()方法； history.pushState(状态对象，新状态的标题，可选的相对URL) //新的状态信息加入到历史状态栈，浏览器地址栏也会变成新的相对URL； 点击“后退”按钮，会触发window对象的popstate事件，对应的事件对象有一个state属性，包含着当初以第一个参数传递给pushState()的状态对象 更新当前状态，可以调用replaceState()，传入的参数与pushState()的前两个参数相同，会重写当前状态： history.replaceState({name:"Greg"},"Gregs page");
