百度有啊前端框架分析(自定义事件)

今天早晨从酒店出来，外面下着鹅毛大雪，我的妈呀，我来的时候只穿了一件秋衣，昨天晚上好像所有的天气预报都没有报告今天会下雪，我操，我们的天气预报的仙人们天天在那里说的跟真的一样，这不是骗人吗，但是也没有办法，只能自己想办法怎么能事自己变得更暖和些。

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);
}
};

在停止监听时：

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);
}
};

触发事件时：

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);
}
}
};

以上就是百度有啊前端js框架中的自定义事件的实现。如果大家有兴趣可以去研究下jQuery，

和yui中的自定义事件。（尤其是yui3.0中的自定义事件也支持捕获和冒泡，相当牛逼的）

百度有啊前端框架分析(自定义事件)相关推荐

javascript笔记：推荐使用“百度统计”并且拷贝百度统计的前端框架
本篇博文讲两件事情,一个是推荐在博客园经常写博客的童鞋们一个很棒的工具--"百度统计",另一个是"拷贝百度统计"的页面框架. 首先讲第一个事情,我的博客里有不少 ...
Javascript框架的自定义事件(转)
很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持"document ready"事件.而部分自定 ...
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
前端框架Aurelia - 自定义组件
自定义元素(组件)- 含有ViewModel的自定义组件 .ts文件 1.首先我们要引入两个依赖!customElement和bindable. 2.下面这个例子还示意了如何给自定义组件绑定属性to, ...
【JS】512- JS 自定义事件如此简单！
在前端开发世界中,JavaScript 和 HTML 之间往往通过事件来实现交互.其中多数为内置事件,本文主要介绍 JS自定义事件概念和实现方式,并结合案例详细分析自定义事件的原理.功能.应用及注 ...
Android 友盟的计数功能,友盟统计_U-App应用统计之自定义事件统计
自定义事件可以实现在应用程序中埋点来统计用户的点击行为.自定义事件目前包括"计数事件"和"计算事件",二者的区别以及详细说明请点击这里(http://dev.u ...
前端框架MVC/MVVM分析系列
Backbone Backbone.js 是一个在JavaScript环境下的模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代 ...
b2c项目基础架构分析（二）前端框架以及补漏的第一篇名词解释
b2c项目基础架构分析(二)前端框架以及补漏的第一篇名词解释继续上篇,上篇里忘记了也很重要的前端部分,今天的网站基本上是以一个启示页,然后少量的整页切换,大量的浏览器后台调用web服务局部.动态更 ...
微前端框架之 qiankun 从入门到源码分析
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
goeasy:web页面推送解决方案包名:goeasy jar:goeasy-sdk-0.3.5.jar gson-2.3.1.jar slf4j-api-1.7.2.jar 个推:app通知栏等推 ...

百度有啊前端框架分析(自定义事件)

百度有啊前端框架分析(自定义事件)相关推荐

最新文章

热门文章