JavaScript trigger function on event from a script, not explicitly from html

I'm making a registration form ATM, I have it like I want it so far except the excess JavaScript code to check the values real-time (onmouseover, onmouseout, onblur etc.).

A small sample:

<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 makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter.

You mouseover the label开发者_如何学运维 or the input field and it changes the bg first to yellow, then to red (since you didn't input anything).

checkValue changes the field background to either red or green depending on the value (same parameters).

You enter something in the input field, switch to another field and it changes the background color.

Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.

Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.

I'd strongly suggest using jQuery, at which point registration of events for your entire page can become:

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: this assumes that every input element and its associated label are in a table row of their own.

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

I created a slightly longer version which makes no assumptions about the table layout at 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);

you can use function "addEventListener" to add event to individual fields on form

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

Google addEventListener for more details.

For example you can do away with the inlining:

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

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

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

And then you can assign other elements in the same manner

Attach the event handlers to a container and use the event object to figure out which input it originated from.

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