JavaScriptでclickイベントを設定する(複数やコードから実行など)

JavaScriptを使って、HTML要素にクリック(click)イベントを設定する方法について説明します。
実際に動くサンプルを使って、以下の操作を解説します。

・clickイベントをつける方法
・clickイベントで複数処理をしたい
・clickイベントをコードから実行(発火)するには？
・clickされた要素を取得するには？

clickイベントをつける方法

HTML要素やコードの中で、clickイベントをつける方法についてです。

DOMにonclickを使ってイベントをつける

HTMLのonclick属性を使用して、直接イベントを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onclick Example</title>
</head>
<body>
    <button id="myButton" onclick="handleClick()">クリックして!</button>
    <script>
        function handleClick() {
            alert('ボタンがクリックされました!');
        }
    </script>
</body>
</html>

HTMLの解説

buttonタグにonclick属性を追加しています。

属性の値にはhandleClick関数を指定しています。
これでクリックされたときにhandleClick関数が実行されます。

JavaScriptの解説

handleClick関数は、クリックされたときにアラートを表示するだけです。
このようにして、onclick属性を使うことで、簡単にクリックイベントを設定できます。

addEventListenerを使ってイベントをつける

addEventListenerメソッドを使って、イベントリスナーを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>addEventListener Example</title>
</head>
<body>
    <button id="myButton">クリックして!</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('ボタンがクリックされました!');
        });
    </script>
</body>
</html>

HTMLの解説

buttonタグにIDを設定して表示しているのみです。
addEventListenerメソッドを使ってクリックイベントを設定します。

JavaScriptの解説

まず、「document.getElementById('myButton')」でボタンの要素を取得します。
そして、addEventListenerを使って、ボタンにクリックイベントを設定します。

第1引数にイベント名を記載して、第2引数に処理を書きます。
今回はclickイベントなので、clickを指定しています。処理としてはアラートを表示しているだけです。

このようにaddEventListenerメソッドを呼び出すことで、clickイベントを設定できます。

clickイベントで複数処理をしたい

clickイベントで、複数の処理を実行する方法についてです。

DOMのonclickで複数処理を実行する

onclick属性に複数の関数を呼び出すコードを記述することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Multiple Handlers with onclick</title>
</head>
<body>
    <button id="myButton" onclick="firstFunction(); secondFunction();">クリックして!</button>
    <script>
        function firstFunction() {
            console.log('最初の処理');
        }

        function secondFunction() {
            console.log('次の処理');
        }
    </script>
</body>
</html>

HTMLの解説

buttonタグにonclick属性を設定しています。
そして、複数の関数をセミコロンで区切って、firstFunction関数の呼び出しとsecondFunction関数を呼び出しています。

JavaScriptの解説

firstFunctionとsecondFunctionの両方がボタンのクリック時に実行されます。
コンソールで、実行されたことがわかるように、メッセージを出力しました。

実行すると、firstFunction関数・secondFunction関数の順に、先頭から関数が実行されることが確認できます。
このようにセミコロンで区切って、複数の関数を指定することができます。

addEventListenerで複数処理を実行する

addEventListenerメソッドを使うことでも、複数のイベントリスナーを追加することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Multiple Handlers with addEventListener</title>
</head>
<body>
    <button id="myButton">クリックして!</button>
    <script>
        let button = document.getElementById('myButton');
        button.addEventListener('click', function() {
            console.log('最初の処理');
        });

        button.addEventListener('click', function() {
            console.log('次の処理');
        });
    </script>
</body>
</html>

HTMLの解説

buttonタグにIDを設定して、表示しています。
ボタンに対して、複数のイベントを登録して、ボタンを押すと登録された順に実行されます。

JavaScriptの解説

addEventListenerメソッドを使って、複数のclickイベントを要素に対して、追加しています。

追加された順番で実行されます。
ボタンをクリックすると、「最初の処理」・「次の処理」とメッセージが表示されることが確認できます。

if文で分岐したり、ループの中でaddEventListenerを使うこともできます。
そのため、動的にイベントをつけたいときには、この方法が良いかと思います。

clickイベントをコードから実行(発火)するには？

JavaScriptを使って、クリックイベントをコードから実行する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Trigger Click Event</title>
</head>
<body>
    <button id="myButton">クリックして!</button>
    <button id="triggerButton">クリックイベントを発火</button>
    <script>
        let button = document.getElementById('myButton');
        let triggerButton = document.getElementById('triggerButton');

        button.addEventListener('click', function() {
            console.log('ボタンがクリックされました!');
        });

        triggerButton.addEventListener('click', function() {
            button.click();
        });
    </script>
</body>
</html>

HTMLの解説

buttonタグにIDを設定し、2つのボタンを用意しています。

1つ目のボタンは、単純にクリックされたらメッセージが出力されるボタンです。
2つ目のボタンは、1つ目のボタンの処理を発火するボタンです。

JavaScriptの解説

「id="triggerButton"」がついているボタンをクリックします。
そうすると、1つ目のbutton要素のclick()メソッドを使って、ボタンのクリックイベントをプログラムから発火します。

これにより、「id="triggerButton"」がついているボタンをクリックすると、「id="myButton"」のクリックイベントが実行されます。

clickされた要素を取得するには？

クリックされた要素を取得するには、イベントオブジェクトを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Get Clicked Element</title>
</head>
<body>
    <button class="myButton">ボタン1</button>
    <button class="myButton">ボタン2</button>
    <button class="myButton">ボタン3</button>
    <script>
        let buttons = document.querySelectorAll('.myButton');
        buttons.forEach(button => {
            button.addEventListener('click', function(event) {
                console.log('クリックされた要素:', event.target);
            });
        });
    </script>
</body>
</html>

HTMLの解説

複数のボタンに同じクラスを設定しています。

JavaScriptの解説

最初にHTML要素のクラス名で、要素を全て取得しています。
その次の処理で、forEachメソッドを使って、ひとつずつ要素を取得してイベントリスナーでイベントを要素に対して追加しています。

要素を取得するには、クリックされた時の処理の引数でイベントを取得します。
そしてevent.targetプロパティを使用して、クリックされた要素を取得します。

JavaScriptでクリックイベントを設定する方法まとめ

JavaScriptを使ってクリックイベントを設定する方法などについて解説しました。
以下にポイントをまとめます。

・`onclick`属性を使った方法と、`addEventListener`メソッドを使った設定方法があった。
・`onclick`属性に複数の関数をカンマで区切って記述する方法と、`addEventListener`メソッドを使って複数のイベントリスナーを追加する方法があった。
・`click`イベントをコードから実行するには、`click`メソッドを呼び出して実行(発火)した。
・取得したイベントの`event.target`プロパティを使うと、クリックされた要素を取得できた。