コピペで使える!JavaScriptボタンクリックイベント

001-1

🎬初めに

お久しぶりです!!フューチャースピリッツ、エンジニアブログの中の人、「通行人 R」でございます。

皆様「JavaScript」ライフ送ってますでしょうか?

今回から新コーナーとして「コピペで使える!JavaScriptチートシート」講座を始めたいと思います。

主にweb制作に便利な実践向けのコードを記載していきたいと考えております!

シリーズ第一回目は「JavaScriptボタンクリックイベント」について皆様にお届け致します!!

📘ボタンクリックイベントとは？

002-1

初めにボタンクリックイベントとは？について簡単に説明させていただきます!!

ボタンクリックイベントとはHTMLのボタン要素をクリック(チェック)した場合をトリガーとして発生させるイベント(処理)となっております。

下記HTMLのボタンタグとなります。

<button>次へ</button>

実際にはボタンクリックをトリガーとして「ページの推移」や「要素の変更(DOM操作)」等の様々な用途で使用されております。

📘ボタンクリックイベント実装方法

003

ここまでお付き合い頂きありがとうございます!!

それでは、実装方法について解説させていただきます!

大まかな流れは以下のようになります。

要素の作成
定数の作成
イベントの作成

要素の作成とIDの付与

初めにIDを持つボタン要素を作成します。

今回は例として「test1」というIDを持つボタン要素を作成します。

#HTML

<button id="test1">クリック</button>

定数の作成と要素の格納

次にJavaScriptを使用し処理を書いていきます。

初めにconstを使用して定数を作成します。

今回は例として定数名は「BUTTON_CLICK_EVENT」として作成します。

定数の中身は「document.getElementById」を使用し上記にてボタン要素に付与したIDを指定し要素を取得格納します。

「document.getElementById」の詳細はmozillaドキュメントに記載されておりますのでご確認よろしくお願い致します。

document.getElementById詳細

#JavaScript

const BUTTON_CLICK_EVENT= document.getElementById('test1');

クリックイベントの作成

上記の手順で全てのパーツが揃いました。

次にクリックされた際の処理を作成していきます!!

「addEventListener()」メソッドを使用し対象のボタンがクリックされた際に動作する処理を作成します!

「addEventListener()」は()内で指定したイベントが配信されるたびに呼び出される関数となっております。詳細情報はmozillaドキュメントに記載されておりますのでご確認よろしくお願い致します。

addEventListener()詳細

要素は先程作成した定数を指定します。またトリガーには「click」を使用します。

#JavaScript

BUTTON_CLICK_EVENT.addEventListener('click');

上記のコードに「() => { }」を追記しクリックされた場合の処理を追記します。

#JavaScript

() => {
    //クリックされた場合の処理
}

下記が上記2点を組み合わせた完成版コードとなります。

#JavaScript

BUTTON_CLICK_EVENT.addEventListener('click', () => {
    //クリックイベント
});

完成コード

下記が完全コードとなります。

今回は例としてクリック時の処理にアラート機能を実装しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボタンクリックイベントを作成してみる</title>
</head>
<body>
    <button id="test1">クリック</button>
    <script>
        const BUTTON_CLICK_EVENT= document.getElementById('test1');
        BUTTON_CLICK_EVENT.addEventListener('click', () => {
            alert("ボタンがクリックされました");
        });
    </script>
</body>
</html>