【JavaScript】click（ブラウザイベント） - クリック時のイベント

JavaScriptのclick（ブラウザイベント）について解説します。

検証環境

JavaScript -

macOS

14.1

click

clickは“クリックを表すイベント”です。

デスクトップパソコンのマウスクリックやスマートフォンのタップがこのイベントに該当します。

HTML属性

HTML属性でクリックイベントを登録するにはonclick属性を使用します。

基本構文

<タグ名 onclick="処理">

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

___ih_hl_start
<button id="btn" onclick="btn_event();">確認</button>
___ih_hl_end

<pre id="log"></pre>

<script type="text/javascript">

    function btn_event() {
        let log = document.getElementById('log');
        log.textContent = "Hello World.";
    }

</script>

プレビュー

８行目のonclick="btn_event();"がHTML属性を利用したクリックイベント登録です。

ボタンをクリックするとbtn_event関数を呼び出します。

実際にプレビューのボタンをクリックし、確認することが可能です。

DOMメソッド

DOMのaddEventListenerメソッドでクリックイベントを登録するにはイベント種別にclickを与えます。

基本構文

要素オブジェクト.addEventListener('click', 処理);

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<button id="btn">確認</button>

<pre id="log"></pre>

<script type="text/javascript">
    
    let btn = document.getElementById('btn');
    
    ___ih_hl_start
    btn.addEventListener('click', function() {
        let log = document.getElementById('log');
        log.textContent = "Hello World.";
    });
    ___ih_hl_end
    
</script>

プレビュー

１６〜１９行目がaddEventListenerメソッドを利用したクリックイベントの登録です。

プレビューのボタンをクリックすると、テキストを表示し、その内容からイベントハンドラーを実行したことが確認できます。