ЧАСТИНА ДРУГА
13. Події, теги HTML і стилі CSS
- що таке події;
- події миші;
- document.getElementById () і document.all;
- як викликати властивості стилів CSS
Але ж для того, щоб зайти в якийсь англійський шоп ту бай сам марення енд сам чіз, не обов'язково студіювати Шекспіра (хоча, якщо переселитися в Англію на довгі роки, то, все-таки, бажано).
Тому для початку пропоную «розминку» на більш легкій темі, до того ж, часто використовуваної на web-сторінках.
Потім я все ж почну «бурити» об'єктну модель, але спробую зробити це легше і веселіше.
Інструкції для подій пишуться, як зазвичай, в скрипті (як, наприклад, функція 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.
Наведіть мишку на цю псевдоссилку, клацніть по ній, а потім двічі клацніть.
Цей приклад чисто навчальний і в чомусь навіть не дуже правильний: наприклад, я використав застарілий тег . Але це для того, щоб показати, що у події можна викликати і безпосередні атрибути тегів HTML, і стилі CSS.
Ось код цього прикладу:
Коли нам потрібно змінити атрибут елемента, ми використовуємо формулу
Коли ми змінюємо стиль CSS для елемента, то ланцюжок збільшується на одну ланку, оскільки стиль, сам будучи атрибутом тега, має і свої атрибути - селектори:
(Зверніть увагу, як я написав «селекторСтіля». Це не випадково, і скоро ми до цього доберемося.)
Головний фокус - знайти сам елемент (тег). У нашому прикладі події тега звертаються до нього ж самому. Для цієї мети є ключове слово this. яке повертає поточний елемент. Але коли після клацання нам потрібно змінити стиль CSS іншого елемента, то ми повинні його якось позначити і звернутися до цієї мітці.
Так само, як і в 10 уроці, я використовував атрибут id і його «шукача» - метод document.getElementById. Це самий універсальний спосіб, що працює у всіх браузерах. Коли ми говорили про масивах і колекціях, то розбирали спосіб пошуку по цим колекціям. Але тут нам це не підійде, тому що тег
. який нам потрібен, ні в які «приватні колекції» не входить. Але є у документа і найбільша колекція: document.all. Тобто - «все в документі». А «паспортом» для неї є все той же id (хоча в деяких тегах можна використовувати і name). Тобто, можна було б записати і так:
Зверніть увагу: в першому випадку наше kuku є властивістю елемента і записується в дужках і лапках. А в другому випадку - це об'єкт. який «пристібається» до колекції через точку (і без лапок).
Ось чому я стільки говорив про граматику і структурі в попередніх уроках. Коли навчитеся розбиратися хто є хто, тоді і коди Ваші працюватимуть. ну якщо не з першого, то, по крайней мере, з третього разу. На вушко зауважу: великі і складні коди ніколи і ні в кого з першого разу правильно не працюють. Але щоб дістатися і до них, потрібно добре засвоїти, як мама мила раму. Тому не дивуйтеся і не ображайтеся, якщо здасться, що я занадто багато повторююсь. Це так і задумано.
Другий спосіб - через document.all - працює не завжди і не скрізь. Раніше він абсолютно однозначно працював тільки в IE. Правда з'явилися нові покоління браузерів, що базуються на NetScape, де він чомусь працює, хоча концепція document.all там все одно не підтримується. Тому, якщо хочете гарантію, близьку до 100%, використовуйте document.getElementById.
І ще: замість onMouseOver в даній ситуації можна з тим же ефектом використовувати onMouseMove. Вони відрізняються приблизно так само, як document.write () і document.writeln (). Затримуватися на цьому ми сьогодні не будемо.
Виклик стилів CSS
Для початку трохи модернізуємо наш приклад: приберемо цей викопний тег . Для цього нам треба задати колір в стилі CSS самого Тобто:
І сюди ж впишемо і події. Ну а як це робиться, ми вже знаємо: Бачите, якщо ми викликаємо стиль CSS, то сам колір можна писати скорочено, як в CSS. У випадку з атрибутом тега такий запис б не пройшла. А тепер зробимо з тегом Погралися? Вона тільки підморгує, але нічого не відкриває, не шукайте. А тепер спробуємо зробити самі.Схожі статті