JavaScript #10

2011 ワード
テキストリンク
210803
JavaScript #10
前回のコンテンツに続くフォームのsubmitで問題を解決します.
内容を入力するときにボタンを押すか、Enterを押して自動的にコミットしてリフレッシュします.
const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

function onLoginSubmit(){
  const username = loginInput.value
  console.log(username)
}

loginForm.addEventListener("submit",onLoginSubmit)
コンソールウィンドウを確認すると、入力した値が表示され、瞬時に消えます.(更新)
ブラウザでは、ユーザーがボタンを押したりログインしたりしたときにフォームをリフレッシュしてコミットできます.
onLoginSubmitのような関数はどのように動作しますか?
JSは基本的に関数を呼び出すパラメータを持つ.このパラメータには、基本情報が表示されます.
const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

function onLoginSubmit(info){
  // const username = loginInput.value
  // console.log(username)
  info.preventDefault() // 어떤 event의 기본 핻옹이 발생되지 않도록 막는 역할
  console.log(info)
}

loginForm.addEventListener("submit",onLoginSubmit)

ブラウザからのメッセージ.
onLoginSubmitという名前の関数を作成し、関数にパラメータを受け入れさせます.そしてそれをJSに渡します.

これらは、実行したばかりのイベントに関する情報です.
  • preventDefault()
    注釈に書かれているように、いかなる事件の発生を防止する基本的な行為としての役割を果たす.
    • const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

function onLoginSubmit(event){
  event.preventDefault()
  console.log(loginInput.value)
}

loginForm.addEventListener("submit",onLoginSubmit)
    これにより、ページのリフレッシュのデフォルトの動作がブロックされます.
    console.logがそのまま出力されている状態が見えます.

    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    グレイコード+微信のお年玉を生成
    Programers:株価(スタック)