2

logfunc「定義されていない」のはなぜですか？

  var logfunc = function(obj) {
     return function() {
       console.log(obj)
     }
   }

  t += '<a onclick="logfunc(this)">&lt;</a>'
4

2 に答える 2

2

への参照longfuncは、グローバル スコープの外で宣言されている場合はアクセスできません。フィドル

省略してグローバルスコープで変数を直接宣言することを推奨しているわけではありませんvarが、良い例になります。

function setupStuff() {
    var logfunc = function(obj) { //defined within setupStuff scope
        /*...*/
    }
    t += '<a onclick="logfunc(this)">&lt;</a>';
}

function setupStuffDifferently() {
    logfuncB = function(obj) { //defined in the global scope
       /*...*/
    }
    t += '<a onclick="logfuncB(this)">&lt;</a>';
}

のように個別に宣言された関数を見たいと思います

t += '<a onclick="logfunc(this)">&lt;</a>';

function logfunc(obj) { //this would work when assigned through `onclick`
       /*...*/
}

オプションが利用可能な場合は、jQuery などのライブラリを使用することをお勧めします。これにより、クリック イベントの割り当てと処理がより柔軟になります。

于 2012-05-23T04:54:37.100 に答える
1

「logfunc が定義されていません」というエラーが発生します。logfuncこれは、グローバル (つまりwindow) スコープ内になく、HTML 要素属性を使用してバインドされた関数がグローバルである必要があるためです。

次のように言うことで、それを回避できます。

window.logfunc = function(obj) {
  return function() {
    console.log(obj)
  }
};

logfuncしかし、呼び出す関数を返すだけで、関数を呼び出すことconsole.logに<a>なっていることがわからないため、それはあなたが思っていることをしません。function() { console.log(obj) }それは単にそれを真の値として見るだけです。私はあなたが欲しいと思います：

window.logfunc = function(obj) {
  console.log(obj)
};

リンクをクリックしてコンソール メッセージを生成する場合。

onclick「 DOM との違いは何ですか」に関する限り、次のようになります。

  1. 属性を介して関連付けられた関数はグローバルである必要があり、それはすぐに大きな混乱につながります。
  2. を使用して要素ごとに 1 つの関数しかアタッチできませんが、何度でもonclick呼び出すことができますaddEventListener。JavaScript スニペットを文字列として一緒に貼り付けたい場合は、この制限を回避できますが、これは厄介です。
  3. 同様に、 ;addEventListenerを使用して呼び出しを簡単に元に戻すことができます。removeEventListener属性からイベント ハンドラーを削除すると、onclick追加するよりも厄介な文字列のラングリングが発生します。
  4. を不必要に使用onclickすると、HTML と JavaScript が絡み合い、メンテナンスの悪夢につながります。
于 2012-05-23T05:01:18.650 に答える