Sencha-概念-Events(事件)（官网文档翻译10）

煎茶Touch 2的组件和类的触发广泛的事件，在其生命周期的不同点。活动让你的代码，它周围的变化作出反应，并在煎茶触摸是一个关键的概念。

触发事件时，一些有趣的事情发生在一个类。例如，当任何组件被渲染到屏幕上画事件被触发。我们可以侦听该事件通过配置一个简单的监听器的配置：

Ext.create('Ext.Panel',{
html:'My Panel',
fullscreen:true,

listeners:{
painted:function(){Ext.Msg.alert('I was painted to the screen');}}});

当你点击上面“实时预览”按钮，你会看到面板的画面呈现给我们的警告消息。一类引发的事件中列出的API页-例如Ext.Panel在写作的时候有28个事件：



将鼠标悬停在“事件”按钮来快速查看哪些事件可

监听事件

画事件本身在某些情况下是有用的，但也有其他活动，你更可能使用。例如，按钮的消防水龙头事件时，他们正在挖掘：

Ext.Viewport.add({
xtype:'button',
centered:true,
text:'My Button',

listeners:{
tap:function(){
alert("You tapped me");}}});

，因为我们喜欢，我们可以添加尽可能多的事件侦听器。在这里，我们要由的调用this.hide（）内我们的自来水监听，隐藏按钮，只显示几秒钟后再次混淆我们的用户。当this.hide（）被调用时，按钮是隐藏的，发射的隐藏事件。从而触发隐藏监听，等待一秒钟，然后再次显示了按钮的隐藏事件：

Ext.Viewport.add({
xtype:'button',
centered:true,
text:'My Button',

listeners:{
tap:function(){this.hide();},
hide:function(){//waits 1 second (1000ms) then shows the button againExt.defer(function(){this.show();},1000,this);}}});

事件侦听器被称为每次触发事件，这样你就可以继续隐藏和显示按钮为所有的永恒。

配置驱动的事件

大多数类在运行时可重构-例如，您可以更改配置，如高度，宽度或内容在任何时候和组件正确地更新自己在屏幕上。许多这些配置更改触发一个事件被触发-例如按钮的24事件14的名称，像widthchange，hiddenchange和centeredchange的。

这一次，我们的自来水处理程序要调用this.setWidth（）到我们的按钮上设置一个随机的宽度。立即我们的widthchange侦听器将通知的变化，随着新的和旧的宽度值：

Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me',

listeners:{
tap:function(){var randomWidth =100+Math.round(Math.random()*200);this.setWidth(randomWidth);},
widthchange:function(button, newWidth, oldWidth){
alert('My width changed from '+ oldWidth +' to '+ newWidth);}}});

结尾的“变”中的每一个事件被触发作为一个配置选项改变的结果。请注意，您就像任何其他的监听这些事件，这是一个好的知道的公约。

以后添加侦听器

每一个例子，到目前为止，已在类被实例化时，听众参与通过。如果我们已经有一个实例，但是，我们仍然可以增加听众在以后使用上的功能：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me'});

myButton.on('tap',function(){
alert("Event listener attached by .on");});

在任何时候这种方式，您可以添加新的听众。我们也可以组合使用这些方法，甚至听相同的事件不止一次，如果我们需要：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me',

listeners:{
tap:function(){
alert('First tap listener');}}});

myButton.on('tap',function(){
alert("Second tap listener");});

这两个事件侦听器的功能，被称为保存的顺序被添加进来

最后，我们可以指定多个监听器使用。上，就像我们可以用一个监听器配置。这是我们的随机宽度设置按钮：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me'});

myButton.on({
tap:function(){var randomWidth =100+Math.round(Math.random()*200);this.setWidth(randomWidth);},
widthchange:function(button, newWidth, oldWidth){
alert('My width changed from '+ oldWidth +' to '+ newWidth);}});

删除监听器

