JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのイベントとは？仕組みと使い方を初心者向けに解説

JavaScriptのイベントとは

JavaScriptとHTMLの連携は、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて実現されます。

たとえば、ページが読み込まれたとき、それはイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもまたイベントとなります。このほかにも、キーの押下、ウィンドウを閉じる操作、ウィンドウサイズの変更など、さまざまなアクションがイベントとして扱われます。

イベントはDocument Object Model（DOM）Level 3の一部として定義されており、すべてのHTML要素には、JavaScriptのコードを実行できる一連のイベントが用意されています。

主なイベントの種類

JavaScriptでよく使われる代表的なイベントには、以下のようなものがあります。

  • onclick：要素がクリックされたときに発生
  • onload：ページや画像の読み込みが完了したときに発生
  • onkeydown / onkeyup：キーを押した・離したときに発生
  • onmouseover / onmouseout：マウスカーソルが要素に乗った・離れたときに発生
  • onsubmit：フォームが送信されるときに発生
  • onresize：ウィンドウのサイズが変更されたときに発生

onclickイベントのサンプルコード

ここでは、JavaScriptで最も頻繁に使われるイベントタイプである「onclick」イベントの例を見てみましょう。このイベントは、ユーザーがマウスの左ボタンをクリックしたときに発生します。

このイベントに対しては、入力値の検証や警告メッセージの表示など、任意の処理を組み込むことができます。

<html>
    <head>
        <script>
            <!--
                function sayHello() {
                    alert("Hello World")
                }
           //-->
        </script>
    </head>
    <body>
        <p>次のボタンをクリックすると、結果が表示されます</p>

        <form>
            <input type = "button" onclick = "sayHello()" value = "Say Hello" />
        </form>
    </body>
</html>

コードの解説

ボタン要素のonclick属性に、クリック時に実行したい関数「sayHello()」を指定しています。ボタンがクリックされると、関数が呼び出され、アラートダイアログに「Hello World」というメッセージが表示されます。

このように、HTML要素にイベントハンドラを設定するだけで、ユーザーの操作に応じた動的な処理を簡単に実装できます。まずはonclickイベントから試してみるのが、JavaScriptのイベント処理を理解する第一歩となるでしょう。

  1. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が

  2. C#のイベントとは？基本の仕組みと使い方を実例付きで解説

    C#におけるイベント（Event）とは、キーの押下、マウスのクリックや移動といったユーザー操作、あるいはシステムが生成する通知など、プログラムの外部で発生した「出来事」を表す仕組みです。イベントはクラス内で宣言され、発生（raise）されます。そして、デリゲート（delegate）を介してイベントハンドラと関連付けられます。この関連付けは、同じクラス内でも別のクラスでも行うことが可能です。イベントを保持しているクラスは、そのイベントを外部に公開（パブリッシュ）する役割を担います。イベント宣言の基本手順クラス内でイベントを宣言するには、まずイベント用のデリゲート型を定義する必要があります。例えば