イベントハンドラとイベントリスナの用語の使い分けを教えてください

Question

（元タイトル：イベントハンドラとイベントリスナの違いを教えてください）
Ruby は分かるのですが JS や HTML5 は初心者です。
onclick などで使われる用語「イベントハンドラ」と、addEventListener などで使われる用語「イベントリスナ」との違いを教えてください。
ほぼ同じことだけど「イベントリスナ」だと同じイベントに対して複数登録できる、という理解で良いのでしょうか。
また、これらの用語の用いられている対象は、イベントが生じたときに呼ばれる関数（もしくはオブジェクト）、ということで正しいでしょうか。
参考資料もお示しいただければ幸いです。よろしくお願いします。

---

以下12/5 17:25追記：

Flanagan の JavaScript 第6版 17章イベント処理の注釈には

HTML5 仕様などでは、登録する方法に応じて、ハンドラとリスナーを技術的に区別している場合もあります。本書では、2つの言葉を同じ意味として扱います。（p.484）

と記載されていました。
ですので質問内容を「 あなたはこの2つの用語をどのように使い分けていますか 」に変更します。
よろしくお願いします。

Answer 1

参考：

• http://www.pori2.net/js/event/2.html

...
イベント処理には、イベントハンドラとイベントリスナの２種類があります。
イベントハンドラは１つのイベントについて１つだけしか指定できませんが、 イベントリスナは複数設定できます。
...

• javascript イベントの書き方使い方まとめ http://designup.jp/javascript-event-235/

私の考えを以下に記します。

イベントハンドラー：
イベントに対して処理を定義したメソッド。
イベントリスナー：
イベントに対して処理を結びつける仕組み。
であり、概念としては異なるものです。

javascript でイベントに対して処理を行わせるのには、２つの指定方法があり、
それらの方法に対して, イベントハンドラー、イベントリスナー と呼び分けているため、
混乱が発生しがちなのだと思います。

イベントに対して処理を行わせる 2 つの方法：
１つは、
$(foo).oncliｃk( ...) や <tag onclick="..."">
のようにして イベント(click) に対して 処理を指定する。
この場合は, イベントハンドラーを ... と記述されることが多い。

もう１つは、
$(foo).addEventListener("click", ...);
のようにして、 イベント(click) に対して 処理を指定する。
この場合は、イベントリスナーで ... というように記述されることが多い。

Comments

[k.tada]

私もkatoyさんと同じ使い分けをしています。

・clickイベントに対して紐付けられる処理→イベントハンドラ
・clickイベントにイベントハンドラを紐付ける仕組み→イベントリスナー

というイメージですね。

[riocampos]

メソッド自身を指す用語と仕組みを指す用語ということですね。ありがとうございました。

Answer 2

「リスナー」と関連するものとして、Observerパターンというものがあります。これは大雑把に言ってしまえば、「あるオブジェクトが変化した場合に、それで（複数の）処理を駆動する」というもので、DOMのイベントリスナーまわりがまさしくこのような実装になっています。このような場面で登録されるものが「Observer」と呼ばれることもありますが、別名として「リスナー」と呼ばれることもあります。

一方で、「ハンドラ」は「特定の事象が起きた時に駆動されるもの」で、CPUの割り込みハンドラのような場合、設定できるのがメモリアドレス1つだけ、なんてこともあります。

Comments

[riocampos]

> このような場面で登録されるものが「Observer」と呼ばれることもありますが、別名として「リスナー」と呼ばれることもあります。
勉強になりました。真っ先のご投稿ありがとうございました。

Answer 3

個人的主観ですがこういう風に使い分けられているかと。

これらはイベントハンドラで

<input type="button" id="agree" value="agree" onclick="window.alert("OK")"><!--onclickイベントハンドラ-->

document.body.onclick=function(){alert()}

これはイベントリスナー

(function (){
    function setButtonEvent(){
        document.getElementById("agree").addEventListener(
            "click",
            function (){window.alert("OK");},
            false
        );
    }
    addEventListener("load",setButtonEvent,false);
}())

仕様としてではないですが自分の認識はこんな感じです。

Answer 4

自分は今までASP.NETの開発メイン（イベントハンドラ）でしたが、最近Java faceletの学習でイベントリスナーとの呼称に出会うようになりました。両方ともイベント駆動のタイミングの処理を書くというもので、違いは無いものと思っております。あまり意識しませんが、言語の方言的なものと考えています。
言語によりメソッド名称の違いでコーディングミスしないように気を付けてはおりますが。

最近のWEBアプリではPHP等のサーバサイド言語と、ブラウザ制御のJavaScriptを同じプロジェクト内に記載する手法は良くあるので、同じプロジェクト内で呼称を使い分ける場合に疑問が湧くこともあるかも知れないですね。

個人的な感触ですがイベントハンドラという呼称の方が浸透しているように思えますので、イベントリスナーがハンドラとして呼称されることが有るかも知れません。その際は同意と考えて差し支えないと思います。

Comments

[riocampos]

同じものを指すのに用語が違うために理解できなくなることがありますよね。
ご投稿ありがとうございました。