Глаза страшат, а руки делают

ЧАСТЬ ВТОРАЯ


13. События, тэги HTML и стили CSS

  • что такое события;
  • события мыши;
  • document.getElementById() и document.all;
  • как вызывать свойства стилей CSS

Сначала я сразу хотел бодро прокатиться по необъятной теме «Объектная модель», но потом подумал, что, пока мы будем потрошить объект за объектом со всеми их свойствами и методами, мои благодарные читатели начнут, сначала по одному, а потом и целыми компаниями превращаться в неблагодарных и покидать уроки с твёрдым убеждением, что JavaScript — не для обычного ума и ну его вообще.

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

Поэтому для начала предлагаю «разминку» на более лёгкой теме, к тому же, часто используемой на web-страницах.

Затем я всё же начну «бурить» объектную модель, но попробую сделать это полегче и повеселее.

В 10-м уроке, когда мы делали фотоальбом, то для кнопок воспользовались атрибутом onClick, в котором вызывали функции JavaScript. Напоминаю этот фрагмент:

<input type="button" value="Назад" onClick="dem_plus(false, true)">

Этот и подобные ему атрибуты вызывают события JavaScript. События — это, как Вы понимаете, действия. Вызывать эти действия могут как пользователи (нажатие мышки — событие onClick), так и браузер (ох уж мне эти надоедливые всплывающие окна — событие onLoad).

Инструкции для событий пишутся, как обычно, в скрипте (как,например, функция dem_plus(n,k) в нашем примере). А вот чтобы назначить это событие для выполнения — существуют специальные атрибуты в тэгах HTML (в нашем примере — onClick).

Вот перечень практически всех событий (и соответствующих им атрибутов тэгов HTML) в алфавитном порядке:

onAbort, onAfterUpdate, onBeforeUnload, onBlur, onChange, onClick, onDataAvailable, onDatasetChanged, onDatasetComplete, onDblClick, onDragStart, onError, onErrorUpdate, onFilterChange, onFilterEvent, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onReadystateChange, onReset, onResize, onRowEnter, onRowExit, onScroll, onSelect, onSelectStart, onSubmit, onUnload.

Не пугайтесь, необходимых событий не так уж и много: в основном это несколько событий для мыши и событие onLoad для загрузки документа (они выделены в списке красным цветом). И сегодня мы ограничимся лишь самым необходимым. Но главное — Вы узнаете, как правильно вызывать события. А форма вызова у всех одинаковая. Все «экзотические» события мы тоже постепенно рассмотрим, но тогда Вы уже будете точно знать, как к ним подступиться.

«Мышиные» события

К ним относятся onClick, onDblClick, onDragStart, onMouseMove, onMouseOut, onMouseOver и onMouseUp.

Самые «расхожие» — это onClick, onMouseOver и onMouseOut.

В следующем простеньком примерчике мы используем эти три события и onDblClick.

псевдоссылка

Наведите мышку на эту псевдоссылку, щёлкните по ней, а потом дважды щёлкните.

Этот пример чисто учебный и в чём-то даже не очень правильный: например, я использовал устаревший тэг <font>. Но это для того, чтобы показать, что в событии можно вызывать и непосредственные атрибуты тэгов HTML, и стили CSS.

Вот код этого примера:

<p><font color="#004080" onMouseOver="this.color='#C60000'" onMouseOut="this.color='#004080'" onClick="document.getElementById('kuku').style.display = 'block'" onDblClick="document.getElementById('kuku').style.display = 'none'">псевдоссылка</font></p>
<p style=
"display: none" id="kuku">Ку-ку!</p>

Когда нам нужно изменить атрибут элемента, мы используем формулу

элемент.атрибут='новое_значение'

Когда мы изменяем стиль CSS для элемента, то цепочка увеличивается на одно звено, поскольку стиль, сам являясь атрибутом тэга, имеет и свои атрибуты — селекторы:

элемент.стиль.селекторСтиля='новое_значение'

(Обратите внимание, как я написал «селекторСтиля». Это не случайно, и скоро мы до этого доберёмся.)

Главный фокус — найти сам элемент (тэг). В нашем примере события тэга <font> обращаются к нему же самому. Для этой цели есть ключевое слово this, которое возвращает текущий элемент. Но когда по щелчку нам нужно изменить стиль CSS другого элемента, то мы должны его как-то пометить и обратиться к этой метке.

