javascript - 用于输入的 document.forms 名称选择器在 JavaScript DOM 中如何工作？

Question

在 Meteor 的待办事项应用程序教程中，有一个示例:

  Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();

      // Get value from form element
      var text = event.target.text.value;

      [...]
    }
  });

这是相关的 HTML:

  <form class="new-task">
    <input type="text" name="text" placeholder="Type to add new tasks" />
  </form>

令我惊讶的是event.target.text.value是一个有效的选择器，尽管 text不是 event.target 的属性目的。

有人可以向我解释为什么它是有效的吗？

Answer 1

在代码片段的上下文中，event.target 是对表单的引用。

event.target.text 是对名称为“text”的表单元素的引用，该引用将传递给表单元素内的输入集合中的回调。

Note: This is a unique attribute of forms, for backwards-compatibility with the pre-DOM document.forms collection, which references forms and their input elements by name rather than by id. For example, you can reference the search form input on this page using document.forms.search.q