JS--要素のプロパティにイベントハンドラを登録する

要素のプロパティにイベントハンドラを登録する

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

■ DOM を使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。
基本的な使い方は HTML 要素の属性に対していイベントハンドラを登録する方法と似ていますが、 JavaScript のコードのみで実現することが出来る。

【要素オブジェクトのプロパティにイベントハンドラを登録す】
HTML 要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。
＜input type="button" value="button" onclick="イベントハンドラ"＞

DOM を使用すると
HTML ページの中の任意の要素を要素オブジェクトとして取得できます。そのあとで、要素オブジェクト（button）のプロパティ(onclick)に対してイベントハンドラを設定します。

HTML コードで記述された input タグには JavaScript のコードが含まれなくなり、イベントの処理は JavaScript のコードの中で完結することができました。

要素オブジェクトにはイベントの種類だけプロパティがあらかじめ用意されており、それぞれのプロパティ名は on + イベント名 となります。例えば click イベントに対しては onclick プロパティ、 mousedown イベントに対しては onmousedown プロパティに対してイベントハンドラを設定します。

サンプルーーHTML要素の属性としてイベントハンドラを設定した場合

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-cale=1.0"＞
    ＜title＞イベントハンドラのサンプル＜/title＞
＜/head＞
＜body＞
    ＜button onclick="alert('ボタンがクリックされました!')"＞クリックしてね　　　　　　　　＜/button＞
＜/body＞
＜/html＞

サンプル--DOMを使ってイベントハンドラを設定する場合

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
    ＜title＞プロパティを用いたイベントハンドラのサンプル＜/title＞
＜/head＞

    ＜button id="myButton"＞クリックしてね＜/button＞

    ＜script＞
        // ボタン要素を取得
        const button = document.getElementById('myButton');

        // 無名関数のイベントハンドラをプロパティに設定　　
        button.onclick = function() {
            alert('ボタンがクリックされました!');
        };
    ＜/script＞
＜/body＞
＜/html＞

どちらも、同じ結果になる

【イベントハンドラにコールバック関数を設定する】
HTML 要素の属性としてイベントハンドラを設定した場合は、
実行する JavaScript のコードを記述しましたが、プロパティにイベントハンドラを設定する場合は、イベントが発生した時に呼び出されるコールバック関数を設定します。

サンプル

ブラウザを立ち上げる

「button」をクリックすると、ポンプアップが立ち上がり、時間が表示される。

【イベントハンドラを無名関数やアロー関数を使って記述する】
イベントハンドラとして登録するコールバック関数は、無名関数を使って記述することもできます。

ブラウザを立ち上げ、交互にボタンを押す

無名関数をクリック

アロー関数をクリック

【イベントハンドラを解除する】
それぞれの要素オブジェクトにはイベントの種類の数だけプロパティが用意されており、イベントハンドラが登録されていない場合は null が格納されています。

イベントハンドラが登録されたプロパティに対してイベントハンドラを解除するには、プロパティに対して null を代入してください。

・書式：button.onclick = null;

サンプル

ブラウザを立ち上げる

ボタンをクリックしても、イベントハンドラは起動しない

【コールバック関数が呼び出される時にイベントの情報を受け取る】
イベントハンドラとしてコールバック関数を登録した場合(無名関数やアロー関数式でも同じです)、イベントが発生してコールバック関数が呼ばれるときに発生したイベントに関する情報が格納された Event オブジェクトが引数として渡されてきます。
イベントに関する情報を関数内で利用する場合は、コールバック関数で引数を記述してください。

サンプル

ブラウザを立ち上げる

クリックすると、表示される。
発生したイベントの種類とイベントが発生した要素の情報をコンソールに出力します。