html5 自定义事件监听,原生HTML5自定义事件

HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。

下面的ImgsLoader工具类，可以实现多图片预加载。

然后将图片路径放到一个数组imgs中，然后调用load(imgs)方法即可，如

var imgs = [

"images/dunny.png",

"images/fatcap.png",

"images/piggy.png"

];

var loader = new ImgsLoader();

loader.on("EVENT_COMPLETE", eventHandler);

loader.on("EVENT_PROGRESS", eventHandler);

loader.on("EVENT_ERROR", eventHandler);

loader.load(imgs);

工具类loader有三个监听事件，分别是加载完成，加载进度和加载失败监听，eventHandler是监听回调函数，回调中会包含一个回调对象，如

function eventHandler(resp) {}

resp即是回调对象，包含了type属性和target属性。通过获取这两个属性值即可知道回调的事件和结果。

ImgsLoader.js的源码如下：

function ImgsLoader() {

//基本参数

this.images = new Object(); // 返回的数据对象

this.imageCount = 0; // 已加载计数器

this.imageTotal = 0; // 需加载总量

//事件名称及事件容器

this.EVENT_COMPLETE = "EVENT_COMPLETE";

this.EVENT_PROGRESS = "EVENT_PROGRESS";

this.EVENT_ERROR = "EVENT_ERROR";

this.eventTarget = new Object();

}

ImgsLoader.prototype.load = function(imgList) {

this.imageTotal = imgList.length;

for(var i = 0; i < this.imageTotal; i++) {

var url = imgList[i];

var img = new Image();

this.images[url] = img;

img.onload = this.SingleIMGLoadedHandle.bind(this);

img.onerror = this.SingleIMGErrorHandle.bind(this);

img.src = url;

}

}

ImgsLoader.prototype.on = function(ename, callback) {

//存储需要监听的事件名称和回调函数

this.eventTarget[ename] = callback;

};

ImgsLoader.prototype.trigger = function(event, paramet) {

//事件触发

for(var i in this.eventTarget) {

var ename = i;

var callback = this.eventTarget[i];

if(ename == event) {

callback(paramet);

break;

}

}

};

ImgsLoader.prototype.SingleIMGLoadedHandle = function(evt) {

this.imageCount++;

this.response = {};

this.response.target = {};

if(this.imageCount >= this.imageTotal) {

// 抛出 100% 进度事件

this.response.type = this.EVENT_PROGRESS;

this.response.target.msg = "加载中！";

this.response.target.data = 1;

this.trigger(this.EVENT_PROGRESS, this.response);

// 抛出加载成功事件

this.response.type = this.EVENT_COMPLETE;

this.response.target.msg = "加载成功！";

this.response.target.data = this.images;

this.trigger(this.EVENT_COMPLETE, this.response);

} else {

this.response.type = this.EVENT_PROGRESS;

this.response.target.msg = "加载中！";

this.response.target.data = this.imageCount / this.imageTotal;

this.trigger(this.EVENT_PROGRESS, this.response);

}

};

ImgsLoader.prototype.SingleIMGErrorHandle = function(evt) {

// 抛出加载失败事件

this.response = {};

this.response.target = {};

this.response.type = this.EVENT_ERROR;

this.response.target.msg = "加载失败！";

this.response.target.data = evt.target.src;

this.trigger(this.EVENT_ERROR, this.response);

};

调用测试的完整源码如下：

运行结果如图所示：