Google Closure:在容器上设置事件侦听器

时间:2015-07-27 21:26:49

标签: javascript keyboard-events google-closure google-closure-library

我有一个容器让我们在顶部说一个导航栏。我试图从一些其他模块将监听器附加到整个容器。例如,下面的代码创建整个工具栏。

 goog.provide('view.ToolBar');

    goog.require('components.ui.Button');
    goog.require('core.TemplatedComponent');
    .
    .
    goog.require('view.KeyboardNavigation');

    /**
     * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
     * @constructor
     * @extends {core.TemplatedComponent}
     */
    view.ToolBar = function(opt_domHelper) {
      // base constructor
      goog.base(this, opt_domHelper);

    };
    goog.inherits(view.ToolBar, core.TemplatedComponent);

    view.ToolBar.prototype.enterDocument = function() {
         new view.KeyboardNavigation(this);
         ../more code and more functions but irrevelant for my question
    }

正如您所看到的,我想要另一个名为键盘导航的模块来监听工具栏上发生的任何关键事件。我将组件传递给keyboardNavigator模块,然后将一个监听器附加到它,但它无法正常工作。我是谷歌关闭的新手,不知道我做错了什么。 keyboardNavigation模块代码是我在下面尝试过的

goog.provide('view.KeyboardNavigation');

/**
 * @constructor
 * @extends {goog.events.EventHandler}
 */
view.KeyboardNavigation = function(component){
    this.componentContainer = component;
}
goog.inherits(view.KeyboardNavigation, goog.events.EventHandler);

view.KeyboardNavigation.prototype.componentContainer = null;

view.KeyboardNavigation.prototype.enterDocument = function(){
    console.log("1");
    this.listen(this.componentContainer.getElement(),goog.events.EventType.CLICK, goog.bind(this.handleKeyEvent, this), false);
}

view.KeyboardNavigation.prototype.handleKeyEvent = function(event){
    console.log("2");
}

1 个答案:

答案 0 :(得分:0)

乍一看有几个问题..一,我认为你可能希望goog.events.EventTarget不是goog.events.EventHandler(这是一个非常有用的类,但通常用作成员而不是子类 - EventTarget是您可能正在考虑的更传统的实现方式)。第二,你不要在你的构造函数中调用super(或者更确切地说是goog.base)......