Google 等效于 jQuery 的“.on()”

Question

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

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

我一直无法在 Google Closure 库中找到任何关于类似功能的文档。我想这样的东西可以很容易地构建，您可以在其中将处理程序注册到一些全局处理程序列表，但考虑到这种模式的普遍性，如果我没有重新发明轮子，我会感到非常惊讶。

Google闭包中有这样的东西吗？

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 等效于 jQuery 的“.on()”

Google Closure equivalent of jQuery's ".on()"

javascript

event-handling

google-closure-library