Так же, как и в 10 уроке, я использовал атрибут id и его «ищейку» — метод document.getElementById. Это самый универсальный способ, работающий во всех браузерах. Когда мы говорили о массивах и коллекциях, то разбирали способ поиска по этим коллекциям. Но здесь нам это не подойдёт, потому что тэг <p>, который нам нужен, ни в какие «частные коллекции» не входит. Но есть у документа и самая большая коллекция: document.all. То есть — «всё в документе». А «паспортом» для неё является всё тот же id (хотя в некоторых тэгах можно использовать и name). То есть, можно было бы записать и так:

<p><font color="#004080" onMouseOver="this.color='#C60000'" onMouseOut="this.color='#004080'" onClick="document.all.kuku.style.display='block'" onDblClick="document.all.kuku.style.display='none'">псевдоссылка</font></p>
<p style=
"display: none" id="kuku">Ку-ку!</p>

Обратите внимание: в первом случае наше kuku является свойством элемента и записывается в скобках и кавычках. А во втором случае — это объект, который «пристёгивается» к коллекции через точку (и без кавычек).

Вот почему я столько говорил о грамматике и структуре в предыдущих уроках. Когда научитесь разбираться кто есть кто, тогда и коды Ваши будут работать... ну если не с первого, то, по крайней мере, с третьего раза. На ушко замечу: большие и сложные коды никогда и ни у кого с первого раза правильно не работают. Но чтобы добраться и до них, нужно хорошо усвоить, как мама мыла раму. Поэтому не удивляйтесь и не обижайтесь, если покажется, что я слишком много повторяюсь. Это так и задумано.

Второй способ — через document.all — работает не всегда и не везде. Раньше он совершенно однозначно работал только в IE. Правда появились новые поколения браузеров, базирующихся на NetScape, где он почему-то работает, хотя концепция document.all там всё равно не поддерживается. Поэтому, если хотите гарантию, близкую к 100%, используйте document.getElementById.

И ещё: вместо onMouseOver в данной ситуации можно с тем же эффектом использовать onMouseMove. Они отличаются примерно так же, как document.write() и document.writeln(). Задерживаться на этом мы сегодня не будем.

Вызов стилей CSS

Для начала чуть модернизируем наш пример: уберём этот ископаемый тэг <font>. Для этого нам надо задать цвет в стиле CSS самого <p>То есть:

<p style="color: #000080;" ...

И сюда же впишем и события. Ну а как это делается, мы уже знаем:

... onMouseOver="this.style.color='#F00'" ...

и т.д.

Видите, если мы вызываем стиль CSS, то сам цвет можно писать сокращённо, как в CSS. В случае с атрибутом тэга <font> такая запись бы не прошла.

А теперь сделаем из тэга <div> вот такую простую кнопку:

наведи мышку

Поигрались? Она только подмигивает, но ничего не открывает, не ищите.

А теперь попробуем сделать сами...

Вот исходные параметры стиля блока:

width: 88px;

height: 31px;

text-align: center;

border: 2px solid #A0522D;

background-color: #CD853F;

color: #FFFFE0;

font-size: 80%;

font-family: Verdana;

Текст этого блока, как можно вспомнить из того же 10 урока, «вылавливается» свойством innerHTML.

Нам нужно заменить background-color на #FAFAD2, color на #A0522D, а для innerHTML задать 'привет, привет'. А потом всё вернуть обратно (не забыв переназначить и innerHTML). Кстати, заметили, что изначальная надпись жирная? Значит, при возвращении this.innerHTML='<b>наведи мышку</b>'.

Если Вы начнёте это делать, то обнаружится проблема: background-color не сработает. В JavaScript дефисы вообще не приветствуются.

Как же быть? Помните мой селекторСтиля? Это и есть подсказка.

backgroundColor, textAlign, marginTop — вот такой синтаксис имеют все объекты JavaScript, соответствующие «дефисным» селекторам CSS.

Более подробный перечень составных стилей см. в приложении.

Теперь попробуйте сделать всё это сами, а потом (только честно!) проверьте себя:

посмотреть код


Итак, мы узнали:

что такое события и как с ними работать.

А также научились:

вызывать события мыши, обращаться в них к атрибутам тэгов и селекторам CSS.


К следующему уроку >>


 009460