From Learn About the Ext JavaScript Library

Contents 1 事件的定义 2 Ext中的事件 2.1 DOM事件 2.2 JavaScript事件 3 如何监听事件 4 如何创建事件源？ 5 延伸阅读

事件的定义

事件一个消息、一次函数的调用，可由程序（或其中的部分）生成；事件源，用于通知其他的程序（的其中一部分）；事件处理器，就是触发某些内容。事件会由用户的动作或事件源的状态发生改变而生成。事件源独立于事件侦听器，哪怕是没有人去侦听它或定义好一个侦听器都是生成事件。我们说无限循环（infinite loop）的思想在于：“有用户把鼠标移动到[x,y]坐标了，我正在通知全体的成员，有没有人侦听、谁是侦听者不是我关心的事情” 。侦听者（listener）的思想在于：“用户一移动鼠标，就要告诉我，让我执行某些事情”。

Ext中的事件

Ext中的事件可以分为“两类”： DOM事件与 JavaScript（或程序）事件。

DOM事件

显示网页的浏览器已经有某种“无限循环”的机制以处理用户的动作，并根据DOM元素所发生的动作去触发事件。

以往我们一般是这样设置DOM元素事件侦听器的：

<div id="mydiv" onclick="alert('你点击了我。')">请点击！</div>

Ext.Element 对DOM元素的事件进行打包，现在设置事件侦听器的方式变为这样：

Ext.get('mydiv').on('click', function() {alert('你点击了我。');});

It can be said that DOM events are "passed-through" from DOM through Ext.Element to listeners.

JavaScript事件

现在，事件源不但会是DOM元素，而且可以是任意的JavaScrpt对象，轻松实现事件源的逻辑和加入侦听器。可是，这带来什么好的方面呢？

试想一下一个复杂的组件如GRID。只对DOM事件编程话，像列移动这样的用户动作处理起来变得极端复杂。你必须要侦听DOM的元素，处理鼠标的点击、移动、计算出列移动的距离等等。 如采用GRID组件的话，相信可摆脱烦复的工作，变为一件轻松的事情：所有东西完成好后，通知你“用户已经移动列三到位置一”。这就是GRID的功劳：它触发JS事件，通知预设好的侦听者发生了什么事儿。其他的ext组件也是这么一回事。如验证事件、树折叠...

如何监听事件

对于Ext类中的某个对象，假设一面板（Panel），当面板大小变化时，就会执行相应的动作，这样你需要加入一个侦听器来实现你的动作：

//创建面板
var myPanel = new Ext.Panel({...});
 
// 加入大小变化的侦听器
myPanel.on('resize', function(panel, w, h) {
    alert('Panel resized to ' + w + 'x' + h);
});

这样的效果是，无论任何时候面板myPanel一发生变化，便会调用函数执行你预设的动作。

如何创建事件源？

事件相关的函数是由Ext.util.Observable 类来实现，所以如果现在是一个事件源的扩展程序，只要继承Observable便可。而且，如果你已经是从Observable的子类上获取继承（Panel、Grid、Form、Tree等）那么已经是一个事件源了。 事件的触发是由父类所执行的。

随便监听和触发事件~尽情地使用事件吧！

延伸阅读

• 这是译者的博客你可浏览更多EXT的中文翻译资源。