原生HTML5自定义事件

原创 2017年05月23日 16:41:54

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>
运行结果如图所示:



版权声明:本文为博主原创文章,未经博主允许不得转载。

document.createEvent建立自定义事件

document.createEvent用于创建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型。DOM Level 3增加很多事件类...
  • ganyuanmen
  • ganyuanmen
  • 2015年12月28日 11:31
  • 1787

JS自定义事件原生

说在开始,Javascript自定义事件类似设计的观察者模式,通过状态的变更来监听行为,主要功能解耦,易于扩展。多用于组件、模块间的交互。 原型模式下的js自定义事件var EventTarget =...
  • wkyseo
  • wkyseo
  • 2016年12月13日 14:39
  • 1785

浅谈JavaScript模拟事件和自定义事件

1、DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月24日 23:02
  • 1047

【jQuery】调用trigger()方法手动触发指定的事件

trigger()方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行,它的调用格式为: $(selector).trigger(even...
  • happyhaojie
  • happyhaojie
  • 2015年12月17日 14:26
  • 1742

JS自定义事件绑定--通过URL触发不同的点击事件

今天,遇到了这样一个问题,通过超链接的跳转到不同的页面,然后通过URL的不同的参数,来触发相应的事件 先看看dome.html的超链接部分: ...
  • super_yang_android
  • super_yang_android
  • 2016年04月24日 12:20
  • 2325

原生HTML5自定义事件

在做js开发时,有时候需要预加载图片,本篇介绍一个图片预加载工具类ImgsLoader,该工具类可以实现多图片预加载的实现。首先我们需要导入ImgsLoader.js 预加载方法是:先将图片路径放到...
  • zeping891103
  • zeping891103
  • 2017年05月23日 16:41
  • 505

javascript给元素定义自定义事件(非html原生事件)

废话不多说,直接上代码。 var el = null; var evt = null; window.onload = function(){ el = document.getEle...
  • makinglove0231
  • makinglove0231
  • 2014年08月20日 18:19
  • 268

为什么我不看好HTML5替代原生APP

最近HTML5又开始大火起来了,几年前我也是HTML5的忠实粉丝,狂热的技术爱好者和BS系统的开发者,我和这些鼓吹HTML5的人一样,硬件的提升,必将会提升HTML5在移动互联端的用户体验,对,说的是...
  • GerJeffrey47959633
  • GerJeffrey47959633
  • 2015年02月02日 11:42
  • 2029

从Android原生角度看移动html5开发APP(一)原生与html对比

本来一直从事Android原生开发,基于一个项目需要用到html5开发,从而学习了html、html5、css、JavaScript等等知识。下面就个人从Android原生角度浅谈一下html5开发移...
  • zh_ang_hua
  • zh_ang_hua
  • 2016年10月27日 11:55
  • 552

【稀饭】react native 实战系列教程之自定义原生UI组件

上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之Vi...
  • a631855639
  • a631855639
  • 2016年09月23日 15:05
  • 5043
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生HTML5自定义事件
举报原因:
原因补充:

(最多只允许输入30个字)