Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Обработчик события onChange объекта Select
Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:
<FORM>Фрукты: <SELECT MULTIPLEonChange="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>5.5. Обработчик onChange при выборе множественных вариантов
Обратите внимание на то, что событие 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, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.
Кнопка button
Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click ().
<FORM NAME=f><INPUT TYPE=button NAME=b VALUE="Кнопка" onClick="alert('5+7='+(5+7))"></FORM><A HREF="javascript:document.f.b.click();void(0);">Вызвать метод click()</A>Вызов метода click () у кнопки равносилен нажатию кнопки, что и демонстрирует приведенный пример. Как мы увидим ниже, это же справедливо для любых типов кнопок.
Кнопка submit
Кнопка отправки (submit) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае - при отсутствии у контейнера <FORM> атрибутов ACTION (его значением по умолчанию является адрес текущей страницы), METHOD (его значением по умолчанию является GET) и TARGET (его значением по умолчанию является _self) - стандартным действием браузера при отправке данных на сервер является просто перезагрузка текущей страницы, что подтверждает следующий пример:
<FORM><INPUT TYPE=submit></FORM>Для имитации ответа сервера заготовим следующий простой HTML-файл receive. htm:
<HTML><BODY>Данные приняты!</BODY></HTML>Теперь усложним наш пример: добавим обработчики событий onClick (у кнопки отправки) и onSubmit (у формы), и посмотрим на поведение браузера при нажатии кнопки отправки:
<FORM NAME=f ACTION="receive.htm" onSubmit="return confirm('Вы хотите отправить данные?')"><INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')" TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>5.6. Обработчики onClick у кнопки отправки и onSubmit у формы
Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:
1. вызов обработчика события onClick у данной кнопки;
2. вызов обработчика события onSubmit у формы;
3. отправка данных формы на сервер.
Соответственно, для выполнения дополнительных действий перед отправкой данных можно поместить код в любой из указанных обработчиков; в частности, поместив в какой-либо из них оператор return false, мы сможем предотвратить отправку данных.
Вызов метода click () кнопки отправки равносилен нажатию этой кнопки - произойдут все три вышеперечисленных действия:
<FORM NAME=f ACTION="receive.htm" onSubmit="return confirm('Вы хотите отправить данные?')"><INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')" TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM> <A HREF="javascript: document.f.s.click();void(0);" >Вызвать метод <B>click()</B> кнопки отправки</A>5.7. Вызов метода click() у кнопки отправки
Date: 2016-05-24; view: 444; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |