4.3 Events (2)


講義
前回の授業でformの基本的な動作はsubmitでした.
では、リンクの基本的な動作は何でしょうか.
=リンクの基本動作は、クリックしたときに別のページに移動することです.
基本的な動きを防ぐために、JSファイルにコードを書きに行きましょう!!
(ちなみにこれは説明のためのリンクなので、classやidなどは設定しません.)
私たちは時々基本的な動作を阻止する必要があります.何をクリックしたのか、どこをクリックしたのか知りたいことがあります.このときJSは実行関数だけでなく,JSは関数を実行すると同時に最初のパラメータとしてobjectを関数に入れる.これがルールです.また,このobjectには,発生したばかりのイベントに関する様々な情報が含まれている.これはJSが無料でくれたものです.このオブジェクトはEventListener関数の最初のパラメータとして与えられます.私たちがしなければならないのは受け入れるだけで、席を提供すればいいです.
<a href="https://nomadcoders.co">Go to courses</a>
const link = document.querySelector("a");
function handleLinkClick(event){
    console.log(event);
    alert("clicked!")
}
link.addEventListener("click",handleLinkClick);
レッスン出力MouseEvent.(PointerEventを出力します.)
Eventって!エラーではありませんが、少し違う結果を出力しているようです.
MouseEventはクリック位置のX,Y座標を表示しています.これは非常に重要な情報です.プレイヤーがどこをクリックしたかを知る必要があるからです.
=>ご覧のように、活動から得られる様々な情報が存在し、様々な活動が存在します.
const link = document.querySelector("a");
function handleLinkClick(event){
    event.preventDefault();
    console.dir(event);
}
link.addEventListener("click",handleLinkClick);
やっぱりコンソールdir(event); 终わったら情报が出てきた!!
再度、最も重要なのはaddEventListenerの関数が直接実行されないことです.私が作ったのではなく、ブラウザが作ったのです.ブラウザは実行されるだけでなく、イベントに関する情報も含まれます.位置を作成するだけで、この情報にはいくつかの関数があります.
今はevent.preventDefault();を理解すべきで、リンクを削除して、私たちはまた表に記入しましょう!
わあ、でも私は本当に理解しています.以前初めて勉强した时、この部分を知らずに胜手にめくってしまいました.Niko最高です.(;´༎ຶД༎ຶ`)