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

JavaScriptのDOMイベントとは？基本の使い方をサンプルコードで解説

JavaScriptでは、ユーザーがマウスをクリックしたとき、画像の読み込みが完了したとき、HTMLフォームが送信されたときなど、ページ上で何らかの出来事（イベント）が発生したタイミングでスクリプトを実行できます。イベントはDocument Object Model（DOM）Level 3の一部として定義されており、すべてのHTML要素には対応するイベントが用意されていて、それらをきっかけにJavaScriptコードを呼び出すことができます。

イベントハンドラの基本例

まずは最もシンプルな例として、イベントハンドラから関数を呼び出してテキストを書き換えるコードを見てみましょう。次のサンプルでは、段落をクリックすると myEvent 関数が実行され、表示されているテキストが「Welcome!」に置き換わります。

<!DOCTYPE html>
<html>
    <body>
        <p onclick="myEvent(this)">クリックしてください</p>
        <script>
            function myEvent(id) {
                id.innerHTML = "Welcome!";
            }
        </script>
    </body>
</html>

代表的なイベントタイプ

ここからは、イベントとJavaScriptの関係をつかむために、特によく使われるイベントタイプの例をいくつか紹介します。

onclickイベント

onclickは最も使用頻度の高いイベントタイプで、ユーザーがマウスの左ボタンをクリックした瞬間に発生します。入力内容のバリデーション（検証）や警告メッセージの表示など、さまざまな処理をこのイベントに結び付けることができます。

次の例では、ボタンをクリックすると sayHello 関数が呼び出され、アラートダイアログが表示されます。

<html>
    <head>
        <script>
            function sayHello() {
                alert("こんにちは世界");
            }
        </script>
    </head>
    <body>
        <p>下のボタンをクリックして結果を確認してください</p>
        <form>
            <input type="button" onclick="sayHello()" value="あいさつする" />
        </form>
    </body>
</html>

onmouseover・onmouseoutイベント

この2つのイベントタイプを組み合わせると、画像やテキストに対して手軽に演出効果を加えられます。onmouseoverはマウスカーソルが要素の上に乗った瞬間に発生し、onmouseoutは要素からカーソルが離れた瞬間に発生します。

次の例では、div要素の上にマウスを乗せると「マウスオーバー」、外れると「マウスアウト」というテキストが表示されます。

<html>
    <head>
        <script>
            function over() {
                document.write("マウスオーバー");
            }
            function out() {
                document.write("マウスアウト");
            }
        </script>
    </head>
    <body>
        <p>枠内にマウスカーソルを入れて結果を確認してください</p>
        <div onmouseover="over()" onmouseout="out()">
            <h2>これはdiv要素の中です</h2>
        </div>
    </body>
</html>

補足：addEventListenerによる現代的な書き方

HTML属性に直接イベントハンドラを記述する方法は手軽ですが、現在では addEventListener メソッドを使ってJavaScript側でイベントを登録するスタイルが主流になっています。HTMLとロジックを分離できるほか、1つの要素に複数のハンドラを登録できるのも大きなメリットです。

document.getElementById("btn").addEventListener("click", function () {
    alert("こんにちは世界");
});

まとめ

DOMイベントを活用すれば、クリックやマウス操作といったユーザーのアクションに応じて、ページの挙動を柔軟に制御できます。まずは onclick などの基本イベントから試してみて、慣れてきたら addEventListener を使った実装にも挑戦してみてください。

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

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

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

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