ext基础架构-事件机制三

1、 Easy-Ext 第六讲 Ext基础架构_事件机制（三）讲师：白鹤翔Easy-Ext 我们所熟悉的事件嗯！对于事件，相信你一定不陌生。我们直接追溯到原始的事件模型，也就是0级DOM事件模型。非常通俗的说，就是给HTML元素里加一个事件，这种方法有一个硬伤，就是不能同时对元素注册多个处理函数。好吧，W3C的专家也知道这样不好，那么2级DOM事件模型也就产生了，也就是所谓的标准事件模型。API如下定义：element.addEventListener(type,listener,useCapture);element.removeEventListener(type,listener,useCa

2、pture);好吧，这又牵扯到了事件流，也就是事件的传播。W3C的专家把事件分成了3个阶段：（1）捕获 （2）目标 （3）冒泡，相信你也知道这三个阶段。好吧，事件对象（event）这个对象是W3C的标准。但是IE他不支持，只能用window.event去获取。这里又引出了一个最头痛的问题，就是浏览器差异。对于一些相关的问题我在这里不进行讲解了。Easy-Ext 高级事件 基本事件是什么？就类似于click、keypress、focus、mouseover等这些事件都是浏览器定义好的内置事件，我们直接使用即可。对于高级事件，无非就是自己去设计一个事件，就比如我们实际项目中，通常都伴随些业务逻辑，

3、可能是曾删改查等.这些事件都是非原生事件，也就是浏览器无法自行判别触发的。但是我们确实有需求去实现他们，从而让我们开发起来更爽一些。对于如何实现自定义事件，我们还是要了解标准事件的使用原理，然后做一个简单的分析，考虑3点：如何注册事件？如何触发事件？如何删除事件？其实浏览器的事件内部使用的是javascript经典的观察者模式去实现的，那么我们也可以模拟一个观察者模式，为自己设计事件！Easy-Ext高级事件 设计分析：首先我们需要一个事件的定义者，类似浏览器一样能自动分辨出所触发的任意内置事件，我们叫他Observable，他是我们要定义的类；然后应该有一个触发事件的对象(就类似浏览器里的元

4、素)，也就是事件源，这个类可以是Observable的子类，我们可以暂时不去管它。第二，Observable这个对象的实例可能会有多个可以触发的事件，我们随意定义2个自己的事件 开始 star、停止 stop，这2个自定义的事件名称也就是我们要进行的事情。这2个事件名称必须要属于Observable这个类。第三，因为仅仅定义名称是不行的，需要为自己定义的事件名称绑定相关的函数，当然函数可以是多个（一个事件可以绑定多个函数）然后去执行他们。你需要有一个数据结构负责维护事件名称与所绑定函数直接的关系。第四，新增事件类型，也就是去添加你自己的事件名称第五，添加监听函数，也就是做一个事件名称与函数的绑

5、定方法第六，响应的也应该有一个移除事件的方法。第七，触发事件。嗯，就是调用这个事件名称所对应的所有函数即可。最后，我们可以给函数起一个别名，从而方便去使用。Easy-Ext高级事件 嗯。如果你阅读过Ext源码，应该知道这就是Ext底层关于Ext.util.Observable的核心设计思路。只不过我们做的比较简陋。没有Ext那么健壮而已。Easy-Ext事件工具类 嗯，如果你曾搞过浏览器兼容问题，对于事件，你一定知道怎么屏蔽浏览器的差异。很显然我们需要一个事件管理类，用于屏蔽一切浏览器差异。这个类我们叫他EventManger，很霸气的名字，和Ext的类名称一致这么做的目的只有1个：就是为了屏

6、蔽浏览器差异。嗯，简单做了实现之后，我们知道通过这样的静态工具类，非常的好用，那么这也是Ext.EventManger的核心设计思路。Easy-ExtExt的事件系统 之前我们设计了2套机制，一套机制做了对自定义事件的处理，另一套机制做了对原生浏览器事件的差异处理。如果我们现在有一个需求，就是点击一个按钮，然后触发一个自定义的事件，那该如何去做呢？答案：很简单，就是把这两套系统综合起来，无非就是点击按钮的时候里面调用一下自己所定的事件fire方法即可。对于Ext来说，他的事件机制的核心设计就是我们模拟的这2套机制。简单做一个说明：Ext的事件分为浏览器事件和自定义事件。通过Observable

7、接口提供一套完全自定义的事件机制，然后再通过EventManger事件工具类对原生事件的一次封装，屏蔽了浏览器之间的差异。最后保证Observable、EventManager他们俩套机制暴露出完全相同的接口，这俩套机制相互配合使用，相互并行。你可以随意的通过on、un方法绑定原生事件或自定义事件来完成事件的处理。从而实现了非常强大的功能。Easy-ExtExt事件使用 熟练使用Ext事件：为底层元素注册事件：on、un方法使用：Ext.EventManager.on（el，eventName，fn，scope ,options.）常用options：preventDefault、stopPr

8、opagation、delay、singleExt.EventManager.un（同上）三种绑定事件的方式：Ext.EventManager.on(el，ename，fn);Ext.EventManager.on(el，ename1：fn1，ename2：fn2);Ext.EventManager.on(el，ename1:fn:fun,ename2:fn:fun);Easy-ExtExt事件使用 为Ext的UI组件绑定事件ex005：两种形式：在listeners里注册事件、单独为组件批量注册事件Easy-ExtExt事件使用 使用Ext的自定义事件，嗯！之前我们已经自己用观察者模拟了简陋的自定义事件。了解了原理之后，那么我们看看Ext应该如何使用自定义事件的，也就是传说中的Ext.util.Observable简单的自定义事件。为自定义的类提供事件的支持。Easy-ExtExt事件使用 Ext.util.Observable类的其他使用ex007: 单次运行监听器的使用，single配置项在组件中的用途ex008：对于事件的挂起和恢复实例ex009：事件的转发机制Easy-ExtExt事件使用 我们最后对于Ext事件做一个总结。Ext的事件主要做了三