《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.10 让事件起作用

3.2.10  让事件起作用

　　到目前为止，整个事件分发处理流程都打通了，就缺添加监听器监听感兴趣的事件了。将事件监听的操作放在Application类的构造函数中，这样就能在内存分配初始化后监听相关事件。具体代码如下：

public constructor ( canvas : HTMLCanvasElement  ) {

    this . canvas = canvas ;

    // canvas元素能够监听鼠标事件

    this . canvas . addEventListener ( "mousedown" , this , false ) ;

    this . canvas . addEventListener ( "mouseup" , this , false ) ;

    this . canvas . addEventListener ( "mousemove" , this , false ) ;

    // 很重要的一点，键盘事件不能在canvas中触发，但是能在全局的window对象中触发

    // 因此能在window对象中监听键盘事件

    window . addEventListener ( "keydown" , this , false ) ;

    window . addEventListener ( "keyup" , this , false ) ;

    window . addEventListener ( "keypress" , this , false ) ;

    // 初始化时，mouseDown为false

    this . _isMouseDown = false ;

    // 默认状态下，不支持mousemove事件

    this . isSupportMouseMove = false ;

}

　　上述代码要强调的一点是：HTMLCanvasElement元素无法监听键盘事件，幸运的是可以在全局的Window对象中监听键盘事件，然后对相应事件进行分发或处理。至此，Application的基本功能都实现了，接下来需要两个继承自Application的子类，分别使用Canvas2D和WebGL API进行渲染。