No.2バニラJSを使ったChromeアプリの作成

22306 ワード
JavaScript vanilascript nomad coder ババリアのシナリオ JavaScript レコーダなし テキストリンク

Events


今、ボタンにかかわらずsubmitイベントの発生を阻止したり、中間の介入による状況を理解しようとしたりします.
//js

//button과 관련된 필요없는 코드는 지웠다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

//button이 아닌 form으로 수정
function onLoginSubmit() {
    const username = loginInput.value;
    console.log(username);
}

//submit을 감지해야하기 때문에 submit에 대한 코드 작성
//submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다!
loginForm.addEventListener("submit", onLoginSubmit);
今はコードが作成されていますが、娯楽をしている間に、書かれた内容はあっという間に消えてしまいました.(コンソールに出てくる内容を撮りたいのですが、消えるスピードがとても速いです.🤯)
消えたのはリフレッシュのためで、これはformsubmitの基本的な動作です.
この基本的な動作を回避するにはどうすればいいですか?その方法はjsで動作を制御する.addEventListenerを追加するときにonLoginSubmitを使用しませんでした.これは、()が貼り付けられるとすぐに実行関数になり、submitイベントが発生するとonLoginSubmitが自分で実行されるので、すぐに実行する必要はありません.
addEventListenerを使用している間はすぐに実行したくないので、関数名を書くと、ブラウザは指定したイベントが発生したときに実行します.このときfunctionは、空き状態で実行するのではなく、ブラウザでブラウザイベントの情報を取得しています.(イベントは1つではなく複数のイベント情報です)取得するイベントを決定するには、次の手順に従います.
//js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
   //어떤 정보를 넘겨주는지 확인하는 코드!
   //보통 관행적으로 event라고 쓴다.
    event.preventDefault();
    console.log(event);
 
    //const username = loginInput.value;
}

loginForm.addEventListener("submit", onLoginSubmit);

要するに、addEventListener関数(ここではonLoginSubmit)を使用する場合、最初のパラメータはjsによって生成される情報を伝達するものと考えられる.🤨
上のコードから見ると、preventDefaultという方法があり、この方法はいくつかのイベントの基本的な動作を阻止することができます.(デフォルトの動作は、ブラウザが機能に対して実行するデフォルトの動作です!ここではsubmitとリフレッシュ)リフレッシュとコンソールをブロックするために、次のコードを作成できます.ログに残っているかどうか見てみましょう.
//js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

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

loginForm.addEventListener("submit", onLoginSubmit);

理解しやすいように、linkをブロックする方法を理解して、まず以下のコードを書きます!
<!--html-->
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>

<body>
  	<!--form은 잠시 생략-->
    <a href="https://nomadcoders.co/">노마드 코더👩‍💻</a>
    <script src="app.js"></script>
</body>

</html>
aリンクをクリックすると、もちろんNomad Coderサイトに接続されます.jsのpreventDefaultでリンクのアクセスを阻止しましょう.(=基本動作をブロック)
まず、alertがデフォルトの動作をブロックできるかどうかを確認するには、次のコードを作成します.
//js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

//하나의 링크만 존재하기 때문에 이렇게 써도 상관없다.
const link = document.querySelector("a");

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

//alert를 통해 노마드 코더 사이트를 들어가지 못하게 막았지만 동작이 끝나면 여전히 노마드 코더 사이트로 들어가진다.
function handleLinkClick() {
    alert("clicked");
}

loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

イベントをHandleLinkClickの最初のパラメータとして使用し、submitイベントが発生したときに示すようにコンソールを再度呼び出します.ロゴで撮ったときに何が起こるか見てみましょう.
//js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form 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);

submitとは異なり、動画にMouseEventが表示されますが、私が受け取ったのはPointerEventです.だから検索してみると、mouseとpointereventには違いがなく、pointereventにはより多くの機能が含まれており、電子機器の多様化に伴い、より多くの機能を使用するために現れたようだ.
https://javascript.info/pointer-events
いずれにしても、最終的に作成するコードは次のとおりです.
//js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

const link = document.querySelector("a");

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

function handleLinkClick(event) {
	event.preventDefault();
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

コンソールウィンドウにはpathが表示され、arrayによってクリック時に何が起こったのか、どこで何が起こったのかが表示されます.(window > document > html > body > a)
[Spring MVC] [1] 7. Spring MVC-Webページ作成2
[プログラマー/MySQL]IS NULL