2021-05-25

[Lichen5221]

表單事件處理 onSubmit

在表單送出的時候觸發事件，確認表單是否能送出。

// 前面是建置輸入帳號密碼的 html 語法

const element = document.querySelector('.login-form')
element.addEventListener('submit', function(e) {
  alert('submit!')
})

const element = document.querySelector('.login-form')
element.addEventListener('submit', function(e) {
  e.preventDefault( ) // 不管如何提交都不會成功，阻止瀏覽器送出。
})

const element = document.querySelector('.login-form')
element.addEventListener('submit', function(e) {
  const input1 = document.querySelector('input[name=password]')
  const input2 = document.querySelector('input[name=password2]')
  if (input1.value !== input2.value) {
    alert('密碼錯誤')
    e.preventDefault()
  } // 密碼不同時禁止瀏覽器送出表單。
})

preventDefault

阻止瀏覽器預設的行為，比如說連結是去連結的網址，但設定後就不會連結。也可以透過此來設定禁止輸入什麼字。

事件傳遞機制簡介 & 詳解

addEvent('.outer') // 寫好函式就可以直接使用
addEvent('.inner')
addEvent('.btn')

function addEvent(className) { // 因為要監聽很多個事件但不想重複，所以寫一個函式來表示監聽事件。
  document.querySelector(className)
    .addEventListener('click', function () {
      console.log(className)
    })
}

層層疊疊的關係，所以如果點最裡層（.btn），外層通通都會含括被點到（.inner & .outer）。

先捕獲再冒泡。

好文推薦點我

stopPropagation

冒泡像回報給長官，如果不想讓事件繼續傳遞下去，可以停止。

如果設置在第一個，後續事件就都不會執行。

可以在同一個按鈕上有不同的監聽事件。

stopImmediatePropagation 可以阻止同一層中第二個事件被觸發。