jQuery의 ".on()"에 해당하는 Google Closure

Question

Google Closure에서 프로젝트를 진행하고 있으며 동적으로 추가 된 요소에 똑같이 적용되도록 이벤트 리스너를 쿼리 선택기에 연결하고 싶습니다. 나는 구글 폐쇄 도서관에서 비슷한 기능에 어떤 문서를 찾을 수 없었습니다

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

: 나는 jQuery를 사용한 경우, 뭔가 같이 할 수 있습니다. 나는 핸들러를 핸들러의 일부 글로벌리스트에 등록 할 수있는 그런 일을 쉽게 할 수 있다고 생각하지만, 휠을 다시 발명하지 않는다면이 패턴의 공통점을 생각해 보면 매우 놀랄 것입니다.

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