【JavaScript】DOMで取得した要素にイベントハンドラを登録する方法(onclick, ondblclick, oncontextmenu)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptのDOM操作で取得した要素にイベントハンドラを登録する方法について解説します。

1 DOMで取得したHTML要素にイベントハンドラを登録する方法
2 Twitterやってます！Follow Me！
3 参考・引用
4 最近の投稿

DOMで取得したHTML要素にイベントハンドラを登録する方法

JavaScriptで動的にイベントハンドラを登録するには、DOMで取得したHTML要素のイベントプロパティに、処理の関数を登録します。

onclickプロパティでクリック・イベントを登録する

JavaScriptで動的にクリック・イベントを実装したいときは、

DOMで取得したHTML要素のonclickプロパティに、処理の関数を登録します。

<p>Clickで動作するボタン</p>

<input type="button" value="Click-Robotama" id="robotama">

<script>
    const button = document.getElementById('robotama');

    // 1. onclickプロパティに、処理の関数を登録 => ClickEvent
    button.onclick = () => { console.log('Click-Robotama') };

</script>

ondblclickプロパティでダブルクリック・イベントを登録する

JavaScriptで動的にダブルクリック・イベントを実装したいときは、

DOMで取得したHTML要素のondblclickプロパティに、処理の関数を登録します。

<p>DobuleClickで動作するボタン</p>

<input type="button" value="DoubleClick-Robotama" id="robotama2">

<script>

    const button2 = document.getElementById('robotama2');

    // 1. ondblclickプロパティに、処理の関数を登録 => DobuleClickEvent
    button2.ondblclick = () => { console.log('DoubleClick-Robotama') };

</script>

oncontextmenuプロパティで右Clickイベントを登録する

JavaScriptで動的に右Clickイベントを実装したいときは、

DOMで取得したHTML要素のoncontextmenuプロパティに、処理の関数を登録します。

<p>RightClickで動作するボタン</p>

<button type="button" id="robotama3">RightClick-Robotama</button>

<script>

    const button3 = document.getElementById('robotama3');

    // 1. oncontextmenuプロパティに、処理の関数を登録 => RightClickEvent
    button3.oncontextmenu = () => { console.log('RightClick-Robotama') };

</script>

イベントハンドラの一覧

イベントハンドラには、たくさんの種類があります。

今回は、よく使う3つのイベントハンドラを紹介しましたが、

実装する時の要件に応じて、イベントハンドラを上手に使ってきましょう。

イベントハンドラの種類に関しては、『 HTML要素の属性としてイベントハンドラを登録する』

よりイベントハンドラの種類とその内容の一覧表を引用します。

属性値	イベントの種類
onclick	マウスのボタンが要素の上でクリックされたとき
oncontextmenu	マウスが右クリックされたとき
ondblclick	マウスのボタンが要素の上でダブルクリックされたとき
onmousedown	マウスが要素の上で押されているとき
onmouseup	マウスのボタンが要素の上で離されたとき
onmousemove	マウスが要素の上を移動しているとき
onmouseover	マウスがリスナーが接続されている要素または子要素に移動したとき
onmouseout	マウスがリスナーが接続されている要素または子要素から外れたとき
onselect	テキストが選択されているとき
onwheel	マウスホイールが回転しているとき
onauxclick	マウスのメイン以外のボタン(中央のボタンなど)が要素の上でクリックされたとき
onkeydown	いずれかのキーが押されたとき
onkeyup	いずれかのキーが離されたとき
onkeypress	いずれかのキーが押された状態にあるとき
onblur	要素がフォーカスを失ったとき(バブリングなし)
onfocus	要素がフォーカスを受け取ったとき(バブリングなし)
onchange	要素の値の変更が確定したとき(<input>, <select>, <textarea>)
oninput	要素の値が変更したとき(<input>, <select>, <textarea>)
onsubmit	サブミットボタンが押されたとき
onreset	リセットボタンが押されたとき
onload	ページ全体がスタイルシートや画像などのすべて読み込まれたとき
onabort	エラー以外の原因で読み込みが中止されたとき
onerror	エラーが発生して読み込みが失敗したとき

【イベントハンドラの一覧】

SampleCode全文とHTML実行イメージ

SampleCode全文を掲載します。HTMLを実行すると、次のような画面がレンダリングされます。

<p>Clickで動作するボタン</p>

<input type="button" value="Click-Robotama" id="robotama">

<p>DobuleClickで動作するボタン</p>

<input type="button" value="DoubleClick-Robotama" id="robotama2">

<p>RightClickで動作するボタン</p>

<button type="button" id="robotama3">RightClick-Robotama</button>

<script>
    const button = document.getElementById('robotama');

    // 1. ClickEventを登録する！
    button.onclick = () => { console.log('Click-Robotama') };

    const button2 = document.getElementById('robotama2');

    // 2. DobuleClickEventを登録する！
    button2.ondblclick = () => { console.log('DoubleClick-Robotama') };

    const button3 = document.getElementById('robotama3');

    // 3. RightClickEventを登録する！
    button3.oncontextmenu = () => { console.log('RightClick-Robotama') };

</script>