[菜鸟笔记]认识 event.preventDefault()

<接续Alpha Camp 学期2-2 Movie List 的笔记>

认识 event.preventDefault()
我要来测试在点选(提交submit) Search按钮时侯，可不可以出现我要的东西

searchForm.addEventListener('submit', function onSearchFormSubmitted(event) {  console.log('click')// for test  // 页面出现了重新整理，但是资料重整后不见就消失，无法出现。   })

有出现这个问号，代表页面被重新整理过

让我们再看一下form 的程式码:
(小补充: HTML的form 是用来收集"user input"，通常都是送去serve做处理)

<form class="row row-cols-lg-auto g-3 align-items-center mb-2" id="search-form">        <div class="col-12">          <label class="visually-hidden" for="search-input">            Search Keyword          </label>          <input type="text" class="form-control" id="search-input" placeholder="Keyword..." />        </div>        <div class="col-12">          <button type="submit" class="btn btn-primary" id="search-submit-button">            Search          </button>        </div></form>

浏览器有对某网页元素设定的预设行为，例如:点击 a 元素的时候会连到新的网页
而这里点击form 里的 button type = "submit" 时，也会自动跳页，并且将表单内容提交给远端伺服器(如果有设定method 或action 属性的话，没有设定 action 则会重新导向当前页面)
所以，在这里我们希望页面不会被重新刷新，所以我们要加入一个 event.preventDefault()在前面

searchForm.addEventListener('submit', function onSearchFormSubmitted(event) {  event.preventDefault()  console.log('click')// for test  // 页面出现了重新整理，但是资料重整后不见就消失，无法出现。 故要使用event.Preventdefault()})

这次就能出现click了~~

event.preventDefault()会请浏览器终止元件的预设行为，把控制权交给JavaScript