我需要澄清从标记中定位元素

Question

我正在在线关注 class 并且导师针对<button>文档，我不太了解他是如何做到的，因为他使用document.querySelector来定位父母，仅此而已。

<div class="row">
    <form id="task-form" action="index.php">
        <div class="input-field col s12">
            <input type="text" name="task" id="task" value="">
            <label for="task">New Task</label>
        </div>
    </div>
    <button id="add" class="btn">Add</button>
</form>

然后他写道：

document.querySelector('form').addEventListener('submit', function(event) { /* ... */ })

对我来说，我的理解是querySelector在这种情况下只会firstChild是第一个孩子。

Answer 1

该代码只是针对<form>并为submit事件添加了一个侦听器。
它不针对任何<button> 。

Answer 2

他实际上没有向任何按钮添加侦听器。 你感到困惑的是<form>有一个onsubmit事件监听器。 由于表单中只有一个按钮，所以它的type属性会自动设置为submit ，使其每次都会触发form.onsubmit事件。

另外，代码有点错误。 您打开一个 div、一个表单，然后在关闭表单之前关闭该 div。 如果那是由开设课程的人制作的，我建议您停止观看该课程，因为它会造成很多混乱......