javascriptのトリガー機能はスクリプトからのイベントではなく、明示的にhtmlから

Question

私は登録フォームをATMにしていますので、JavaScriptのコードをリアルタイムでチェックするために余分なJavaScriptコードを除いて今のようにしたいと思います。（onmouseover、onmouseout、 onblurなど）。
小さなサンプル：指定された要素（最初のパラメータ）の値が第2のパラメータ（デフォルト値）に一致するか第三のパラメータよりも短い場合

<tr> 
    <td> 
     <label for="name" 
       onmouseover="fieldSelected('name', '', 3);" 
       onmouseout="checkValue('name', '', 3);"> 
      Enter your name: 
     </label> 
    </td> 
    <td> 
     <input type="text" 
       id="name" 
       name="name" 
       onmouseover="fieldSelected('name', '', 3);" 
       onmouseout="checkValue('name', '', 3);" 
       onblur="checkValue('name', '', 3);"> 
    </td> 
</tr> 

fieldSelectedフィールドの背景が黄色になります。
ラベルまたは入力フィールドをマウスオーバーすると、最初にbgが黄色に変更され、次に赤色に変更されます（何も入力していないため）。
checkValueは、値に応じてフィールドの背景を赤または緑に変更します（同じパラメータ）。
入力フィールドに何かを入力し、別のフィールドに切り替えて背景色を変更します。

ここで気づくように、すぐにたくさんのJavaScript関数呼び出しがあります（入力/選択フィールドごとに5つ）。もし誰かがこれらのイベントトリガーを別の場所（通常はこれをコードしないのですが）に貼り付ける方法を知っているなら、このような形式ではなく、一度に複数のIDに直接接続するのがよいでしょう。私はここでjQueryを持っていますが、私は実際にはJavaScriptの専門家ではありません。

これを行う簡単な方法がありますか？インタラクティブ性を最大限に高めるために、すべてのイベントでフィールドの背景色を変更したいと考えています。確かに、すべてのデータがサーバー側に送られるときはそれほど大したことではありませんが、私はそのようにしたいだけです。あなたはインライン展開と離れて行うことができる。例えば

Answer 1

、：

function over(ev) { 
    var _for = $(ev.target).closest('tr').find('label').attr('for'); 
    fieldSelected(_for, '', 3) 
}; 

function out(ev) { 
    var _for = $(ev.target).closest('tr').find('label').attr('for'); 
    checkValue(_for, '', 3) 
}; 

$('table').live('hover', over, out).blur(out); 

NB：これは、すべての入力要素とそれに関連するラベルがの表の行にあることを前提としてい彼ら自身。

http://jsfiddle.net/alnitak/XdzeX/

私はあなたがすることはできませんhttp://jsfiddle.net/alnitak/T6vvN/

function handler(ev) { 
    // check which field (or label) is being hovered over 
    if (ev.target.tagName === 'LABEL') { 
     var _for = $(ev.target).attr('for'); 
    } else { 
     var _for = ev.target.name; 
    } 

    // do event type checking to decide which function to call 
    if (ev.type === 'mouseout' || ev.type === 'blur') { 
     checkValue(_for, '', 3); 
    } else if (ev.type === 'mouseover') { 
     fieldSelected(_for, '', 3); 
    }   
}; 

$('label, input').live('hover blur', handler); 

Answer 2

：

var input_element = document.getElementById('name'); 

input_element.onmouseover = function(){ 
     fieldSelected('name', '', 3); 
}; 

input_element.onmouseout = function(){ 
     checkValue('name', '', 3); 
}; 
//etcetera 

そして、あなたは

Answer 3

コンテナにイベントハンドラをアタッチし、図にeventオブジェクトを使用するのと同じ方法で、他の要素を割り当てることができますそれはそれが由来するものを入力します。

http://developer.yahoo.com/performance/rules.html#events

Answer 4

あなたはより多くの詳細については、フォーム

document.getElementById('name').addEventListener('mouseover',function(){ fieldSelected('name','',3)},false); 

グーグルのaddEventListener上の個々のフィールドにイベントを追加する機能 "にaddEventListener" を使用することができます。

あなたのページ全体のイベントのポイント登録がなることができた時に、私は強くjQueryのを使用してお勧めしたい