JSのイベントターゲット が難しい

質問

JSのイベントターゲット (EventTarget)が難しくてよくわからないのですが初心者にもわかるように解説していただけるとありがたいです。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

イベントターゲット(EventTarget)は、DOMイベントを受け取り、それらへのリスナーを持つことが出来るオブジェクトによって実装されるDOMインターフェースです。

Elementと、 documentと、 windowは、ほとんどの共通イベントターゲットですが、 例えば、XMLHttpRequest、AudioNode、AudioContextなど、 他のオブジェクトもエベントターゲットになることが可能です。

多くのイベントターゲット(Element、document、windowを含む)は、 onXXXプロパティと属性を介して、 イベントハンドラの設定もサポートします。
メソッド

.addEventListener()

要素にイベントハンドラを登録します。
.dispatchEvent()

DOM内のノードのイベントを実行します。
.removeEventListener()

EventTarget.addEventListenerを使用して登録されたイベントリスナーを削除します。

イベントを発動させる要素につけるイベントファンクションのようなものなのでしょうか？

回答No.3

b0a0a · ベストアンサー

もう一度整理して書きますが
その記事の「イベントターゲット」と「EventTargetクラス」と「EventTargetインターフェイス」は別物ですよ。
そして何より、「ANo.1」の「event.target」とは全く違います。
最もやりがちで、最もしては行けないミスです。

回答No.2

b0a0a

まず、「イベントファンクション」という言葉は一般的ではありません。
おそらくイベントと紐付ける関数のことを言っているのだと思いますが、それは「イベントハンドラ」または「イベントリスナー」と呼びます。

そして、「EventTarget」とは、「インターフェイス」（的な存在）です。
よく聞いてください。
インターフェイスとは、定数や、どんなタイプの入出力をする関数を具えるかを表す抽象的な存在です。
例えば、「人」のインターフェイスとして、関数「光を取り電気を出力する目」、関数「音を取り電気を出力する耳」、定数「眉毛」、などを定義した存在が考えられます。

JSのような「インターフェイス」機能の存在しない言語にとっては、
どのような入出力し、どのような機能を持つ関数か、を具体的に実装した「クラス」が実態として存在するだけです。
つまり「EventTargetインターフェイス」というのは仕様上にのみ存在する「概念」で、
実際にJSから見れるのはその実装である「EventTargetクラス」です

一方「何を具えるかを定義しているクラス」のことをその文脈で特別視した場合に「インターフェイス」と呼ぶこともあります。
「インターフェイス」は、「側」だけではなくそれが具体的にどのような働きをする関数かの仕様とセットで考えられる事も多いからです。
つまり微妙なニュアンスの違いでもあります。

実際EventTargetクラスが、誰の目から見ても「インターフェイス」であるのは、
EventTargetクラスは、直接XMLHttpRequestクラスが継承しているわけではなく、間にXMLHttpRequestEventTargetなどと言った専門的なEventTarget系クラスが入っていたりもしますし、
勿論直接インスタンスを作成するためのクラスでは全くないし、物を作るためのクラスの機能の一部をただ単に抜き出したもの、というようよりも更に抽象度が高い存在という感覚がするからです。

ちなみにその記事での、「イベントターゲット」という言葉は『EventTargetインターフェイスを具えるもの』もとい『EventTargetクラスを継承しているもの』という意味の、その記事中でしか通じない言葉です。
何も無しで「イベントターゲット」と言ったら、「event.target」など別のことを思い浮かべるでしょうし、「EventTarget」自身のことだと思うかもしれません。

本題に入りますが、「EventTarget」とは、イベントを利用するAPI、もといクラスのための、イベントと関数の登録機構を提供するクラスです。
イベントというのは、非同期、つまり遅れた通知です。
長引くような処理をしたときや、いつ目的の事態が発生するか分からない場合において、それが終わったら何かをしたい、という機構を便利に実現するために、
何かが起きたら、その物事に対応した「イベント」を起こして、その「イベント」に登録されている関数があれば、それを呼び出して通知しようというアイディアがあります。
そのイベントに対する関数の登録機構を提供するのが、「EventTarget」クラスです。

ここまで勉強して、EventTargetインターフェイスについて知ることができました。
これで貴方はEventTargetが継承される意味を知り、もし自分でイベントの登録機構が下地に来るようなAPIを作ることがあれば、EventTargetを継承してみることを思いつくかもしれません。
しかし、残念ながらそれはできません。
なぜなら、EventTargetは、私達が継承して使えるようにできてはいないのです。
完全に標準APIの内輪の世界で機能を成り立たせており、私達から見れば、ただ形上あるだけの正直言って何の利用価値もない存在なのです。
そしてだからこそ、EventTargetはクラスとして認識されることがほぼ無く、インターフェイスとして語られるのです。

今更書きますが、結局、EventTargetは貴方が知る必要もない存在ということでした。
こういうことは非常に多いですよ？
貴方が知らなければならないことは、「addEventListenerという関数がある」ということであり、それらを持っているEventTargetが何かではありません。
前にも言いましたが、分かりそうもないこと、分かったところで何の役に立つか分からないことは、それ以上深入りしようとしないことです。
目の前に問題が迫っていて必要に駆られたことだけを知ろうとしてください。
つまり、先に進むために「EventTarget」という言葉が頻出し、それを理解していなければどうにもならないという状況になった時のみ、初めて立ち止まって深く勉強してください。
それまで貴方に必要なことは、「こういったものがあった」程度の幅広く浅い大量の知識です。

実際その記事を書いている人や翻訳者だって、EventTargetが何かを初心者に正しく理解させる程程深入りしたことなんて無いし、そもそも全力で理解してもらう気もない解説をしています。
でもそれっぽく説明するしか無いから、仕方なく「イベントターゲット」などという都合のいいオリジナル語を使って、何となくの感覚で適当に伝えているのです。

世の中こういうことばかりですよ。大前提過ぎることですが、この手の解説というのは１００％誤りを含んでいると思ってください。
そして絶対に書いている本人も良く分かっていない部分を適当にごまかしていると思ってください。
勿論それは私が書いてきた文章もそうです。
そして大元の仕様書ですら、曖昧であったりするのです。

ですから下手に一つの所に留まり続けるのは危険なのです。
前に進み続けてください。勿論それで同じ場所に帰ってくるのはアリですが、
その解説が正しくないと気づいた時、はじめてその解説を理解できたことになります。
つまりはその解説だけを読んでその解説を理解することは絶対にできないのです、

回答No.1

t_hirai

ここら辺の説明はどうでしょうか？

参考URL：

http://alphasis.info/2013/09/javascript-dom-eventobject-target/