在Ext中使用事件 博客分类： Extjs EXTJavaScript浏览器编程工作
程序员文章站
2024-02-03 13:13:40
...
事件的定义
事件一个消息、一次函数的调用，可由程序（或其中的部分）生成；事件源，用于通知其他的程序（的其中一部分）；事件处理器，就是触发某些内容。事件会由用户的动作或事件源的状态发生改变而生成。事件源独立于事件侦听器，哪怕是没有人去侦听它或定义好一个侦听器都是生成事件。我们说无限循环（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等）那么已经是一个事件源了。事件的触发是由父类所执行的。
随便监听和触发事件~尽情地使用事件吧！
转http://www.extjs.com/learn/Tutorial:Events_Explained_%28Chinese%29
事件一个消息、一次函数的调用，可由程序（或其中的部分）生成；事件源，用于通知其他的程序（的其中一部分）；事件处理器，就是触发某些内容。事件会由用户的动作或事件源的状态发生改变而生成。事件源独立于事件侦听器，哪怕是没有人去侦听它或定义好一个侦听器都是生成事件。我们说无限循环（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等）那么已经是一个事件源了。事件的触发是由父类所执行的。
随便监听和触发事件~尽情地使用事件吧！
转http://www.extjs.com/learn/Tutorial:Events_Explained_%28Chinese%29