JavaScript 網頁事件處理 1

eventListener、event(e)、onSubmit

eventListener 與 callback function

const element = document.querySelector('#block')
element.addEventListener('click', onClick)

function onClick() {
    alert('click')
}

event(e) 是什麼碗糕？

把 e log 出來看

const element = document.querySelector('#block')
element.addEventListener('click', function(e){
    console.log(e)
})

這個 e 就是 MouseEvent，裡面有這個 event 的詳細資訊

舉例 : 使用 .target 代表我點了哪個元素，click 也可以換成 keydown 之類的。

const element = document.querySelector('#block')
element.addEventListener('click', function(e){
    console.log(e.target)
})

const element = document.querySelector('input')
element.addEventListener('keydown', function(e){
    console.log(e.key)
})

按按鈕，背景換紅色

<head>
  <style>
    .active {
      background: black;
    }
  </style>
</head>

<body>
  <div>
    <button class='change-btn'>change</button>
  </div>

  <script>
    const element = document.querySelector('.change-btn')
    element.addEventListener('click', function (e) {
      document.querySelector('body').classList.toggle('active')
    })
  </script>
</body>

表單事件處理 onSubmit

<form class="login-form">
    <div>
      username : <input name="username" />
    </div>
    <div>
      password : <input name="password" type="password" />
    </div>
    <input type="submit" />
  </form>
  <script>
    const element = document.querySelector('.login-form')
    element.addEventListener('submit', function (e) {
      alert("成功提交")
    })
  </script>

提交以後會出現在網址上，就等同於 <form class="login-form" method='GET' action=''>

如果不想送出表單
更改成 :

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

可以用哪呢 ? 可以設計成密碼輸入不一樣時，不讓表單送出

 <form class="login-form">
    <div>
      username : <input name="username" />
    </div>
    <div>
      password : <input name="password" type="password" />
      password : <input name="password2" type="password" />
    </div>
    <input type="submit" />
  </form>
  <script>
    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()
      }
    })
  </script>

其他例子
可以加一個超連結 <a href='/test'>link</a>，變成點連結都不會有反應

    const element = document.querySelector('a')
    element.addEventListener('click', function (e) {
      e.preventDefault()
    })

不讓使用者輸入 a

   const element = document.querySelector('input[name=username]')
    element.addEventListener('keypress', function (e) {
      if (e.key === 'a') {
        e.preventDefault()
      }
    })