250 Глава 10 • Управление динамическими элементами с помощью DOM
.square {
height: 100px;
width: 100px;
background-color: yellow;
}
.square.blue {
background-color: blue;
}
Изменение классов элементов 251 .square.blue {
background-color: blue;
}
252 Глава 10 • Управление динамическими элементами с помощью DOM
display: none;
}
.square {
height: 100px;
width: 100px;
background-color: yellow;
}
Данный код назначает для
body
функцию
unique()
, которая отключится в момент
прекращения загрузки. Совместить
addEventListener()
и HTML не получится:
один вариант будет переписывать другой в зависимости от порядка их расположе-
ния на веб-странице. Если все же нужно, чтобы при загрузке DOM произошло два
события, понадобятся два вызова
addEventListener()
в коде JavaScript.
Практическое занятие 11.3 Следующее упражнение на примере базового HTML-файла продемонстриру-
ет порядок загрузки объекта
window
и объекта
document
с помощью события
DOMContentLoaded
. Это событие активируется, как только содержимое объ-
екта
document
будет загружено в браузер. Объект
window
загрузится позже,
даже если сначала выполнится оператор
window
.
onload
.
1. В базовом HTML-файле создайте функцию
message
, для которой тре-
буется два параметра: первый — строковое значение для сообщения,
а второй — объект события. Внутри функции выведите на экран данное
сообщение и события с помощью
console.log
.
2. Используя объект
window
, добавьте объекту события функцию
onload
.
Вызовите функцию, передав строковое значение
Window
Ready
и объект
события в функцию
message
для вывода результата.
3. Создайте вторую функцию для фиксации загрузки содержимого DOM.
К объекту
document
добавьте прослушиватель событий, анализирующий
DOMContentLoaded
. Как только это событие будет запущено, передайте
объект события и строковое значение
Document
Ready
в функцию выво-
да
message
.
4. Измените порядок прослушивателей событий, разместив оператор со-
бытия
document
перед окном
onload
. Повлияет ли это на результат?
Обработчик событий мыши 273 5. С помощью объекта
document
добавьте прослушиватель события
DOMCon-
tentLoaded
— он должен отправлять в функцию аргументы
Document
Ready
и объект вызванного события.
6. Запустите скрипт и посмотрите, какое событие выполнится первым. Из-
мените порядок событий, чтобы увидеть, изменится ли последователь-
ность вывода.
Обработчик событий мыши
Существуют различные обработчики событий мыши (события мыши — это дей-
ствия, которые она выполняет):
z
z
ondblclick
— двойной щелчок кнопкой мыши;
z
z
onmousedown
— кнопка нажата и удерживается;
z
z
onmouseup
— кнопка больше не удерживается;
z
z
onmouseenter
— указатель перемещается на элемент;
z
z
onmouseleave
— указатель покидает область элемента и его дочерних элементов;
z
z
onmousemove
— указатель перемещается через элемент;
z
z
onmouseout
— указатель покидает отдельный элемент;
z
z
onmouseover
— указатель зависает над элементом.
Рассмотрим один из них в действии. Как думаете, что делает следующий код?
100px; background-color: pink;">
276 Глава 11 • Интерактивный контент и прослушиватели событий
Hi there!
278 Глава 11 • Интерактивный контент и прослушиватели событий
Bubbling events
1
2
3
4
5
Box #1
Box #2
Box #3
Box #4
Hi there!
JavaScript is fun!
JavaScript is fun!
onpaste="return false">
onpaste="return false">
1
2
1
Drag Me Please!
2
✭
✭
✭
✭
✭
Complete JavaScript Course
Search for:
Replace with:
328 Глава 12 • Средний уровень JavaScript
358 Глава 14 • HTML5, Canvas и JavaScript
372 Глава 14 • HTML5, Canvas и JavaScript
Color
Width
Сохранение динамических изображений 381
0 Days 0
Hours 0Minutes 0Seconds
Color:
Width: id="penWidth">
Let's play a game!
Of hide and seek...
I'm easy to find!
Let's play hide and seek.
Go to the console and type:
obj._data.hide = true
