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

JavaScriptのclick（ブラウザイベント）を解説します。

click

clickは要素がクリックしたときのイベントです。
デスクトップパソコンのマウス（カーソル）やスマートフォンのタップでイベントを発生します。

サンプル

HTML属性

onclick属性を設定します。

Sample

<button id="button" onclick="greeting();">ボタン</button>
<p id="message"></p>

<script type="text/javascript">
    
    function greeting() {
        let message = document.getElementById('message');
        message.textContent = 'Hello World!';
    }
    
</script>

プレビュー

DOMメソッド

イベント種別にclickを設定します。

Sample

<button id="button">ボタン</button>
<p id="message"></p>

<script type="text/javascript">
    
    function greeting() {
        let message = document.getElementById('message');
        message.textContent = 'Hello World!';
    }
    
    let button = document.getElementById('button');
    
    button.addEventListener('click', greeting);
    
</script>

プレビュー