триггерная функция javascript для события из сценария, а не из html

Question

Итак, я делаю регистрационную форму АТМ, у меня она есть, как я хочу до сих пор, за исключением избыточного кода JavaScript для проверки значений в реальном времени (onmouseover, onmouseout, onblur и т. Д.).
Небольшой пример:

<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 на каждое поле ввода / выбора).Было бы замечательно, если бы кто-нибудь знал, как прикрепить эти триггеры событий из другого места (я обычно не пишу это грязно), а не напрямую в такой форме и желательно к нескольким идентификаторам одновременно.У меня есть jQuery здесь, но я действительно не эксперт в JavaScript.

Или, может быть, есть более простой способ сделать это?Я хочу, чтобы цвет фона поля менялся на всех этих событиях для максимальной интерактивности.Конечно, когда все данные отправляются на сервер, ничего особенного, но я просто хочу, чтобы это было так.

Answer 1

Я настоятельно рекомендую использовать jQuery, после чего регистрация событий для всей вашей страницы может стать:

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);

Примечание: предполагается, что каждый элемент ввода и связанная с ним метка находятся в отдельной строке таблицы.

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

вы можете использовать функцию "addEventListener", чтобы добавить событие в отдельные поля формы

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

Google addEventListener для более подробной информации.

Answer 3

Присоедините обработчики событий к контейнеру и используйте объект event, чтобы выяснить, из какого источника он поступил.

Answer 4

Например, вы можете покончить со вставкой:

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

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

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

И затем вы можете назначить другие элементы таким же образом