質問: 下記のとき、イベントハンドラとコールバック関数はそれぞれどれに該当するのでしょうか? ``` hoge.addEventListener( 'click', function() { return function() { } }()); ``` 下記は、イベントハンドラ? コールバック関数? もしくは両方? ``` function() { return function() { } }() ``` それとも下記が、イベントハンドラ? コールバック関数? もしくは両方 ``` return function() { } ``` あるいはコールバック関数は、外部で呼出形式のものを指すのでしょうか? ・afuncがコールバック関数? ``` hoge.addEventListener( 'click', afunc); ```
回答: イベントハンドラは、イベントが発生したときに呼び出される処理を指します。 DOM においては `click` `mouseover` などのイベントがありますから、これらを受けて呼び出される関数を指してイベントハンドラと言うことが多いでしょう。 次にコールバック関数ですが、普通関数呼び出しというものは「AからBを呼び出す」という一方的なものです。ところが「Bの処理がすぐには完了しない」「Bから返したいものが複数ある」などの理由で、Aの側で定義した処理を**Bの都合で**実行したいことがあります。 このように、呼ばれた側(B)から呼んだ側(A)の処理を呼び出し返すことを、コールバックと言います。また呼び出し返される関数のことをコールバック関数と言います。 コールバックの薦め - プログラミングの教科書を置いておくところ イベントハンドラは用意しておいたものを呼び出してもらうことになるので、コールバックが使われることが多いかと思います。 上記を元に考えると、 ``` hoge.addEventListener('click', function() { return function() { } }()); ``` `addEventListener` は指定したイベントが発生したときに、指定した関数をコールバックします。外側のfunctionは即時評価されているので、内側のfunctionが `addEventListener` に渡されます。これがコールバック関数であり、clickイベントに対するイベントハンドラとなります。 強いて外側のfunctionについて言うなら、イベントハンドラ(もしくはコールバック関数)を返す関数、とでも言いましょうか。 次のコードはfunctionを二重に重ねることをしていませんが、これでも問題ありません。 ``` hoge.addEventListener('click', function() { alert('hoge'); }); ``` この場合、`function(){...}` がイベントハンドラで、コールバック関数です。 また、定義済みの関数であっても匿名関数であっても同じですから、次の例でもafuncがコールバック関数かつイベントハンドラです。 ``` hoge.addEventListener('click', afunc); ```