JavaScript イベント | ウェブ開発チュートリアル

はじめに

JavaScript のドキュメントへようこそ！この実験では、イベントについて紹介します。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/data_types -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/comp_ops -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/functions -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/closures -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/dom_select -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/event_handle -.-> lab-106901{{"JavaScript イベントの紹介"}} javascript/bom -.-> lab-106901{{"JavaScript イベントの紹介"}} end

イベント

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 でさらに多くの実験を行って練習してください。