Estoy siguiendo una clase en línea y el tutor apunta a un documento <button> en el que realmente no entiendo cómo lo hizo porque usó un document.querySelector para apuntar al padre y eso es todo.
<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>
luego escribió:
document.querySelector('form').addEventListener('submit', function(event) { /* ... */ })
para mí, lo que entiendo es que querySelector solo seleccionará el firstChild en este caso.
El código solo tiene como objetivo el <form> y agrega un oyente para el evento de submit .
No tiene como objetivo ningún <button> .
En realidad, no agrega oyentes a ningún botón. Lo que confundió fue que <form> tenía un detector de eventos onsubmit . Dado que solo hay un botón en el formulario, su atributo de type se configura automáticamente para submit , lo que activa el evento form.onsubmit cada vez.
Además, el código está un poco mal. Abres un div, un formulario, y antes de cerrar el formulario, cierras el div. Si eso lo hizo la persona que dirige el curso, recomendaría dejar de ver ese curso en general, ya que puede confundir mucho...