Обработка событий
Для того, чтобы изменить свойства отображения данного элемента, мы использовали объект style, являющийся дочерним по отношению к объекту element. Этот объект позволяет использовать всю мощь стилевых таблиц без прямого их создания. В коде Web-страницы мы не указали явно цвет шрифта, которым отображается текст абзаца. Но в программе-скрипте мы применили свойство color, которое позволяет регулировать цвет символов текста, и при выполнении функции цвет шрифта был переопределен.
Следует обратить внимание, что действие скрипта было выполнено в ответ на некое событие, порожденное действиями пользователя. Еще раз повторюсь, что технология DHTML полностью ориентирована именно на события. Подобный ставь, программирования обычно называют "событийно-ориентированным". Именно поэтому для овладения технологией DHTML в, полной мере необходимо досконально разбираться в принципах возникновения событий и их обработки.
Так же достойна внимания концепция "конвейера событий" в DHTML. Суть этой концепции достаточно проста. Мы знаем, что в HTML одни элементы могут находиться внутри других. Например, абзац, порождаемый тегами <р> и </р>, может находиться.внутри ячейки таблицы. Сами ячейки находятся внутри отдельных строк таблицы, а те, в свою очередь, сами содержатся в таблице, порожденной тегами <table> и </table>. Теперь посмотрим, что произойдет, если пользователь произведет одиночный щелчок мышью по этому абзацу. Абзац, естественно, инициирует событие onclick. Но ведь абзац находиться в ячейке, следовательно, пользователь щелкнул и по ячейке. И сама ячейка тоже инициирует событие onclick, а за ней точно также поступит элемент строки таблицы и вся таблица. И так очередь дойдет до основного элемента body.
При этом, если для всех или некоторых элементов, через которые прошло это событие, были определены функции, выполняемые в ответ на щелчок мыши, то они все будут выполнены. Если же разработчику необходимо обрабатывать событие только в рамках того элемента, где оно произошло, не отправляя вверх по объектной иерархий, следует воспользоваться одним из свойств элемента event. Мы уже рассматривали этот объект и упоминали его свойство cancelBubble, которое отменяет перемещение события вверх по объектной иерархий. Поэтому, если бы мы в нашем скрипте захотели установить обработку события только для одного элемента, прерывая передвижение события вверх по объектной иерархии, наш скрипт выглядел бы следующим образом:
<script laguage="javascript"> function changecolor() { p1.style.color = "blue"; window.event.cancelBubble = True; } </script>Как видно, в этом случае мы лишь присвоили логическое значение "Истина" данному свойству. Этого достаточно для того, чтобы отменить обработку данного события всеми вышестоящими элементами. В предыдущем разделе мы уже рассматривали структуру объекта event и знаем, что даный объект при помощи своих свойств предоставляет детальную информацию обо всех событиях, которые входят в состав технологии DHTML.
Следует также упомянуть, что различные элемента! Web-страниц могут реагировать на разные события. Возможный список событий определяется функциональностью каждого конкретного элемента Web-страницы. Чтобы однозначно определить, какой тег какими событиями обладает, приведем таблицу соответствий.
Таблица 7.2. Теги и события.
| Тег | Описание | Список поддерживаемых событий |
|---|---|---|
| <а> | Гиперссылка | onblur, onclick, ondblclick, ondragstart, onerrorupdate, onf interchange, onfocus, onhelp, onkeydown, onkeyptess, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart |
| <address> | Специализированное форматирование текста | Onclick, ondblclick, ondragstart, onhelp, bnkeydoWn, onkeypress, onkeyup, onmoaaedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart |
| <applet> | Внедряет в состав Web-страницы Java-апплет | Onafterupdate, onbef oreupdate, onblur, onclick, ondataavailable, ondatasetelianged, ondatasetcomplete, ondblclick, ondragstart, onerrorupdate, onfocus, onhelp, orikeydowri, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onresize, onrdwenter, onrowexit, onselectstart |
| <area> | Создает активную область-гиперссылку в сегментированной графике | onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup |
| <b> | Выделяет текст полужирным шрифтом | onclick, ondblclick, ondragstart, onfilterchange, onhelp, orikeydown, onkeypress t onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart |
| <big> | Увеличивает размер шрифта на единицу | onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown,.onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup |
| <blockquote> | Специализированное форматирование текста | onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart |
| <body> | Определяет содержательную часть Web-страницы | onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstarti onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit" onscroll, onselectstart |
| <button> | Создает кнопку | onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypieess, onkeyup, onmousedown, onmousemove, onmbuseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart |