4

ソースコードには、次のようなインスタンスがたくさんあります。

<input id="a" type="text" name="a" maxlength="40"
 onfocus="ThisOnFocus(this)" onkeydown="ThisOnKeyDown(this)" onkeyup="ThisOnKeyUp(this)" onblur="ThisOnBlur(this)"/>

すべての入力タグは、、、、および関数呼び出しonfocusで終わります。onkeydownonkeyuponblur

私がやりたいのは、すべての入力タグがそれらのイベントでそれらの関数を呼び出すようにグローバルに指定することです。それはJavaScriptでできることですか？

編集：これをスクリプトセクションに配置しようとしましたが、どの関数も呼び出されていません：

document.onload = function() { var inputs = document.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
    inputs[i].onfocus = ThisOnFocus;
    inputs[i].onblur = ThisOnBlur;
    inputs[i].onkeyup = ThisOnKeyUp;
    inputs[i].onkeydown = ThisOnKeyDown;
    }
  }

編集：また、入力チェックボックスとテキストフィールドを区別することは重要ではないかもしれませんが、これらの機能はすべてテキストフィールドのみに関係します。

4

4 に答える 4

1

キャプチャとバブリングを使用できます。フォーカスおよびブラーイベントの場合、キャプチャが必要であることに注意してください。または、focusinイベントとfocusoutイベントを使用することもできます。

ライブデモ： http： //jsfiddle.net/t2KdS/

于 2011-11-25T14:26:30.567 に答える
0

こちらをご覧ください：http：//triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

私があなたなら、jQueryを選択します。しかし、それは純粋なJavascriptで実行可能です。:)

于 2011-11-25T12:36:49.857 に答える
0

それは本当に言葉の問題ですglobal scope。JSが複数のファイルに分散している場合は、他のすべてのJS関数を呼び出すメインファイルの前に呼び出されるファイルに上記の回答のコードを記述する必要があります。

ファイルが1つある場合は、それらの行をすべての関数の外側の上部に配置します。それはJSでそれをグローバルにします。ただし、グローバル変数はクラッシュの基本的なポイントであるため、その場合はjQueryアプローチを使用することをお勧めします。なるべく使用しないでください

于 2011-11-25T12:43:32.350 に答える
0

いくつかの問題があります。

  1. onloadwindowオブジェクトに適用できるイベントハンドラーです。
  2. イベント処理関数は、渡していないパラメーターを予期しています。ThisOnBlur(this)たとえば、マークアップにはThisOnBlur引数を渡さずに使用しているコードがあります。

コードを変更する方法は次のとおりです。

function createEventHandler(fn, input) {
    return function () {
        fn(input);
    };
}

window.onload = function() {
    var inputs = document.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
        inputs[i].onfocus = createEventHandler(
            ThisOnFocus, inputs[i]);

        inputs[i].onblur = createEventHandler(
            ThisOnBlur, inputs[i]);

        inputs[i].onkeydown = createEventHandler(
            ThisOnKeyDown, inputs[i]);

        inputs[i].onkeyup = createEventHandler(
            ThisOnKeyUp, inputs[i]);
    }
};

このcreateEventHandler関数を使用すると、正しい引数を使用して既存のイベントハンドラーを呼び出す関数への参照を取得できます。

次に例を示します：http： //jsfiddle.net/YPNmd/

于 2011-11-25T15:08:34.120 に答える