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