Прикрепление прослушивателей событий элемента ввода

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

Я знаю, что мог бы присоединить слушателя, используя входСелектор идентификатора (document.querySelector('#my-text-field').addEventListener(...)) напрямую, но хотел узнать, предоставляет ли сам компонент MDCTextField что-то для этой необходимости.

Спасибо!