title: How does eventlistener work in this code?
body: <p>From using <code>querySelector</code>, querying a form element and adding an event listener to the latter, I want to understand how the submit button is involved. Is it because the submit button is what gives meaning to the form? And please provide me with some good resources on JavaScript and DOM scripting. Thanks and regards.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// const taskInput = document.getElementById('task');
  // const heading = document.querySelector('h5');
  
  function handleEvent(evt) {
    evt.preventDefault();
  
    const { type, target } = evt;
    console.log({ type, target });
  }
  const form = document.querySelector('form');
  
  // submit
  form.addEventListener('submit', handleEvent);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col s12"&gt;
        &lt;div id="main" class="card"&gt;
          &lt;div class="card-content"&gt;
            &lt;span class="card-title"&gt;Task List&lt;/span&gt;
            &lt;div class="row"&gt;
              &lt;form id="task-form"&gt;
                &lt;div class="input-field col s12"&gt;
                  &lt;input type="text" name="task" id="task" value="Walk the dog"&gt;
                  &lt;label for="task"&gt;New Task&lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;input type="submit" value="Add Task" class="btn"&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="card-action"&gt;
            &lt;h5 id="task-title"&gt;Tasks&lt;/h5&gt;
            &lt;ul class="collection"&gt;
              &lt;li class="collection-item"&gt;
                List Item
                &lt;a href="#" class="delete-item secondary-content"&gt;
                  &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                &lt;/a&gt;
              &lt;/li&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>