JavaScript #11

8748 ワード
JavaScript テキストリンク
210803
JavaScript #11
前回コードを実行したとき、フォームの基本的な動作はsubmitであることがわかりました.
  • リンクのデフォルトの動作?
    • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>MOO App</title>
    </head>
    <body>
        <form id="login-form">
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button>
        </form>
        <a href="https://blog.naver.com/epiclog">Visit my Blog</a>
        <script src="app.js"></script>
    </body>
</html>

    これにより、リンクが表示されクリックすると、対応するページに移動します.
    そこで、基本的な動作はボタンをクリックしたときに別のページに移動することです.
    -app.js
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

const link = document.querySelector("a")

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

function handleLinkClick(){
  alert("clicked!")
}
loginForm.addEventListener("submit",onLoginSubmit)

link.addEventListener("click",handleLinkClick)
    リンクをクリックすると警告ウィンドウが表示されます.

    基本アクション「ページ移動」は実行されていません.
    ここで確認ボタンを押します

    ページ移動
    すなわち、基本動作が実行される.
    JSはリンクをクリックして関数を実行します.つまり、私が実行させたのではありません.すなわち,JSに関数の名前を与え,実行はJSの一部である.
    また,objectを実行するだけでなく,最初のパラメータとして関数に置く.
    (このオブジェクトには、実行したばかりのイベントの情報が含まれます.)
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

const link = document.querySelector("a")

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

function handleLinkClick(event){
  console.log(event)
  alert("clicked!")
}
loginForm.addEventListener("submit",onLoginSubmit)

link.addEventListener("click",handleLinkClick)
    console.log(event)で情報を受信して出力すると、MouseEventが表示されます.


    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    [Hellcoders]Study 8日目
    JAva同時(二):syncronizedの初期プローブ