js自定义事件

左手的ㄟ右手 2021-09-12 07:20 401阅读 0赞

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的源码如下：

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

<!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>

运行结果如图所示：  
![Center][]

[Center]: /images/20210813/fd9a1bbcb24f4d01a28fe78b3e78b818.png