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

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

新規登録して質問してみよう
ただいま回答率
85.39%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

40108閲覧

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

riocampos

総合スコア241

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

14クリップ

投稿2014/12/05 08:34

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


以下12/5 17:25追記:

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

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

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

dsk, sg-araki👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

参考:

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

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

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

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

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

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

投稿2014/12/05 23:12

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.tada

2014/12/06 08:44

私もkatoyさんと同じ使い分けをしています。 ・clickイベントに対して紐付けられる処理→イベントハンドラ ・clickイベントにイベントハンドラを紐付ける仕組み→イベントリスナー というイメージですね。
riocampos

2014/12/08 15:48

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

0

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

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

投稿2014/12/05 09:13

maisumakun

総合スコア145779

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

riocampos

2014/12/08 15:51

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

0

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

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

lang

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

lang

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

これはイベントリスナー

lang

1(function (){ 2 function setButtonEvent(){ 3 document.getElementById("agree").addEventListener( 4 "click", 5 function (){window.alert("OK");}, 6 false 7 ); 8 } 9 addEventListener("load",setButtonEvent,false); 10}())

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

投稿2014/12/12 05:42

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2014/12/05 16:54

BlueMoon

総合スコア1339

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

riocampos

2014/12/08 15:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問