js自定义事件

js自定义事件的应用

js自定义事件资料很少就是几个个api

首先创建自定义事件createEvent 旧的方法是document.createEvent,现在可以直接new Event("xxx");

下面给一个简单的示例


		var evt = document.createEvent("Event");
		evt.initEvent('myEvent',true,true);
		var box = document.getElementById("box");
		box.addEventListener("myEvent",function(){
			alert("我的事件")
		},false);
		var button = document.getElementById("ok");
		button.addEventListener("click",function(){
			this.dispatchEvent(evt);//触发这个事件
			//userData.getData();
		},false);


简单看看....觉得 没什么东西。。。...而实际上我们可以利用这个自定义事件做一些和模块化控件相关的东西


		//首先我们定义一个自定义事件对象
		var myEvent = {};
		myEvent.init = function(eventName){
			myEvent.eventList=myEvent.eventList||{};
			myEvent.eventList[eventName]=document.createEvent("Event");
			myEvent.eventList[eventName].initEvent(eventName,true,true);
			return myEvent.eventList[eventName];
		};
		myEvent.on = function (ele,eventName,handle) {
			ele.addEventListener(eventName,handle,false);
		};
		myEvent.remove = function (ele,eventName,handle) {
			ele.removeEventListener(eventName,handle,false);
		};
		myEvent.trigger=function(ele,eventName){
			ele.dispatchEvent(myEvent.eventList[eventName])
		};


然后比如我们有个模块userDat,它自己有一堆方法和属性,我们在这个userData模块里自定义一个事件getDataOK,代码如下


		var userData={}
		userData.init = function(){
			myEvent.init("getUserDataOK");
		}
		userData.init();
		userData.getData = function(){
			///balabala一堆业务逻辑,获取了用户的数据
			this.data = [{name:"xxx",age:"14"},{name:"我问问",age:28}];
			myEvent.trigger(document,"getUserDataOK");
		}


现在我有个模块b 我在b里监听getUserDataOK事件然后拿到用户数据做一些balabala的事情 代码如下


	var b = {};
		b.init = function(){
			myEvent.on(document,"getUserDataOK",function(){
			b.handle.apply(userData);			 
			});
		}		
		b.handle=function(){
			console.log(this);
			console.log(this.data);
		}
		b.init();


同理, 我还有个模块c也要监听getUserDataOK,代码如下


		var c = {};
		c.init = function(){
			myEvent.on(document,"getUserDataOK",function(){
			c.handle.apply(userData);			 
			});
		}
		c.alert=function(data){
			alert(JSON.stringify(data));
		}
		c.handle=function(){
			var d = this.data;
			c.alert(d);
		}
		c.init();


over,优点很明显代码耦合性降低, 不再需要给userData模块绑定callback方法

点击这里查看demo

本文标题:js自定义事件
本文链接:https://56way.com/p/57.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。