4.3 Events (2)
講義
前回の授業でformの基本的な動作はsubmitでした.
では、リンクの基本的な動作は何でしょうか.
=リンクの基本動作は、クリックしたときに別のページに移動することです.
基本的な動きを防ぐために、JSファイルにコードを書きに行きましょう!!
(ちなみにこれは説明のためのリンクなので、classやidなどは設定しません.)
私たちは時々基本的な動作を阻止する必要があります.何をクリックしたのか、どこをクリックしたのか知りたいことがあります.このときJSは実行関数だけでなく,JSは関数を実行すると同時に最初のパラメータとしてobjectを関数に入れる.これがルールです.また,このobjectには,発生したばかりのイベントに関する様々な情報が含まれている.これはJSが無料でくれたものです.このオブジェクトはEventListener関数の最初のパラメータとして与えられます.私たちがしなければならないのは受け入れるだけで、席を提供すればいいです.
Eventって!エラーではありませんが、少し違う結果を出力しているようです.
MouseEventはクリック位置のX,Y座標を表示しています.これは非常に重要な情報です.プレイヤーがどこをクリックしたかを知る必要があるからです.
=>ご覧のように、活動から得られる様々な情報が存在し、様々な活動が存在します.
再度、最も重要なのはaddEventListenerの関数が直接実行されないことです.私が作ったのではなく、ブラウザが作ったのです.ブラウザは実行されるだけでなく、イベントに関する情報も含まれます.位置を作成するだけで、この情報にはいくつかの関数があります.
今は
わあ、でも私は本当に理解しています.以前初めて勉强した时、この部分を知らずに胜手にめくってしまいました.Niko最高です.(;´༎ຶД༎ຶ`)
前回の授業で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最高です.(;´༎ຶД༎ຶ`)
Reference
この問題について(4.3 Events (2)), 我々は、より多くの情報をここで見つけました https://velog.io/@kangmin01/4.3-Events-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol