百度有啊前端框架分析(自定义事件)
2009-11-05 23:36
274 查看
今天早晨从酒店出来,外面下着鹅毛大雪,我的妈呀,我来的时候只穿了一件秋衣,昨天晚上好像所有的天气预报都没有报告今天会下雪,我操,我们的天气预报的仙人们天天在那里说的跟真的一样,这不是骗人吗,但是也没有办法,只能自己想办法怎么能事自己变得更暖和些。
JavaScript中的事件也是如此,浏览器内置的事件不可能帮你把所有的事情都做了,因此遇到特殊事件,必须我们自定义把他实现,那么我们就来来看百度有啊前端JavaScript框架的自定义事件是如何实现的。
首先声明了CustEvent,并定义了用于存放事件源对象和事件处理器的两个集合对象
[/code]
[/code]
JavaScript中的事件也是如此,浏览器内置的事件不可能帮你把所有的事情都做了,因此遇到特殊事件,必须我们自定义把他实现,那么我们就来来看百度有啊前端JavaScript框架的自定义事件是如何实现的。
在百度有啊的前端js框架中自定义事件对象主要定义了:
_srcObjes:事件源集合
_registeredEvents:事件处理器集合
observe:用于监听事件处理器的方法
stopObserving:停止监听事件处理器
fireEvent:触发事件处理器
下面对这些属性和方法逐一进行分析:
首先声明了CustEvent,并定义了用于存放事件源对象和事件处理器的两个集合对象
if (!window.CustEvent) { var CustEvent = {}; } CustEvent._srcObjs = [];//事件源对象集合 CustEvent._registeredEvents = [];//已经注册的事件以及事件处理器
在监听事件时:
1. 每个对象上可以注册多个事件
2. 每个事件可以有多个事件处理器,同名的事件处理器会被覆盖掉
CustEvent.observe = function(obj, event, fun) { event = event.toLowerCase().replace(/^on/g, "");// var objIndex = CustEvent._srcObjs.indexOf(obj);// if (objIndex > -1) {//如果事件源对象集合中存在参数指定的对象 var B = CustEvent._registeredEvents[A];//这里B是一个以事件名称为键,以事件处理器集合为值的对象 var handlers = B[event];//取得事件处理器集合 if (handlers) {//如果该事件已经注册过处理器,会把原来的事件处理器给覆盖掉 handlers.remove(fun);//把原来同名的处理器删除 handlers.push(fun);//添加的新的处理器 } else {//如果没有注册 B[event] = [fun]; } } else {//如果事件源对象集合中不存在参数指定的对象 CustEvent._srcObjs.push(obj); var B = {}; B[event] = [fun]; CustEvent._registeredEvents.push(B); } };[/code]
在停止监听时:
1.如果指定处理器名称,则只删除该处理器,否则把参数指定事件的所有处理器都删除
2.如果参数指定的对象中没有事件处理器,就把事件源和注册的事件对象全部删除。
CustEvent.stopObserving = function(obj, event, handle) { event = event.toLowerCase().replace(/^on/g, ""); var objIndex = CustEvent._srcObjs.indexOf(obj); if (objIndex < 0) { return; } var eventhandlers = CustEvent._registeredEvents[objIndex]; if (eventhandlers [event]) { if (handle) {//如果指定处理器,只删除指定的处理器 eventhandlers [event].remove(handle); } else {//否则删除指定事件所有的处理器 eventhandlers [event].length = 0; } } var E = false; //判断对象中是否还有事件处理器 for (var D in eventhandlers) { if (eventhandlers [D] && eventhandlers [D].length > 0) { E = true; break; } } //如果注册的事件中没有了指定对象的处理器,就把事件源和事件对象去不删除 if (!E) { CustEvent._srcObjs.removeAt(objIndex); CustEvent._registeredEvents.removeAt(objIndex); } };[/code]
触发事件时:
1.如果是浏览器内置事件,直接只执行就可以了。
2.如果是自定义事件,那么就分别执行每个处理器。
CustEvent.fireEvent = function(obj, event) { var args = Array.toArray(arguments); args.splice(0, 2); args.push(event); event = event.toLowerCase().replace(/^on/g, ""); //浏览器内置事件的处理 if (obj["on" + event]) { obj["on" + event].apply(obj, args); } //自定义事件的处理 var objIndex = CustEvent._srcObjs.indexOf(obj); if (objIndex < 0) { return; } //如果存在事件源对象 var eventhandlers = CustEvent._registeredEvents[objIndex]; var handlers = eventhandlers [event];//取得事件的所有处理器 if (handlers) {//分别执行每个处理器 for (var i = 0; i < handlers.length; i++) { handlers [i].apply(obj, args); } } };[/code]
以上就是百度有啊前端js框架中的自定义事件的实现。如果大家有兴趣可以去研究下jQuery,
和yui中的自定义事件。(尤其是yui3.0中的自定义事件也支持捕获和冒泡,相当牛逼的)
[/code]
[/code]
相关文章推荐
- 百度有啊前端框架分析(浏览器内置事件)
- b2c项目基础架构分析(二)前端框架 以及补漏的第一篇名词解释
- Dojo前端开发框架与jQuery前端开发框架,对比分析总结
- 百度前端开发框架tangram
- FIS-PLUS百度前端框架使用过程
- “百度应用商店”的前端框架小探
- 手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
- 轻量级前端MVVM框架avalon源码分析-总结
- 一款理想的前端框架未来市场价值分析
- YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)
- webuploader前端上前端页面本分析-百度webuploader3
- 手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
- 轻量级前端MVVM框架avalon源码分析
- 前端框架是什么?十个主流web前端框架分析
- 百度前端js库分析
- 使用百度前端EChart框架封装的Android版TAndroidEChart
- F.I.S -前端工具框架(百度前端团队出品)
- [目前最火的前端开发框架]React组件的应用分析
- 简单分析百度ITEST接口测试框架实现
- 流行前端开发框架分析