创建可被取消的默认事件处理器

创建可被取消的默认事件处理器

[重要说明]：本小节内容由网友闲云野鹤倾情提供，谢谢他的分享。

默认事件处理器用于在组件内部对某些事件进行默认动作相应，这在很多组件里面都是很普遍的。这样组件可以触发某些事件，默认对触发的事件进行处理，比如在可关闭的TitleWindow窗口中，我们单击顶部的关闭按钮，TitleWindow内部的默认关闭事件处理器对该事件进行响应，执行关闭当前窗口的操作。这样存在一种情况，有时候我们需要在关闭窗口前先提示用户将要关闭窗口，是否继续等类似的提示，如果用户确认需要关闭，那么就关闭，否则不关闭。对于后面的一种情况，我们需要阻止默认事件处理器的执行。类似的情况同样发生在我们自行开发的一些Flex组件中，所以有必要讨论一下如何创建一个可被取消的默认事件处理器。

首先，我们要在组件外部自定义对事件的处理器，而且这个处理器的执行优先级要高于默认的事件处理器。也就是说，组件内部的事件处理器的优先级要低于外部的处理器。对于组件外部的事件处理器来说，应有某些方法可以阻止默认事件处理器的执行，具体的实现过程有4个步骤：

1）在组件内部，创建事件时要设置该事件为可被取消，也就是要设置事件的cancelable标志为true，该标志对应事件构造函数Event()的第三个参数。

2）在组件内部，添加默认事件侦听处理器时要使用EventPriority.DEFAULT_HANDLER优先级，于是该事件的默认处理器的优先级就低于普通的事件处理器的优先级。

3）在组件外部，在自定义的事件处理器代码中，要调用event.preventDefault()方法来阻止事件在组件内部的默认事件处理器的执行。

4）在组件内部，默认的事件处理器代码中使用event.isDefaultPrevented()来检测用户是否阻止了默认事件处理。

代码清单1-7是演示代码，在组件的内部，我们定义了一个alarm事件该事件的默认处理器用于处理alarm事件。

代码清单1-7   停止默认事件处理器的演示代码

 
  
  
  
  

  
 
  
 
  
   
   
   
   
package  
  
 
  
 
  
   
   
   
   
{  
  
 
  
 
  
   
   
   
   
   import flash.events.Event;  
  
 
  
 
  
   
   
   
   
   import mx.controls.Alert;  
  
 
  
 
  
   
   
   
   
   import mx.core.EventPriority;  
  
 
  
 
  
   
   
   
   
   import mx.core.UIComponent;  
  
 
  
 
  
   
   
   
   
   [Event( name="alarm", type="flash.events.Event" )]  
  
 
  
 
  
   
   
   
   
   public class MyComponent extends UIComponent  
  
 
  
 
  
   
   
   
   
  {  
  
 
  
 
  
   
   
   
   
      public function MyComponent()  
  
 
  
 
  
   
   
   
   
     {  
  
 
  
 
  
   
   
   
   
           // 为alarm事件添加默认事件侦听。  
  
 
  
 
  
   
   
   
   
           /**该事件的优先级为：DEFAULT_HANDLER。这是一
个低优先级，以使得普通的事件侦听可以*先执行，从而用户可
以通过调用event.preventDefault()来取消事件的默认处理行为。*/  
  
 
  
 
  
   
   
   
   
           addEventListener("alarm",handleAlarm,
false,EventPriority.DEFAULT_HANDLER, true);  
  
 
  
 
  
   
   
   
   
        }  
  
 
  
 
  
   
   
   
   
      //一种简单方法，触发一个可被取消的带默认事件处理的事件。  
  
 
  
 
  
   
   
   
   
      public function triggerAlarm():void  
  
 
  
 
  
   
   
   
   
      {  
  
 
  
 
  
   
   
   
   
     /**创建一个新的alarm事件。这里的关键点为构造函数的第3个参数，  
  
 
  
 
  
   
   
   
   
    *该参数表示该事件可以通过event.preventDefault()来取消。*/  
  
 
  
 
  
   
   
   
   
           dispatchEvent( new Event("alarm", false, true ) );  
  
 
  
 
  
   
   
   
   
       }  
  
 
  
 
  
   
   
   
   
       // "alarm"事件的默认处理  
  
 
  
 
  
   
   
   
   
      protected function handleAlarm( event:Event ):void  
  
 
  
 
  
   
   
   
   
      {  
  
 
  
 
  
   
   
   
   
          // 检测该事件是否被其他的事件侦听器阻止了默认处理行为。  
  
 
  
 
  
   
   
   
   
          if ( !event.isDefaultPrevented() )  
  
 
  
 
  
   
   
   
   
           ...{  
  
 
  
 
  
   
   
   
   
         // 事件没有被取消。  
  
 
  
 
  
   
   
   
   
                Alert.show( "MyComponent内部Alarm事件默认处理,handleAlarm" );  
  
 
  
 
  
   
   
   
   
            }  
  
 
  
 
  
   
   
   
   
       }  
  
 
  
 
  
   
   
   
   
   } // end class  
  
 
  
 
  
   
   
   
   
} // end package 
 

 

 
  
  
  
  

代码清单1-8是一段简单的测试代码，我们定义了一个alarm事件的侦听器，在其内部调用event.preventDefault()来阻止该事件的默认执行行为。

代码清单1-8   测试代码

 
  
  
  
  

  
 
  
 
  
   
   
   
   
<?xml version="1.0" encoding="utf-8"?> 
  
 
  
 
  
   
   
   
   
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml 
layout="vertical" xmlns:local="*"> 
  
 
  
 
  
   
   
   
   
    <mx:Script> 
  
 
  
 
  
   
   
   
   
        <![CDATA[  
  
 
  
 
  
   
   
   
   
            protected function handleAlarm( event:Event ):void  
  
 
  
 
  
   
   
   
   
            ...{  
  
 
  
 
  
   
   
   
   
                 //为了便于演示，在界面上做一个标记  
  
 
  
 
  
   
   
   
   
                 来表示是否要阻止默认事件处理的执行。  
  
 
  
 
  
   
   
   
   
                 if ( preventToggle.selected )  
  
 
  
 
  
   
   
   
   
                 ...{  
  
 
  
 
  
   
   
   
   
                      trace( "Default behavior is prevented" );  
  
 
  
 
  
   
   
   
   
                      event.preventDefault();  
  
 
  
 
  
   
   
   
   
                  }  
  
 
  
 
  
   
   
   
   
                 else  
  
 
  
 
  
   
   
   
   
                 ...{  
  
 
  
 
  
   
   
   
   
                      trace("We didn"t prevent the default 
behavior, so we"ll see the alert from MyComponent.");  
  
 
  
 
  
   
   
   
   
                  }  
  
 
  
 
  
   
   
   
   
             }  
  
 
  
 
  
   
   
   
   
        ]]> 
  
 
  
 
  
   
   
   
   
    </mx:Script> 
  
 
  
 
  
   
   
   
   
    <mx:Button label="触发事件" click="myComp.triggerAlarm();" /> 
  
 
  
 
  
   
   
   
   
    <mx:CheckBox id="preventToggle" label="禁止默认行为?" selected="true" /> 
  
 
  
 
  
   
   
   
   
    <local:MyComponent id="myComp" alarm="handleAlarm( event );" /> 
  
 
  
 
  
   
   
   
   
</mx:Application> 
 

 

 
  
  
  
  

怎么样，很简单吧！这是一个简单但是很有用的技巧，创建可被取消的默认事件行为是Flex组件开发的一个重要部分。