JavaScript事件中进度事件教程

很多学习JavaScript的新手对事件了解的不是很多，今天小编为大家分享一个JavaScript事件中进度事件教程。

1、进度事件的种类

进度事件用来描述资源加载的进度，主要由AJAX请求、<img>、<audio>、<video>、<style>、等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。

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';

});

上面代码在图片元素加载完成后，为图片元素添加一个finished的Class。如果加载失败，就把图片元素的样式设置为不显示。

有时候，图片加载会在脚本运行之前就完成，尤其是当脚本放置在网页底部的时候，因此有可能load和error事件的监听函数根本不会执行。所以，比较可靠的方式，是用complete属性先判断一下是否加载完成。

functionloaded(){

//…

}

if(image.complete){

loaded();

}else{

image.addEventListener(‘load',loaded);

}

由于DOM的元素节点没有提供是否加载错误的属性，所以error事件的监听函数最好放在元素的HTML代码中，这样才能保证发生加载错误时百分之百会执行。

loadend事件的监听函数，可以用来取代abort事件、load事件、error事件的监听函数，因为它总是在这些事件之后发生。

req.addEventListener(‘loadend',loadEnd,false);

functionloadEnd(e){

console.log(‘传输结束，成功失败未知');

}

loadend事件本身不提供关于进度结束的原因，但可以用它来做所有加载结束场景都需要做的一些操作。

另外，error事件有一个特殊的性质，就是不会冒泡。所以，子元素的error事件，不会触发父元素的error事件监听函数。

2、ProgressEvent接口

ProgressEvent接口主要用来描述外部资源加载的进度，比如AJAX加载、、