javascript - 解释 ExtJS 4 事件处理

Question

我最近开始学习 ExtJS，但很难理解如何处理事件。我没有任何以前版本的 ExtJS 的经验。

通过阅读各种手册、指南和文档页面，我已经弄清楚了如何使用它，但我不清楚它是如何工作的。我找到了一些针对旧版本 ExtJS 的教程，但我不确定它们在 ExtJS 4 中的适用性如何。

我特别关注诸如此类的“最终决定”

• 事件处理函数传递了哪些参数？是否有一组始终通过的标准参数？
• 如何为我们编写的自定义组件定义自定义事件？我们如何触发这些自定义事件？
• 返回值(true/false)是否影响事件冒泡的方式？如果不是，我们如何从事件处理程序内部或外部控制事件冒泡？
• 是否有注册事件监听器的标准方法？ (到目前为止，我遇到过两种不同的方法，但我不确定为什么使用每种方法)。

例如，this question让我相信事件处理程序可以接收相当多的参数。我看过其他教程，其中处理程序只有两个参数。有什么变化？

Answer 1

让我们从描述 DOM 元素的事件处理开始。

DOM节点事件处理

首先，您不想直接使用 DOM 节点。相反，您可能想利用 Ext.Element界面。为了分配事件处理程序，Element.addListener和 Element.on (这些是等价的)被创建。因此，例如，如果我们有 html:

<div id="test_node"></div>

我们想添加click 事件处理程序。
让我们检索 Element:

var el = Ext.get('test_node');

现在让我们检查 click 的文档事件。它的处理程序可能具有三个参数:

click( Ext.EventObject e, HTMLElement t, Object eOpts )

了解了所有这些我们可以分配处理程序的东西:

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

小部件事件处理

小部件事件处理与 DOM 节点事件处理非常相似。

首先，widgets的事件处理是利用Ext.util.Observable实现的混合。为了正确处理事件，您的小部件必须包含 Ext.util.Observable 作为混合。默认情况下，所有内置小部件(如 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);
});

第二种方法是使用小部件的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 将点击事件分配给此小部件配置:

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 方法是可选的。正如对此方法的评论所说，没有必要使用此方法，但它为事件文档提供了位置。

要触发您的事件，请使用 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 */ });

防止事件冒泡

要防止冒泡，您可以返回 false 或使用 Ext.EventObject.preventDefault() .为了防止浏览器的默认操作使用 Ext.EventObject.stopPropagation() .

例如，让我们将点击事件处理程序分配给我们的按钮。如果没有单击左按钮，则阻止默认浏览器操作:

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});