質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 12
  • VIEW 27K+

riocampos

score 268

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


以下12/5 17:25追記:
Flanagan の JavaScript 第6版 17章イベント処理の注釈には

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

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+4

参考:
http://www.pori2.net/js/event/2.html
...
イベント処理には、イベントハンドラとイベントリスナの2種類があります。 
イベントハンドラは1つのイベントについて1つだけしか指定できませんが、 イベントリスナは複数設定できます。
...
- javascript イベントの書き方使い方まとめ http://designup.jp/javascript-event-235/


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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/06 17:44

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

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

    というイメージですね。

    キャンセル

  • 2014/12/09 00:48

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/09 00:51

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/09 00:52

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

    キャンセル

0

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

これらはイベントハンドラで
<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);
}())
仕様としてではないですが自分の認識はこんな感じです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る