《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.9 EventListenerObject与事件分发

3.2.9  EventListenerObject与事件分发

　　EventListenerObject是TypeScript中预先定义的一个接口，该接口具有如下声明：

interface EventListenerObject {

    handleEvent ( evt : Event ) : void ;

}

　　该接口作为回调接口，我们只要实现签名方法handleEvent就可以了。在必要时，浏览器系统会自动调用该接口的handleEvent方法。因此需要在Application类中接口继承EventListenerObject并实现handleEvent方法。具体代码如下：

// 接口继承EventListenerObject 并实现handleEvent签名方法

export class Application implements EventListenerObject {

    // 本书中的Demo以浏览器为主

    // 对于mousemove事件提供一个开关变量

    // 如果下面变量设置为true，则每次鼠标移动都会触发mousemove事件

    // 否则就不会触发

    public isSupportMouseMove : boolean ;

    // 使用下面变量来标记当前鼠标是否为按下状态

    // 目的是提供mousedrag事件

    protected _isMouseDown : boolean ;

    // 调用dispatchXXXX虚方法进行事件分发

    // handleEvent是接口EventListenerObject定义的接口方法，必须要实现

    public handleEvent ( evt  : Event )  : void {

        // 根据事件的类型，调用对应的dispatchXXX虚方法

        switch ( evt . type ) {

            case "mousedown" :

                this . _isMouseDown = true ;

                this . dispatchMouseDown ( this . _toCanvasMouseEvent

                ( evt ) ) ;

                break ;

            case "mouseup" :

                this . _isMouseDown = false ;

                this . dispatchMouseUp ( this . _toCanvasMouseEvent ( evt ) ) ;

                break ;

            case "mousemove" :

                //如果isSupportMouseMove为true，则每次鼠标移动会触发mouseMove事件

                if ( this . isSupportMouseMove ) {

                    this . dispatchMouseMove ( this . _toCanvasMouseEvent

                    ( evt ) ) ;

                }

                // 同时，如果当前鼠标任意一个键处于按下状态并拖动时，触发drag事件

                if ( this . _isMouseDown ) {

                    this . dispatchMouseDrag ( this . _toCanvasMouseEvent

                    ( evt ) ) ;

                }

                break ;

            case "keypress" :

                this . dispatchKeyPress ( this . _toCanvasKeyBoardEvent

                ( evt ) ) ;

                break ;

            case "keydown" :

                this . dispatchKeyDown ( this . _toCanvasKeyBoardEvent

                ( evt ) ) ;

                break ;

            case "keyup" :

                this . dispatchKeyUp ( this . _toCanvasKeyBoardEvent ( evt ) ) ;

                break ;

        }

    }

}

　　可以看到，对于鼠标事件，在handleEvent中先调用_toCanvasXXXEvent方法将类型为Event的参数转换为自己定义的事件，然后调用对应的dispatchXXX虚方法，这些方法需要由子类覆写（override）。dispatchXXX虚方法有多个，在Application基类中都是空实现，因此只要知道名字即可，具体实现在子类中详细了解。