Google Closure entspricht jQuerys ".on()"

Question

Ich arbeite mit einem Projekt in Google Closure und möchte Ereignislistener an Abfrageauswahlelemente anhängen, damit sie auch für dynamisch hinzugefügte Elemente gelten. Wenn ich jQuery verwendet hat, könnte ich so etwas wie:

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

Ich habe nicht in der Lage gewesen, eine Dokumentation über eine ähnliche Fähigkeit in der Google-Closure-Bibliothek zu finden. Ich nehme an, solch eine Sache könnte leicht erstellt werden, in der Sie Handler zu einer globalen Liste von Handlern registrieren können, aber angesichts dessen, wie häufig dieses Muster ist, würde ich sehr überrascht sein, wenn ich das Rad nicht neu erfinden würde.

Gibt es so etwas in Google Closure?

Answer 1

Sehen Sie sich den folgenden Code an, der Ihnen als Referenz dient.

Normalerweise werden Ereignishandler unter die enterDocument-Funktion gestellt, die von goog.ui.Component geerbt wird. targetEl_ wird innerhalb von createDom() dynamisch hinzugefügt und der Event-Handler wird angehängt, nachdem er in das DOM gelangt ist.

// 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); 
};