ExtJS的组件和类，会在生命周期中调用一系列的事件，事件允许你自己写代码控制你应用程序的实际行为，它是ExtJS的一个核心内容。

什么是事件？

事件在你类中感兴趣的地方发生，比如，Ext.Component在渲染到屏幕的时候，ExtJS会在渲染完成后通知一个事件。我们可以通过配置一个listeners来监听那个事件。

Ext.create('Ext.Panel', {

    html: 'My Panel',

    renderTo:Ext.getBody(),

    listeners: {

        afterrender:function() {

           Ext.Msg.alert('Success!', 'We have been rendered');

        }

    }

});

在例子中，当你点击preview按钮的时候，pannel渲染到屏幕，然后就会执行定义好的aler信息。所有的时间在类的API页面都有列出，比如，Ext.panel.Panel共有45个监听事件。

监听事件

在某些情况下，Ext.Component#event-afterrender是非常有用的，其它，比如Ext.button.Button的click事件。

Ext.create('Ext.Button', {

    text: 'Click Me',

    renderTo:Ext.getBody(),

    listeners: {

        click: function(){

           Ext.Msg.alert('Success!', 'I was clicked!');

        }

    }

});

一个组件可能包含许许多多的事件监听，在下面的代码中，我们通过调用this.hide()方法迷惑用户，当我们鼠标滑过的时候，按钮就隐藏。一秒后，再让它显示。当this.hide()方法调用的时候，hide方法就被触发，hide事件触发hide监听，一秒后让按钮显示。

Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'My Button',

    listeners: {

        mouseover:function() {

            this.hide();

        },

        hide: function(){

            // Waits 1second (1000ms), then shows the button again

            Ext.defer(function(){

               this.show();

            }, 1000,this);

        }

    }

 });

事件监听在每次触发的时候都会被调用，所以根据需要你可以不限次的显示和隐藏按钮。

监听后置

在先前的例子中，我们在组件初始化的时候给组件传递了监听，但是如果我们已经有一个实例，我们也可以通过on 事件增加一个监听。

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'My Button'

});

button.on('click', function() {

   Ext.Msg.alert('Success!','Event listener attached by .on');

});

也可以通过on指定多个监听，跟使用listener监听一个道理，下面跟上面的代码相反，让按钮show：

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'My Button'

});

button.on({

    mouseover: function(){

        this.hide();

    },

    hide: function() {

       Ext.defer(function() {

            this.show();

        }, 1000, this);

    }

});

清除监听

在任何时候我们都可以增加监听，那在任何时候也可以移除监听，使用un功能，就可以达到。下面自定义了一个doSomething（）方法，开始定义一个监听，然后三秒后移除监听，开始有事件发生，后期因为移除了就不会有事件发生。

var doSomething = function() {

   Ext.Msg.alert('listener called');

};

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'My Button',

    listeners: {

        click:doSomething,

    }

});

Ext.defer(function() {

    button.un('click',doSomething);

}, 3000);

节点监听选项

节点通过你的处理功能设置值，默认是类来触发这个事件，但这不是固定不变的，上面的例子是在this.hide（）方法调用hide()隐藏按钮的，下面，我们创建一个按钮和一个面板，然后监听按钮的点击事件，作用域在面板内，为了这样做，需要传递一个实例代替一个处理方法，实例包含了一个AND节点方法：

var panel = Ext.create('Ext.Panel', {

    html: 'Panel HTML'

});

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'Click Me'

});

button.on({

    click: function() {

       Ext.Msg.alert('Success!', this.getXType());

    },

    scope: panel

});

当然，也可以通过冗余的方式设置一些监听，如果你不需要整体简洁的话：

var panel = Ext.create('Ext.Panel', {

    html: 'Panel HTML'

});

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'Click Me'

});

button.on({

    click: {

        scope: panel,

        fn: function() {

           Ext.Msg.alert('Success!', this.getXType());

        }

    }

});

运行后，点击事件的this就是代表的panel了，我们可以通过alert节点组件的xtype观察此项。当按钮被点击的时候我们能看到panel的xtype弹出。

单次监听

你可能也会想事件只监听发生一次，事件可能无限次发生，但是我们只想监听一次，下面展示一下：

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'Click Me',

    listeners: {

        click: {

            single: true,

            fn:function() {

               Ext.Msg.alert('Success!','I will say this only once');

            }

        }

    }

});

使用Buffer配置

当频繁调用的时候我们可以通过buffer配置减少事件发生的次数，下面例子展示只有2秒的时候才会触发一次事件的：

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: 'Click Me',

    listeners: {

        click: {

            buffer: 2000,

            fn: function() {

               Ext.Msg.alert('Success!','I say this only once every 2 seconds');

            }

        }

    }

});

监听自定义事件

通过fireEvent调用自定义的方法，下面的例子使用了myEvent带两个参数，按钮本身和1-100之间的随机数：

var button = Ext.create('Ext.Button', {

    renderTo:Ext.getBody(),

    text: "Just wait2 seconds",

    listeners: {

        myEvent:function(button, points) {

           Ext.Msg.alert('Success!','myEvent fired! You score ' + points + 'points');

        }

    }

});

Ext.defer(function() {

    var number =Math.ceil(Math.random() * 100);

   button.fireEvent('myEvent', button, number);

}, 2000);

又使用了一次Ext.defer来延迟方法的执行，这次是2秒，当事件触发的时候，myEvent事件就展示传入进来的参数。

监听DOM事件

并不是所有的ExtJS组件都有所有的事件，但是通过绑定到文档中，我们可以手动的给它添加一个事件，Ext.containner.Contener没有click事件，我们可以给定它一个：

var container = Ext.create('Ext.Container', {

    renderTo:Ext.getBody(),

    html: 'Click Me!',

    listeners: {

        click:function(){

           Ext.Msg.alert('Success!', 'I have been clicked!') 

        }

    }

});

container.getEl().on('click', function(){

   this.fireEvent('click', container);

}, container);

没有下面的那段代码，点击事件就不会触发，因为我们把组件的点击事件绑定到监听器上，我们就扩展了容器的事件能力。

事件标准化

作者：苏生米沿
链接：https://www.jianshu.com/p/b6d6b8eff73c