5.5 表單事件及停止元素預設行為

透過事件物件來停止預設行為

寫法：

e.preventDefault();

範例：連結

連結本身的預設行為是開啟連結，但因為某些情況下，不方便改成其它結構，那就可以先透過 JS 來停止其「開啟連結」這樣的預設行為。例：

練習：表單

需建立網頁檔來測試。

通常欄位上的資料，在送出前，都要先經過驗證，例如欄位必填，如果使用者未填資料，就要先停掉「資料送出」的預設行為。

表單的 submit 事件

html：

<form action="#" method="get" id="my_form">
  <input type="text" id="my_text">
  <button type="submit">資料送出</button>
</form>

JS: 表單的 submit 事件：

var my_form = document.getElementById("my_form");
my_form.addEventListener("submit", function(e){
  // 資料送出時，執行這裡的程式
});

表單的停止預設行為

例：