Обработчик события onChange объекта Select

Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:

Пример 5. Обработчик onChange при выборе множественных вариантов

<FORM>

Фрукты: <SELECT MULTIPLE

onChange="form.e.value='';

for(i=0; i<length; i++)

if(options[i].selected)

form.e.value += options[i].text+', ';">

 

<OPTION>яблоко</OPTION>

<OPTION>банан</OPTION>

<OPTION>киви</OPTION>

<OPTION>персик</OPTION>

</SELECT><BR>

Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>

</FORM>

Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

Кнопки

В HTML-формах используется четыре вида кнопок:

<FORM>

<INPUT TYPE=button VALUE="Кнопка типа button">

<INPUT TYPE=submit VALUE="Кнопка отправки">

<INPUT TYPE=reset VALUE="Кнопка сброса">

<INPUT TYPE=image SRC=a.gif> <!-- графическая кнопка -->

</FORM>

В атрибуте кнопки можно задать обработчик события onClick, а в атрибуте формы - обработчики событий onSubmit и onReset. Кроме того, кнопкам и форме соответствуют объекты DOM. Объект, отвечающий кнопке, имеет метод click(). Объект, отвечающий форме, имеет методы submit() и reset(). С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.

В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:

• при вызове метода click() кнопки вызывается и обработчик события onClick этой кнопки;
• при вызове метода submit() формы не вызывается обработчик события onSubmit формы;
• при вызове метода reset() формы вызывается и обработчик события onReset формы.

Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit() нужно позаботиться о дополнительном вызове обработчика события onSubmit, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.