JavaScriptで無名関数を利用するコードを紹介します。
JavaScriptで一度しか参照しない関数は関数名をつけずに定義することができます。これを無名関数と呼びます。無名関数の用途の多くはコントロールやクラスなどのイベントハンドラ/イベントリスナでの利用が多いです。この記事では、JavaScriptの無名関数の記述について紹介します。
無名関数の書式は以下となります。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init()
{
var button = document.getElementById("Button1");
button.onclick = function (event) {
var elem = document.getElementById("output");
elem.innerText = "ボタンがクリックされました。";
}
}
</script>
</head>
<body onload="init();">
<input id="Button1" type="button" value="button" />
<div id="output"></div>
</body>
</html>
getElementById()メソッドでボタンオブジェクトを取得し、ボタンオブジェクトのonclickイベントにイベントハンドラ/イベントリスナを設定しています。clickイベントハンドラを無名関数で定義しています。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックすると、ボタンがクリックされた旨のメッセージが表示されます。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init()
{
var button = document.getElementById("Button1");
button.addEventListener('click', function () {
var elem = document.getElementById("output");
elem.innerText = "ボタンがクリックされました。";
}
, false);
}
</script>
</head>
<body onload="init();">
<input id="Button1" type="button" value="button" />
<div id="output"></div>
</body>
</html>
getElementById()メソッドでボタンオブジェクトを取得し、ボタンオブジェクトのaddEventListenerメソッドを呼び出して、clickイベントにイベントハンドラ/イベントリスナを設定しています。clickイベントハンドラを無名関数で定義しています。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックすると、先のプログラムと同様に、ボタンがクリックされた旨のメッセージが表示されます。