正如我们可以在任何时候添加监听器，我们可以删除过，这次使用的联合国。为了删除监听器，它的功能，我们需要一个参考。在上面的例子中，我们刚刚通过了一项功能，直接进入侦听器对象。随叫随 ​​到，这一次，我们要创建的函数，得更早一点，它链接到一个变量称为doSomething的。

我们将通过我们的新的doSomething功能，为我们的听众对象，像以前一样。然而这一次，我们将移除侦听器的底部，3秒后再次添加Ext.defer功能。点击该按钮，在第3秒产生一个警告消息，3秒后取消，使我们的听众是什么也没有发生：

var doSomething =function(){
alert('handler called');};var myButton =Ext.Viewport.add({
xtype:'button',
text:'My Button',
centered:true,

listeners:{
tap: doSomething
}});Ext.defer(function(){
myButton.un('tap', doSomething);},3000);

在这个例子中，我们添加一个按钮像以前一样，但这次还加入了切换按钮，将自来水添加和删除监听器，切换。监听器开始关闭禁用，使用切换按钮，使后来又禁用它：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Listener Disabled'});var handler =function(){
alert('listener called');};Ext.Viewport.add({
xtype:'togglefield',
docked:'bottom',
label:'Toggle Listener',

listeners:{
change:function(field, thumb, enabled){if(enabled){
myButton.on('tap', handler);
myButton.setText('Listener Enabled');}else{
myButton.un('tap', handler);
myButton.setText('Listener Disabled');}}}});

监听器选项

有一些额外的选项，我们可以传递到听众。

范围

这里面的处理函数范围的值设置。默认情况下被设置为触发事件，这是经常（但并不总是）你想要什么类的实例。这是允许的我们打电话this.hide，（）在第二个例子中隐藏按钮附近开始本指南。

这一次，我们将创建一个按钮和一个小组，然后听取按钮的“自来水”事件，我们的处理程序运行在小组的范围。要做到这一点，我们需要传递的对象，而不是一个处理函数 - 这个对象包含了函数加上范围：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me'});var panel =Ext.create('Ext.Panel',{
html:'Panel HTML'});

myButton.on({
tap:{
scope: panel,
fn:function(){
alert("Running in Panel's scope");
alert(this.getHtml());}}});

当你运行这个例子的价值在自来水处理小组。为了说明这一点，我们会设置小组的HTML配置“面板HTML”，然后提醒this.getHtml（）在我们的处理程序。当我们轻点按钮，我们确实看到小组的HTML的通知。

单

有时候我们只需要听一次的事件。事件本身可能触发的次数，但我们只需要听它一次。这很简单：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me',

listeners:{
tap:{
single:true,
fn:function(){
alert("I will say this only once");}}}});

缓冲区

对于被触发的事件，在短时间内连续地多次，我们可以油门我们的监听器被调用，通过使用缓冲配置的数目的次数。在这种情况下，我们的按钮的自来水监听器将被调用每2秒一次，不管有多少次你点击它：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:'Click me',

listeners:{
tap:{
buffer:2000,
fn:function(){
alert("I will say this only once every 2 seconds");}}}});

射击自己的事件

射击自己的事件是很简单-你可以调用fireEvent与任何事件的名称。在这种情况下，我们会触发一个事件MyEvent的传递两个参数- 1和100之间的数字按钮本身：

var myButton =Ext.Viewport.add({
xtype:'button',
centered:true,
text:"Just wait 2 seconds",

listeners:{
myEvent:function(button, points){
alert('myEvent was fired! You score '+ points +' points');}}});Ext.defer(function(){var number =Math.ceil(Math.random()*100);

myButton.fireEvent('myEvent', myButton, number);},2000);

我们再次用Ext.defer延迟触发的功能，自定义事件，这2秒的时间。当事件被触发时，我们MyEvent的监听器拿起它提醒我们传入的参数

结论

煎茶触摸事件是一个重要组成部分，并随时通知您的应用程序在系统中的变化。如果你是新的煎茶触摸，我们建议检查出这些指南，以获得更好的接地一切是如何工作的：

了解组件

理解类系统