javascript - javascript で複数のイベントのコードを圧縮する

Question

これをより良い方法で行うことはできますか、それともすべてに対して「object.event = function」と入力する必要がありますか?

namn1.onfocus = clearField;
foretag1.onfocus = clearField;
telefon1.onfocus = clearField;
hemsida1.onfocus = clearField;
meddelande1.onfocus = clearField;
namn2.onfocus = clearField;
foretag2.onfocus = clearField;
telefon2.onfocus = clearField;
hemsida2.onfocus = clearField;
meddelande2.onfocus = clearField;

namn1.onblur = restoreField;
foretag1.onblur = restoreField;
telefon1.onblur = restoreField;
hemsida1.onblur = restoreField;
meddelande1.onblur = restoreField;    
namn2.onblur = restoreField;
foretag2.onblur = restoreField;
telefon2.onblur = restoreField;
hemsida2.onblur = restoreField;
meddelande2.onblur = restoreField;

Answer 1

次のようなこともできますが、それほど優れているわけではありません。

var fields = [
    namn1, foretag1, telefon1, hemsida1, meddelande1,
    namn2, foretag2, telefon2, hemsida2, meddelande2
];

for (var i = 0; i < fields.length; i++) {
    fields[i].onfocus = clearField;
    fields[i].onblur = restoreField;
}

jQuery を使用すると、より多くの制御が可能になりますが、使用するかどうかはわかりません。

Answer 2

私は配列を作成するこの方法が好きなので、ショーンの答えのほんの少しのバリエーションです。

var fields = "namn1 foretag1 telefon1 hemsida1 meddeland1 namn2 foretag2 telefon2 hemsida2 meddelande2".split(" ");

for(i=0; i<fields.length; i++){
   fields[i].onfocus = clearField;
   fields[i].onblur = restoreField;
}

Answer 3

var elements = [namn1, foretag1, telefon1, hemsida1, meddelande1, namn2, foretag2, telefon2, hemsida2, meddelande2];
for (var i in elements) {
    elements[i].onfocus = clearField;
    elements[i].onblur = restoreField;
}

これらの要素が ID でアクセスできる場合、これはさらに簡潔になります。その場合、要素の各ペアを取得することで配列を半分にすることができます。

Answer 4

[namn1, foretag1, telefon1, hemsida1, meddelande1,
 namn2, foretag2, telefon2, hemsida2, meddelande2].forEach(function(e) {
  e.onfocus = clearField;
  e.onblur = restoreField;
});