はじめに
JavaScript のドキュメントへようこそ！この実験では、イベントについて紹介します。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
イベント
VM には既に
index.htmlが用意されています。
ウェブサイトで本当のインタラクティビティを実現するには、イベントハンドラが必要です。これらは、ブラウザー内のアクティビティを監視し、その応答としてコードを実行するコード構造です。最も明白な例は、クリックイベントを処理することです。これは、マウスで何かをクリックしたときにブラウザーによって発火されます。これを示すために、コンソールに次のコードを入力してから、現在のウェブページをクリックしてください：
document.querySelector("html").addEventListener("click", function () {
alert("Ouch! Stop poking me!");
});
要素にイベントハンドラを追加する方法はいくつかあります。
ここでは、<html> 要素を選択しています。その後、そのaddEventListener() 関数を呼び出し、監視するイベントの名前 ('click') とイベントが発生したときに実行する関数を渡します。
ここで addEventListener() に渡した関数は、名前がないため 匿名関数 と呼ばれます。匿名関数を書く別の方法があり、これを アロー関数 と呼びます。
アロー関数は () => を使って function () の代わりに書きます：
document.querySelector("html").addEventListener("click", () => {
alert("Ouch! Stop poking me!");
});
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
まとめ
おめでとうございます！イベントの実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。