メインコンテンツまでスキップ

イベント

としての関数#

JavaScript では、関数の一種です。したがって、他のと同じように、変数代入したり、関数引数戻り値として使用したりすることができます。

function greet() {  document.write("Hello World");}
let func = greet;func();

上の例では、 let func = greet; の行で変数 func関数 greet代入しています。関数として扱うときは、関数呼び出しの括弧は使用しません。これにより、関数代入された変数を経由してその関数を実行できます。

イベントハンドラ#

オブジェクトプロパティとして関数を利用することもできます。 document.getElementById が返すオブジェクトonclick プロパティには、要素がクリックされたときに実行される関数を指定できます。

index.html
<button id="greet-button" type="button">クリック</button>
script.js
function clicked() {  document.write("Hello World");}
let greetButton = document.getElementById("greet-button");greetButton.onclick = clicked;

この例では、HTML 要素id 属性greet-button が指定されている HTML 要素を表すオブジェクトonclick プロパティに対し、関数 clicked代入しています。これにより、ボタンがクリックされたとき、clicked 関数が実行されるようになります。

info

下のコードは意図したとおりに動作しません。何が間違っているのでしょうか。

function clicked() {  document.write("Hello World");}
let greetButton = document.getElementById("greet-button");greetButton.onclick = clicked();

答えは、最後の行が clicked から clicked() に変わってしまっていることです。関数は、カッコをつけた評価されるタイミングで実行されます。このため、

greetButton.onclick = clicked();

では代入より前、 clicked()評価されたタイミングで clicked 関数が実行されてしまいます。

caution

上の例では、画面上にはじめから表示されていたボタンが、ボタンをクリックしたときに削除されています。これは、 document.write をすべての要素の表示が終わった後に実行すると、画面上のすべての要素を一度削除するという挙動をとるためです。このため、現代の JavaScript において、 document.write 関数が使用されることはほとんどありません。