javascript高级程序设计---Event对象三
进度事件
进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程、<img>、<audio>、<video>、<style>、<link>加载外部资源的过程。下载和上传都会发生进度事件。
进度事件有以下几种。
abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。
error事件:由于错误导致资源无法加载时触发。
load事件:进度成功结束时触发。
loadstart事件:进度开始时触发。
loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。
progress事件:当操作处于进度之中,由传输的数据块不断触发。
timeout事件:进度超过限时触发。
image.addEventListener('load', function(event) {
image.classList.add('finished');
}); image.addEventListener('error', function(event) {
image.style.display = 'none';
});
上面代码在图片元素加载完成后,为图片元素的class属性添加一个值“finished”。如果加载失败,就把图片元素的样式设置为不显示。
有时候,图片加载会在脚本运行之前就完成,尤其是当脚本放置在网页底部的时候,因此有可能使得load和error事件的监听函数根本不会被执行。所以,比较可靠的方式,是用complete属性先判断一下是否加载完成。
function loaded() {
// code after image loaded
} if (image.complete) {
loaded();
} else {
image.addEventListener('load', loaded);
}
由于DOM没有提供像complete属性那样的,判断是否发生加载错误的属性,所以error事件的监听函数最好放在img元素的HTML属性中,这样才能保证发生加载错误时百分之百会执行。
<img src="/wrong/url" onerror="this.style.display='none';" />
error事件有一个特殊的性质,就是不会冒泡。这样的设计是正确的,防止引发父元素的error事件监听函数。
进度事件使用ProgressEvent对象表示。ProgressEvent实例有以下属性。
lengthComputable:返回一个布尔值,表示当前进度是否具有可计算的长度。如果为false,就表示当前进度无法测量。
total:返回一个数值,表示当前进度的总长度。如果是通过HTTP下载某个资源,表示内容本身的长度,不含HTTP头部的长度。如果lengthComputable属性为false,则total属性就无法取得正确的值。
loaded:返回一个数值,表示当前进度已经完成的数量。该属性除以total属性,就可以得到目前进度的百分比。
var xhr = new XMLHttpRequest(); xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false); xhr.open(); function updateProgress (e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
} else {
console.log('不能计算进度');
}
} function transferComplete(e) {
console.log('传输结束');
} function transferFailed(evt) {
console.log('传输过程中发生错误');
} function transferCanceled(evt) {
console.log('用户取消了传输');
}
loadend事件的监听函数,可以用来取代abort事件/load事件/error事件的监听函数。
req.addEventListener("loadend", loadEnd, false); function loadEnd(e) {
console.log('传输结束,成功失败未知');
}
loadend事件本身不提供关于进度结束的原因,但可以用它来做所有进度结束场景都需要做的一些操作。
另外,上面是下载过程的进度事件,还存在上传过程的进度事件。这时所有监听函数都要放在XMLHttpRequest.upload对象上面。
var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", updateProgress, false);
xhr.upload.addEventListener("load", transferComplete, false);
xhr.upload.addEventListener("error", transferFailed, false);
xhr.upload.addEventListener("abort", transferCanceled, false); xhr.open();
浏览器提供一个ProgressEvent构造函数,用来生成进度事件的实例。
progressEvent = new ProgressEvent(type, {
lengthComputable: aBooleanValue,
loaded: aNumber,
total: aNumber
});
上面代码中,ProgressEvent构造函数的第一个参数是事件类型(字符串),第二个参数是配置对象,用来指定lengthComputable属性(默认值为false)、loaded属性(默认值为0)、total属性(默认值为0)。
拖拉事件
拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。
拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。
<div draggable="true">
此区域可拖拉
</div>
0
javascript高级程序设计---Event对象三的更多相关文章
- javascript高级程序设计---Event对象
事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...
- javascript高级程序设计---Event对象二
鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
- JavaScript高级程序设计(第三版)学习,第一次总结
Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...
- 《JAVASCRIPT高级程序设计》第三章
<JAVASCRIPT高级程序设计>第三章主要讲述了这门语言的基础概念,内容多而浅,通过思维导图可以帮助我们很好的理清脉络. js函数使用function关键字来声明,以下是一个简单的例子 ...
- 赠书《JavaScript高级程序设计(第三版)》5本
本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...
- JavaScript高级程序设计(第三版)学习笔记20、21、23章
第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...
- 《javascript高级程序设计》笔记三
第三章 基本概念 任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScript高级程序设计> ...
- JavaScript高级程序设计(第三版)学习笔记13、14章
第13章,事件 事件冒泡 IE的事件叫做事件冒泡:由具体到不具体 <!DOCTYPE html> <html> <head> <title>E ...
- JavaScript高级程序设计(第三版)学习笔记22、24、25章
第22章,高级技巧 高级函数 安全的类型检测 typeof会出现无法预知的行为 instanceof在多个全局作用域中并不能正确工作 调用Object原生的toString方法,会返回[Object ...
随机推荐
- 11个强大的Visual Studio调试小技巧
简介 调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 这篇文章总 ...
- JavaWeb学习总结-01 JavaWeb开发入门
一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...
- 捉襟见肘之gestureRecognizer:shouldBeRequiredToFailByGestureRecognizer
-- :::60b] *** -[ZFModalTransitionAnimator gestureRecognizer:shouldBeRequiredToFailByGestureRecogniz ...
- [USACO2009 NOV GOLD]奶牛的图片
校内题,不给传送门了. 以前做完NOIp2013的火柴排队那道题后,当时很担心NOIp会出那种题,因为贪心的规则能不能看出来真的要看运气.但是这类题做多了后发现其实那道题的规则其实是很多题都已经用到了 ...
- python运维开发坎坷之路-01
前言 2014年9月,新疆乌鲁木齐,在51CTO学院看着alex老师的python教学视频,不得不说这是我第一次接触python这门高级语言,从最开始的一无所知到现在能够用python写脚本,再到未来 ...
- excel2013添加坐标轴名称label
图画好了,x.y轴没有名称,怎么办那 点击左上角有个---添加图标元素----里面有轴标题应该就是
- sql 编写横竖表转换
将横表转为竖表,基本思想是: 1)将横表的多条数据,"压"成一条.相当于将这么多条分组,每组"压"成一条数据.利用group by 2) 再对竖表中的列,由特定 ...
- SQL Server 2012 学习笔记2
1. 新建数据库 可以在对应目录下右键新建数据库,也可以用程序添加: 先打开程序编辑对话框"New Query" create database Library 2. 添加表格 可 ...
- 使用Newtonsoft JsonConvert反序列化Json数据到DataTable
//JsonStr为Json字符串 JArray array = JsonConvert.DeserializeObject(JsonStr) as JArray;//反序列化为数组 ) { Stri ...
- dedecms笔记
截取字符串 方法一: [field:title function="cn_substr(@me,10)"/] 方法二: {dede:arclist typeid=’9′ title ...