[JavaScript] イベントハンドラを設定する

投稿日：2016年10月21日更新日：2018年5月2日

イベントハンドラはHTMLタグに「onclick="～"」のように記述することが多いですが、 JavaScriptで動的にイベントハンドラを指定することも可能です。

イベントハンドラを動的に設定する

例）画面Load時、id="btn1"要素のクリックイベントに「func1()」の呼出しを設定する

window.onload = function(){
  document.getElementById("btn1").onclick = function (){func1();}
}

function func1() {
  //何かの処理
}

window.onload = function(){

document.getElementById("btn1").onclick = function (){func1();}

}

function func1() {

//何かの処理

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" >
</body>
</html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

解説

JavaScript側でイベントハンドラを設定すると、HTML側のソースはタグのみとなって、コードをとてもすっきりさせることができます。
イベントハンドラには以下のようなプロパティが指定できます。

プロパティ	意味
onclick	Clickイベント
onfocus	Focusイベント
onblur	Blurイベント
onchange	Changeイベント
onload	Loadイベント
onunload	Unloadイベント
onsubmit	Submitイベント

執筆者：とら