附加输入元素事件侦听器

Question

我正在尝试动手material-design-web text-field组件，并使基本的CSS和JS交互起作用。但是，我试图找到一种方法来将事件侦听器附加到已包装的input元素上，但并没有真正发现任何东西。

我尝试使用公开的listen方法附加事件侦听器，但似乎将其附加到rootElement。

HTML

<p>
  <div class="mdc-text-field">
    <input type="text" id="my-text-field" class="mdc-text-field__input">
    <label class="mdc-floating-label" for="my-text-field">Hint text</label>
    <div class="mdc-line-ripple"></div>
  </div>
  <div class="mdc-card mdc-card--outlined">
    <div class="entered-text"></div>
  </div>
</p>

JS

const textField = new MDCTextField(document.querySelector(".mdc-text-field"));

textField.listen("change", () => {
    (document.querySelector(".entered-text")).textContent = textField.value;
});

我知道我可以直接使用输入id选择器（document.querySelector('#my-text-field').addEventListener(...)来附加一个侦听器，但想知道组件MDCTextField本身是否可以满足此需求。

谢谢！