空のページから始めます。実行するdocument.body.onclickと が得られnullます。次のコードを適用すると：
document.body.onclick = function() { return "Click"; };
function() { return "Click"; }実行すると取得しますdocument.body.onclick。それは理にかなっている！しかし、私が走るとき
document.body.addEventListener("click", function() { return "Click"; });
document.body.onclickはまだですが、実行したときnullの出力です。"Click"document.body.click()
だから私の質問は、使用時に関数はどこに保存されaddEventListenerますか?
Eventのリスナーの実際のリスト (配列) に格納されbodyます。
要素には、イベント リスナーの関数参照のリストがあります。これらの参照は DOM にはありません。イベントを発生させるとき、ブラウザはこれらの参照を探して順番に実行するために、すべての適切な要素を実行する必要があります。
とにかく... DOM が認識しないバックグラウンドで多くのことが行われています。イベント システム全体がその 1 つです。そしてまあ、基本的にJavaScriptエンジン全体と、現在ロードされているページの大きなオブジェクトツリーがあり、すべてが謎のメモリに保存されています。これらは通常、DOM と同様にdocumentおよびインターフェイスを使用してアクセスされます。windowしかし、適切に登録されたイベントは、DOM とは異なり、メモリに格納されたこの大きなオブジェクト ツリーに格納されます。関係が深いだけ。私は DOM を、この大きなオブジェクト ツリーと HTML 自体の間のインターフェイスまたは仲介者と見なしています。
先に進む...onclickは、DOM にある 1 つの値または JavaScript の 1 つの文字列に制限されています。実際には登録されていません。したがって、実際のイベント リスナーではありません。onclickここで、DOM は、文字列を支えてイベントとして実行するという点で、シムのようなものです。イベントが発生したときにこの文字列も実行されるようにします。ブラウザーによって、適切なタイミングで、不思議なことに。概して、これは DOM が一般的に行うことの一部であると言えます。HTML からこのようにすべてのインライン テキストをシム処理することで、document. ただし、一般的には、ツリー内の実際のオブジェクトではなく、文字列として格納されます。これはおそらく、DOM が非常に愚かである多くの理由の 1 つです。
addEventListenener実際にそれを実際のイベントとして登録するのに対し、次のことができます。
最初の実行後にイベントを自動的に削除する
...およびその他のいくつかの機能。
どちらも、同じイベントに対する 2 つの異なるイベント リスナーです。1 つは、 を使用する場合の完全なイベント リスナーaddEventListenerです。もう 1 つは、ブラウザが「適切なタイミングで」実行する DOM にある単なるテキストの文字列ですが、実際の完全なイベント リスナーではありません。
この質問はいくつかの光を当てるかもしれません... addEventListener vs onclick
.onclick =との主な違いは、既存のイベント ハンドラーを置き換えるイベント ハンドラー.addEventListenerを設定することです。.onclickその代わりに、.addEventListener複数のイベント ハンドラーを DOM 要素に追加します。.addEventListenerイベント ハンドラーを追加する最新の方法です。それらがどこに格納されているかはわかりませんがonclick、onclick はイベント ハンドラーの配列ではなく、単一の値を保持するためです。詳細については、こちらをご覧ください。
http://www.w3.org/TR/DOM-Level-3-Events/#events-DocumentEvent-createEvent
その答えは.addEventListener、 の値を取得することによって追加されたイベント ハンドラーを取得できないということですonlick。