• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:イベントリスナーで読み込んだ後に、DOMで文字を表)

イベントリスナーでDOMで文字を表示する方法

このQ&Aのポイント
  • イベントリスナーを使用してDOMで文字を表示する方法について質問です。
  • イベントリスナーで読み込んだ後に、DOMを使用して文字を表示させたいのですが、「undefined」と表示される問題が発生しています。
  • この問題の解決策を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

■ 追加の質問1の回答 addEventListener の第2引数に渡した関数は、 システムから実行される際に、引数としてオブジェクトを一つ渡されます オブジェクトの内容) http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event 使わないのであれば引数 event を省略しても言語仕様上は問題ありません。 ただ、この関数はリスナー用である、を暗示するために書いています。 ■ 追加の質問2の回答 addEventListener や onload などに指定するコールバック関数は、 一般的に呼び出し元を指定されずに実行されます。 そのため例示したクロージャー等を使った対策で「this を束縛する」のが一般的です。 ■ bind を使った対策 ECMA-262 5th の新機能である Function.prototype.bind を使います 最近になって追加された機能なので、古いブラウザでは使えません var bound = this.foo.bind(this); window.addEventListener( 'load', bound, false ); ■ EventListener インターフェース を使った対策 addEventListener の第2引数は、DOM仕様上は 「EventListener インタフェースを実装するオブジェクト」 でも大丈夫です。 参考) http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener ですので、ある特定のプロパティをhogeオブジェクトに追加(実装)し、 hogeオブジェクト自体を引数に渡せば、一般的なオブジェクト指向言語っぽくなります function hoge(){ this.handleEvent = function(){ this.foo() }; // 追加 this.view = function(){ window.addEventListener( 'load', this, false ) }; }

a-z_A-Z
質問者

お礼

詳しい説明をありがとうございます。 javascriptは、他の言語と比べて、thisのような独特の仕様のためいつも苦労します。 しかし、今回の回答のおかげで、「だいきらいなjavascript」から「きらいなjavascript」と、 私の中で少し昇格しました。 それでも、まだまだとっつきにくいところがたくさんあります。 これからも質問する機会が多々あると思いますが、その時はまたお願いします。 このたびは、本当にありがとうございました。 大変助かりました。

その他の回答 (1)

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

クラス型オブジェクト指向言語では、 メソッド内の this は一般的に「メソッドが属するインスタンス」を表します。 ですが、クラスやメソッドが存在しない JavaScript では、 関数内の this は「関数の呼び出し元オブジェクト」を表します。 例: obj.関数 = function(){ 処理(this) }; obj.関数(); // obj が呼び出し元なので this == obj として実行される var 変数 = obj.関数; 変数(); // 呼び出し元がないので this == ? 変数.apply(obj); // むりやり明示したので this == obj addEventListener の第二引数に指定する値は関数オブジェクトなのですが、 この関数オブジェクトは呼び出し元が明記されずに呼び出されるので、 関数内では this == ? となります。 (たぶんグローバルオブジェクトだとは思いますが) というわけで、 誤) window.addEventListener('load',this.foo, false); // foo 内では、this == ? 正) var that = this; // この時点での this を保存 var closure = function(event){ that.foo() }; // foo 内では、this == that window.addEventListener('load', closure, false); // closure 内では、this == ? 他にも bind や handleEvent を使った解決方法も有ります

a-z_A-Z
質問者

お礼

ありがとございます。 希望通り表示されました。 しかし、まだよくわかっていません。 そこで質問が2つあります。 【質問1】 var closure = function(event){ that.foo() }; の、「event」は必要でしょうか? var closure = function(){ that.foo() }; ではダメでしょうか。 【質問2】 addEventListenerを使わず、alert(this.moji)のような場合は問題なく表示されました。 今回のような、「var that = this; 」をするのは、 addEventListener の第二引数が、呼び出し元が明記されずに呼び出されるからでしょうか。 【お願い】 参考のために、bind や handleEvent もおしえていただけないでしょうか。 よろしくお願いします。

関連するQ&A

専門家に質問してみよう