当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

javascript学习笔记十

发表于: 2012-06-04   作者:bsr1983   来源:转载   浏览次数:
摘要:   第16章 HTML5脚本编程 16.1 跨文档消息传递        跨文档消息传送(cross-document messaging),有时候简称XDM,指的是在来自不同域的页面间传递消息。 16.2 原生拖放 16.2.1 拖放事件      &nbs

 

16 HTML5脚本编程

16.1 跨文档消息传递

       跨文档消息传送(cross-document messaging),有时候简称XDM,指的是在来自不同域的页面间传递消息。

16.2 原生拖放

16.2.1 拖放事件

       拖动某元素时,将一次触发下列事件:

       1dragstart

       2drag

       3dragend

       上述三个事件的目标都是被拖动的元素。

       当某个元素被拖动到一个有效的放置目标上时,下列事件会依次发生:

       1dragenter

       2dragover

       3dragleavedrop

162.2 自定义放置目标

       可以把任何元素变成有效的放置目标,方法是重写dragenterdragover事件的默认行为。

16.2.3 dataTransfer对象

       为了在拖放操作时实现数据交换,IE5引入了dataTransfer对象,它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放的事件处理程序中访问dataTransfer对象。

16.2.4 dropEffecteffectAllowed

       通过dataTransfer对象还可以确定被拖动的元素以及作为放置目标的元素能够接收什么操作。通过dataTransfer对象的两个属性dropEffecteffectAllowed来确定。

       通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。要使用dropEffect属性,必须在ondragenter事件处理程序中针对放置目标来设置它。

       dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect。必须在ondragstart事件处理程序中设置effectAllowed

16.2.5 可拖动

       默认情况下,图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。

       HTML5为所有HTML元素规定了一个dragable属性,表示元素是否可以拖动。

16.2.6 其他成员

       HTML5规范规定dataTransfer对象还应该包含下列方法和属性:

1addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象),不会影响拖动操作时页面元素的外观。

2clearData(format):清除以特定格式保存的数据。

3setDragImage(element,x,y):指定一幅图像,当拖动发生时,显示在光标下方。

4types:当前保存的数据类型。

16.3 媒体元素

16.3.1 属性

       <video><audio>元素都提供了完善的JavaScript接口。

属性

数据类型

说明

autoplay

布尔值

取得或设置autoplay标志

buffered

时间范围

表示已下载的缓冲的时间范围的对象

bufferedBytes

字节范围

表示已下载的缓冲的字节范围的对象

bufferedingRate

整数

下载过程中每秒钟平均接收到的位数

bufferingThrottled

布尔值

表示浏览器是否对缓冲进行了节流

controls

布尔值

取得或设置controls属性,用于显示或隐藏浏览器内置的控件

currentLoop

整数

媒体文件已经循环的次数

currentSrc

字符串

当前播放的媒体文件的URL

currentTime

浮点数

已经播放的秒数

defaultPlaybackRate

浮点数

取得或设置默认的播放速度。默认值为1.0

duration

浮点数

媒体的总播放时间

ended

布尔值

表示媒体文件是否播放完成

loop

布尔值

取得或设置媒体文件在播放完成后是否再从头开始播放

muted

布尔值

取得或设置媒体文件是否静音

networkState

整数

表示当前媒体的网络连接状态:0表示空,1表示正在加载,2表示正在加载元数据,3表示已经加载了第一帧,4表示加载完成

paused

布尔值

表示播放器是否暂停

playbackRate

浮点数

取得或设置当前的播放速度。用户可以改变这个值,让媒体播放速度变快或变慢,这与defaultPlaybackRate只能由开发人员修改不同

played

时间范围

到目前为止已经播放的时间范围

readyState

整数

表示媒体是否已经就绪(可以播放了)。0表示数据不可用,1表示可以显示当前帧,2表示可以开始播放,3表示可以从头到尾播放

seekable

事件范围

可以搜索的事件范围

seeking

布尔值

表示播放器是否正移动到媒体文件中的新位置

src

字符串

媒体文件的来源。任何时候都可以重写这个属性

start

浮点数

取得或设置媒体文件中开始播放的位置,以秒表示

totalBytes

整数

当前资源所需的总字节数

videoHeight

整数

返回视频(不一定是元素)的高度,只适用于<video>

videoWidth

整数

返回视频(不一定是元素)的宽度度,只适用于<video>

volume

浮点数

取得或设置当前的音量,值为0.01.0

 

16.3.2 事件

事件

触发时机

abort

下载中断

canplay

可以播放时;readyState的值为2

canplaythrough

播放可继续,而且应该不会中断;readyState的值为3

canplayshowcurrentframe

当前帧已下载完成;readyState的值为1

dataunavailable

因为没有数据而不能播放;readyState值为0

durationchange

duration属性的值改变

emptied

网络连接关闭

empty

发送错误阻止了媒体下载

ended

媒体已播放到末尾,播放停止

error

下载期间发生了网络错误

load

所有媒体已加载完成。这个事件可能会被废弃,建议使用canplaythrough

loadeddata

媒体的第一帧已加载完成

loadedmetadata

媒体的元数据已加载完成

loadstart

下载已开始

pause

播放已暂停

play

媒体已接收到指令开始播放

playing

媒体已实际开始播放

progress

正在下载

ratechange

播放媒体的速度改变

seeked

搜索结束

seeking

正移动到新位置

 

 

事件

触发时机

stalled

浏览器尝试下载,但未接收到数据

timeupdate

currentTime被以不合理或意外的方式更新

valumechange

volume属性值或muted属性值已改变

waiting

播放暂停,等待下载更多数据

16.3.3 自定义媒体播放器

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

这两个媒体元素都有一个canPlayType()方法,该方法接收一种格式/编码器字符串,返回”probably””maybe”””(空字符串)。空字符串是假值。

16.3.5 Audio类型

       <audio>元素还有一个原生的JavaScript构造函数Audio,可以在任何时候播放音频。

16.4 历史状态管理

       HTML5通过更新history对象为管理历史状态提供了方便。

16.5 小结

javascript学习笔记十

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
spring对AOP的支持 spring采用对AOP的支持(采用Annotation @...,或者采用配置文件的方式) 导入包asp
1.什么是JavaSript HTML只是描述页面长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断
  目前所见的,在普通的JavaScript应用中和绝大多数人一样使用的是全局的方式。大概是因为JavaScr
玩了好几天,玩的也好累了,天天打dota,打cf,和弟弟两个人开黑,然后老是被杀,弄得英雄1200的初
前言 DOM介绍 1、DOM基本知识 2、DOM操作 3、DOM类型 前言 DOM (文档对象模型)是对 HTML 和 XML 文
一.call方法: 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即
JavaScript基础: JavaScript 基础认识 JavaScript 对象定义 JavaScript 继承 JavaScript 事件 JavaS
记录以下网址的javascript core crash章节http://courses.coreservlets.com/Course-Materials/ajax-b
记录以下网址的javascript core crash章节http://courses.coreservlets.com/Course-Materials/ajax-b
学习参拷:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 第一节:基础 1.1:变量
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号