js自定义事件

最新推荐文章于 2023-11-08 10:39:59 发布

黄泽平

最新推荐文章于 2023-11-08 10:39:59 发布

阅读量1.6k

点赞数

分类专栏：前端集合文章标签：图片预加载 js自定义事件

本文链接：https://blog.csdn.net/zeping891103/article/details/72649718

版权

前端集合专栏收录该内容

153 篇文章 10 订阅

订阅专栏

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

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

<script src="ImgsLoader.js"></script>

然后将图片路径放到一个数组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);
};

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="ImgsLoader.js"></script>
	</head>

	<body>
		<canvas id="myCanvas" width="400" height="400" style="border:1px solid black; background-color: beige;"></canvas>
		<script>
			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);

			function eventHandler(resp) {
				var type = resp.type;
				switch(type) {
					case "EVENT_COMPLETE":
						console.log("加载成功!");
						var imgList = resp.target.data;
						var img = imgList["images/fatcap.png"];
						var canvas = document.getElementById("myCanvas");
						var ctx = canvas.getContext("2d");
						var pointX = ctx.canvas.width / 2 - (img.width / 2);
						var pointY = ctx.canvas.height / 2 - (img.height / 2);
						ctx.drawImage(img, pointX, pointY);
						break;
					case "EVENT_PROGRESS":
						var progress = Math.round(resp.target.data * 100);
						console.log("当前进度是：" + progress + "%");
						break;
					case "EVENT_ERROR":
						var errorPath = resp.target.data;
						console.log("该图片加载错误：" + errorPath);
						break;
				}
			}
		</script>
	</body>

</html>

运行结果如图所示：

黄泽平

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js自定义事件

HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。下面的ImgsLoader工具类，可以实现多图片预加载。 &lt;script src="ImgsLoader.js"&gt;&lt;/script&gt; 然后将图片路径放到一个数组imgs中，然后调用load（imgs）方法即可，如 var ...
复制链接

扫一扫

专栏目录