1

私のコードを参照してください http://jsfiddle.net/kxATT/3/

           function byId(id) {
               if (id) {
                   return document.getElementById(id);
               } else {
                   return null;
               }
           }

           function setAttr(elm, attr, value) {
               elm.setAttribute(attr, value);
           }

           var app = {
               id: 12,
               fn: function () {
                   alert(this.id);
               }
           };

           function init() {
               setAttr(byId('txt'), 'onclick', 'app.fn()');
               byId('txt1').addEventListener('click', app.fn, true);
           }

最初のボックスをクリックすると、警告が表示されます12。そして、2 番目のボックスについては警告しtxt1ます。どちらの場合も明らかに同じ関数を呼び出していますが、this異なるオブジェクトを参照しています。入力要素の場合、要素のオブジェクト自体が関数に渡されthis、イベント ハンドラー関数内として参照されると聞きました。もしそうなら、setAttribute を使用してイベントが追加されたときに、そうでないのはなぜですか。

4

2 に答える 2

2

に文字列を代入するとonclick、基本的に関数の本体が作成されます。ブラウザが関数を提供します。たとえば、文字列は次のように"app.fn()"なります。

function onclickHandlerCreatedByBrowser(event) {
    app.fn();
}

addEventListenerJavaScript で関数参照を使用するときと同様に、 を介して関数参照を割り当てると、それは単なる関数参照です。オブジェクト情報はありません。thisJavaScript では、関数が定義されている場所ではなく、関数の呼び出し方法によって完全に設定されます。

ECMAScript5 対応の環境を使用している (または ES5 shim を使用している) 場合は、次を使用してこれを解決できますFunction#bind。

byId('txt1').addEventListener('click', app.fn.bind(app), true);

それ以外の場合は、ブラウザが文字列ケースで提供する機能を自分で提供することで解決できます。

byId('txt1').addEventListener('click', function() {
    app.fn();
}, true);

もっと読む：

于 2012-05-04T07:32:55.887 に答える
2

thisコンテキストは、一方のイベント ハンドラーではオブジェクトであり、もう一方のイベント ハンドラーでは要素inputであり、そのidプロパティはinput要素のid属性に対応します。

于 2012-05-04T07:29:35.217 に答える