让我们从描述 DOM 元素的事件处理开始。
DOM 节点事件处理
首先，您不想直接使用 DOM 节点。相反，您可能希望使用Ext.Element 接口。为了分配事件处理程序，创建了Element.addListener 和Element.on（它们是等效的）。因此，例如，如果我们有 html：
<div id="test_node"></div>
我们想添加 click 事件处理程序。
让我们检索Element：
var el = Ext.get('test_node');
现在让我们检查文档中的 click 事件。它的处理程序可能有三个参数：
点击(Ext.EventObject e, HTMLElement t, Object eOpts)
知道了我们可以分配处理程序的所有这些东西：
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
小部件事件处理
Widgets 事件处理与 DOM 节点事件处理非常相似。
首先，widgets事件处理是利用Ext.util.Observable mixin实现的。为了正确处理事件，您的小部件必须包含 Ext.util.Observable 作为 mixin。默认情况下，所有内置小部件（如 Panel、Form、Tree、Grid 等）都将 Ext.util.Observable 作为 mixin。
对于小部件，有两种分配处理程序的方法。第一个 - 是使用on 方法（或addListener）。例如，让我们创建Button 小部件并将click 事件分配给它。首先，您应该检查事件的文档以获取处理程序的参数：
click(Ext.button.Button this, Event e, Object eOpts)
现在让我们使用on：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
});
第二种方式是使用widget的listeners配置：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
listeners : {
click: function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
}
});
注意Button 小部件是一种特殊的小部件。点击事件可以通过handler config 分配给这个小部件：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
handler : function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
});
自定义事件触发
首先你需要使用addEvents方法注册一个事件：
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
使用addEvents 方法是可选的。正如此方法的 cmets 所说，不需要使用此方法，但它为事件文档提供了位置。
要触发您的事件，请使用fireEvent 方法：
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */ 将被传递给处理程序。现在我们可以处理您的事件了：
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
值得一提的是，当您定义新的小部件时，插入addEvents 方法调用的最佳位置是小部件的initComponent 方法：
Ext.define('MyCustomButton', {
extend: 'Ext.button.Button',
// ... other configs,
initComponent: function(){
this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
// ...
this.callParent(arguments);
}
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });
防止事件冒泡
为了防止冒泡，您可以return false 或使用Ext.EventObject.preventDefault()。为了防止浏览器的默认操作使用Ext.EventObject.stopPropagation()。
例如，让我们将点击事件处理程序分配给我们的按钮。如果未单击左按钮，则阻止默认浏览器操作：
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});