Question

我正在使用Google Closure中的项目，并且我希望将事件侦听器附加到查询选择器，以便它们同样适用于动态添加的元素。如果我使用jQuery，我可能会做类似的事情：

$(document).on('click', '.targetclass', function(e) {...});

我无法在Google Closure库中找到有关类似功能的任何文档。我想这样的事情可以轻松构建，你可以将处理程序注册到一些全局处理程序列表，但考虑到这种模式有多常见，如果我不重新发明轮子，我会感到非常惊讶。

Google Closure中有这样的东西吗？

Answer 1

查看以下代码，作为参考。

通常，事件处理程序放在从goog.ui.Component继承的enterDocument函数下。 targetEl_在createDom（）中以动态方式添加，并且在进入DOM后附加事件处理程序。

// sample.js    
goog.provide('my.page.Sample');


goog.require('goog.dom');
goog.require('goog.ui.Component');

/**
 * @constructor
 * @returns {my.page.Sample}
 */
my.page.Sample = function() {
    goog.base(this);
    this.targetEl_ = null;
};
goog.inherits(my.page.Sample, goog.ui.Component);


/** 
 * Creates the DOM elements and appends to the element referred while calling render() in test.js
 * @inheritDoc
 */
my.page.Sample.prototype.createDom = function() {
    this.targetEl_ = goog.dom.createDom(goog.dom.TagName.DIV, {"class": "targetElClass"});
    this.setElementInternal(targetEl_); 
};

/** 
 * Called after the components elements are known to be in the document.
 * @inheritDoc
 */
my.page.Sample.prototype.enterDocument = function() {
    goog.base(this, 'enterDocument');
    goog.events.listen(this.targetEl_, goog.events.EventType.CLICK, this.handleClicked_, false, this);

};

/**
 * @private
 * @param  {Event} event
 */
my.page.Sample.prototype.handleClicked_ = function(event) {
    // Handle the event here.
};


// test.js

goog.provide('my.page.Test');

goog.require('my.page.Sample');
test.init = function(sel) {
    var el = document.querySelector(sel);
    var myPage = new my.page.Sample();
    myPage.render(el);
};

Google Closure相当于jQuery＆＃34; .on（）＆＃34;

1 个答案: