�ݺ�ߣ

Темы лекции: Работа с событиями.
Практическое задание: Работа с событиями.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 6

http://www.slideshare.net/IgorShkulipa 2
Жизненный цикл событий
Событие является сигналом от браузера, говорящим о каком-то
изменении в окне страницы, которое уже произошло или должно
произойти в ближайшем времени, если вы не предпримете каких-либо
мер.
Обработчик события - функция на JavaScript, которая назначается в
соответствие некоторой паре из объекта и названия события. Когда
соответствующее событие происходит для данного объекта,
выполняются все обработчики событий, назначенные этому узлу.
Все функции-обработчики событий выполняются последовательно,
и каждое событие обрабатывается полностью перед тем, как будет
выполнено следующее событие.

Порядок возникновения событий
Такие события как load возникают
только для соответствующего
объекта (в данном случае,
window или document).
Однако, для событий,
происходящих для отдельных
элементов документа, возможно
также выполнение обработчиков
событий для элементов-предков.
До того как событие возникнет для целевого объекта, имеет место фаза
перехвата, во время которой предки целевого узла могут перехватить
событие. Однако, перехватывание событий работает неодинаково в разных
браузерах.
Некоторые события всплывают, что означает, что после того как они возникли
для целевого элемента, они по очереди возникают для каждого предка в DOM-
дереве, вплоть до объекта document включительно. Этот процесс идентичен в
различных браузерах.
Весь процесс возникновения события для всех соответствующих элементов и
вызова действия по умолчанию называется управлением событиями.

Порядок управления для невсплывающего события
1. Фаза перехвата: все перехватывающие обработчики событий
выполняются для всех элементов-предков, сверху вниз по
иерархии.
1. Событие возникает для целевого элемента, что означает, что
выполняются все обработчики события, назначенные данному
элементу для данного события.
1. Выполняется действие по умолчанию (если оно не было отменено
одним из обработчиков).

Порядок управления для всплывающего события
1. Фаза перехвата: все "перехватывающие" обработчики событий
выполняются для всех элементов-предков, сверху вниз по
иерархии.
1. Событие возникает для целевого элемента.
1. Фаза всплывания: событие возникает для всех событий-предков,
начиная с целевого и выше.
1. Выполняется действие по умолчанию (если оно не было отменено
одним из обработчиков).

Отмена всплывания
Всплывание события возможно отменить используя stopPropagation()
(cancelBubble() в IE), однако действие по умолчанию всё равно будет
выполнено. Таким образом, отмена всплывания и отмена действия по
умолчанию являются отдельными и независимыми операциями.
при щелчке на #myelement сначала выполнятся действия, по событию
"щелчок на #myelement", а затем действия по событию "щелчок на
body". Чтобы предотвратить выполнение второй части кода (щелчок
по body) необходимо использовать event.stopPropagation().
document.onclick= function(){
//...
});
document.getElementById(“myelement”).onclick=function(){
//...
event.stopPropagation();
// Или event.cancelBubble() для IE
});

Пакеты событий
Некоторые события активируются группами: т.е. одно действие
пользователя приводит к вызову нескольких событий.
Например, когда фокус переходит от одного поля к другому, событие blur
возникает для одного поля, а focus - для другого. В принципе, это
происходит одновременно (поскольку это является реакцией на одно
действие пользователя), однако события всё равно возникают по
очереди.
Если событие всплывает, вся последовательность перехвата-всплывания
событий и вызов действия по умолчанию происходят перед обработкой
следующего события.

Пример пакета событий
Примером пакета событий является отпускание кнопки мыши на странице. В этом
случае возникают события mouseup и click. Выполняются следующие этапы:
1. Обработка события mouseup.
• Фаза перехвата для mouseup – выполняются все перехватывающие
обработчики.
• Событие возникает для целевого элемента.
• Фаза всплывания для mouseup - событие возникает для всех родительских
элементов
• Для mouseup нет действия по умолчанию.
2. Обработка события click
• Фаза перехвата – выполняются все перехватывающие обработчики.
• Событие click возникает для целевого элемента.
• Фаза всплывания - событие click возникает для всех родительских
элементов
• Выполняется действие по умолчанию для click.
В каждом случае обработки события возможна отмена только текущего
события. Например, в обработчике события mouseup отмена действия по
умолчанию не возымеет никакого эффекта, поскольку для mouseup нет
действия по умолчанию. Это не остановит возникновение события click,
поскольку они являются различными событиями.

Очередь событий
События возникают в ответ на пользовательский ввод (с мыши или
клавиатуры) или в ответ на внутренние события, например окончание
загрузки страницы. Однако, вызов событий асинхронен породившему его
вводу.
Пользовательский ввод может случиться в тот момент, когда обработчик
другого события всё ещё выполняется. В таком случае действия
пользователя буферизуются, и когда модуль обработки событий вновь
свободен, происходит обработка событий, соответствующих
буферизованным действиям. События всегда возникают в правильном
порядке, но между действием и вызовом события может произойти
заметная задержка, если код некоторого обработчика события займёт
продолжительное время.
Internet Explorer и Mozilla совершенно не реагируют на пользовательские
действия в течение выполнения скриптов-обработчиков. Даже панели
инструментов браузеров блокируются. Хотя пользователь по-прежнему
может, например, нажимать на кнопки, и эти действия заносятся в буфер,
никакой наблюдаемой реакции они не вызывают. Это может
дезориентировать пользователя, который, не осознав, что его действие
было учтено, вероятно, попробует нажать кнопку несколько раз, что может
привести к нежелательным последствиям.

События мыши
• OnMouseOver. Перемещение указателя мыши на элемент.
• OnMouseOut. Перемещение указателя мыши за пределы элемента.
• OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button
указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.
• OnMouseUp. Отпускание любой кнопки мыши.
• OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и
event.y - текущие координаты курсора на экране.
• OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при
каком-то элементе в фокусе.
• OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.
• OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию
перетаскивания путем возвращения значения false.
• OnSelectStart. Запуск операции выделения элемента. Цель – запретить
выделение области документа. Важно учесть, что отменяется лишь
инициализация выделения, т.е. если выделение начато за пределами данной
области, а на ней лишь продолжается, то помешать выделению нельзя. Событие
• OnSelectStart всплывающее, поэтому можно перехватить его и вернуть
значение false. Это лишит посетителя возможности выделять текст на странице.
• OnSelect. Выделение элемента. Следует за OnSelectStart и возникает много
раз по мере того, как посетитель расширяет или сужает выделение. Событие
OnSelect не всплывает. Оно возникает лишь в том разделе документа, где
происходит выделение.

События клавиатуры
• OnKeyPress. Нажатие и отпускание клавиши. Событие возникает
много раз, если клавиша удерживается.
• OnKeyDown. Нажатие клавиши. Событие возникает один раз, даже
если клавиша продолжает удерживаться.
• OnKeyUp. Отпускание клавиши.
Событие прокручивания
• OnScroll. Использование полосы прокрутки или прокручивание
элемента неявно посредством другого действия Не может отменить
прокручивания, так как возникает после завершения прокручивания.
Не всплывает.
События фокуса
• OnFocus. Возникает, когда элемент активизируется после щелчка по
нему мышью или с помощью клавиатуры. Фокус могут получить только
элементы пользовательского ввода и тело документа, а не элементы
содержания документа.
• OnBlur. Возникает, когда элемент теряет фокус. Используется для
контроля корректности ввода.

События формы
• OnChange. Возникает при любых изменениях в форме. Для текстового поля это
ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur
используется для контроля корректности ввода.
• OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основное
назначение – проверка корректности введенных данных. Отмена передачи
данных происходит при возвращении значения false.
• OnReset. Возникает после щелчка на кнопке Reset. Назначение – вывод
предупреждения о сбросе.
События документа
• OnLoad. Возникает после считывания, но до отображения страницы.
Используется для отображения заставки, проверки права доступа и других
однократных действий при инициализации страницы.
• OnUnload. Возникает при выгрузке страницы. Используется для освобождения
каких-либо ресурсов и вывода дополнительных сообщений.
• OnAbort. Возникает при срыве загрузки графического объекта.
• OnError. Возникает лишь при неудачной загрузке графического элемента или
всей WEB-страницы.
Событие помощи
• OnHelp. Запрос файла справки с использованием клавиши <F1>. Не возникает
при выборе пункта Help из меню Help.

Не-пользовательские события
К прочим событиям, не вызываемым действиями пользователя, относятся:
• События загрузки страницы
• Отложенные события
• Обработчики результатов асинхронных запросов XMLHttpRequest
Эти события добавляются в очередь обработки событий аналогично
событиям, вызываемым действиями пользователя. Это, например,
означает, что обработчик ответа XMLHttpRequest не выполняется
непосредственно в момент получения данных, но всего лишь
становится в очередь обработки событий.

Объект event
Объект event служит для получения информации о событии. Свойства объекта
event:
• srcElement. Элемент, который первым сгенерировал событие. Имя тэга
этого элемента можно определить с помощью свойства tagName.
• cancelBubble. Используется для прекращения всплывания события вверх
по иерархии контейнеров. По умолчанию равно false и событие всплывает.
Установка значения true останавливает всплывание текущего события.
• returnValue. Используется для отмены действия по умолчанию. Для этого
нужно установить значение false. Ключевое слово return в JavaScript
обновляет значение event.returnValue при возвращении управления
браузеру.
• type. Определение события. Имя события возвращается в нижнем регистре
без префикса on.
• button. Состояния кнопок мыши во время события.
• clientX, clientY. Координаты указателя мыши относительно клиентской
области окна.
• offsetX, offsetY. Координаты указателя мыши относительно контекста
воспроизведения.
• screenX, screenY. Координаты указателя мыши относительно экрана.
• altKey. Состояние клавиши «Alt»(true/false).
• ctrlKey. Состояние клавиши «Ctrl»(true/false).
• shiftKey. Состояние клавиши «Shift» (true/false).
• keyCode. ASCII-код нажатой клавиши.

Состояния кнопок мыши во время события
Свойство event.button принимает следующие значения:
0 Кнопки не нажаты
1 Нажатие левой кнопки
2 Нажатие правой кнопки
3 Нажатие левой и правой кнопок
4 Нажатие средней кнопки

Пример. Работа с событиями. HTML
<!DOCTYPE html> <html> <head>
<title>JavaScript Working With Events Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/site.css" type="text/css" />
<script type="text/javascript" src=/slideshow/javascript-06/62186606/"js/functions.js"> </script>
<script type="text/javascript" src="js/tictactoe.js"> </script>
<script type="text/javascript" src="js/tetrisfigures.js"> </script>
<script type="text/javascript" src="js/tetris.js"> </script> </head>
<body>
<div id="page">
<div id="head">
<div id="logo">
<img src="img/logo.png" height="94" width="100" alt="logo">
</div>
<div id="title">JavaScript Working With Events Example</div>
</div>
<div class="main">
<div class="innermain">
<div id="menu" class="menu">
<a href="#" id="mi1" class="menuitem">Tic-Tac-Toe</a>
<a href="#" id="mi2" class="menuitem">Tetris</a>
</div>
<div id="content" class="content">
</div> </div> </div>
<div id="foot">
<p onmouseover="this.className = 'pmouseover'"
onmouseout="this.className = 'pmouseout'">
Move Closer to Change the Style</p>
</div> </div>

Пример. Работа с событиями. HTML
<script type="text/javascript">
var mi1 = document.getElementById("mi1");
var mi2 = document.getElementById("mi2");
mi1.addEventListener("click", StartTicTacToe, false);
mi2.addEventListener("click", StartTetris, false);
</script>
</body>
</html>

Пример. CSS
.tictactd {
border: 1px solid black;
text-align: center;
color:transparent;
width: 33.33%;
height: 33.33%;
}
.tdx {
text-align: center;
color:transparent;
width: 33.33%;
height: 33.33%;
background-repeat:no-repeat;
background-position:center;
background-image:
url(/slideshow/javascript-06/62186606/"../img/x.png");
}
.tdo {
text-align: center;
color:transparent;
width: 33.33%;
height: 33.33%;
background-repeat:no-repeat;
background-position:center;
background-image:
url(/slideshow/javascript-06/62186606/"../img/o.png");
}
.tetristable {
width:auto;
height:auto;
display:table;
border:1px solid black;
padding:0px 0px 0px 0px;
}
.tetristr {
display:table-row;
border:none;
}
.tetristd {
display:table-column;
}
.tetriscell {
width:10px;
height:10px;
display:table-cell;
border:1px solid black;
border-spacing:0px;
}
.tetriscell0 {
background:none;
background-color:
transparent;
}
.tetriscell1 {
background:none;
background-color:red;
}
.tetriscell2 {
background:none;
background-color:blue;
}
.tetriscell3 {
background:none;
background-color:green;
}
.tetriscell4 {
background:none;
background-color:
darkmagenta;
}

Пример. functions.js
function $(id) {
return document.getElementById(id);
}

Пример. tictactoe.js
var mainTableHTML = " <table style='width:100%; height:400px;'>
<tr>
<td id='11' class='tictactd'></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>";

function StartTicTacToe() {
$("content").innerHTML = mainTableHTML;
xoGlobal = "O";
var tds = document.getElementsByClassName("tictactd");
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener("click", ClickLogic, false);
}
};

Пример. Результат

Пример 2. tetrisfigures.js
var Squares = [
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 2, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 2, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 2, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 2, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0]
]
];
var Lines = [
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 1, 2, 1, 1],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 2, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0]
],
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[1, 1, 2, 1, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
],
[
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 2, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 0, 0, 0]
]
];
var Corners =[[...]]
var MirroredCorners = [[...]]
var Crancles =[[...]];
var MirroredCrancles = [[...]];
var Pyramids = [[...]];

Пример 2. tetris.js
var KEY_CODE = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40 };
var FieldMaxY = 20;
var FieldMaxX = 10;
var FigureMaxX = 5;
var FigureMaxY = 5;
var PosX = 0;
var PosY = 0;
var CurrentFigureNumber = 0;
var CurrentAngle = 0;
var EmptyColor = 0;
var FigureColor = 1;
var PlacedColor = 4;
var Field = new Object();
var CurrentFigure = new Object();
function GenerateField() {...}
function GetFigure() {...}
function GenerateFigure() {...}
function GetFigureSizes() {...}
function SetFieldCell(x, y, num) {...}
function GetFieldCell(x, y) {...}
function SetFieldCellByFigure(x, y, num) {...}
function GetFeldCellByFigure(x, y) {...}
function GetFigureCell(x, y) {...}
function SetFigureCell(x, y, num) {...}
function DrawFigureColored(num) {...}
function DrawFigure() {...}
function ClearFigure() {...}
function PlaceFigure() {...}
function CheckLoose() {...}
function CheckOtherFigures() {...}
function CheckBounds() {...}
function CheckToPlace() {...}
function RotateFigure() {...}
function RemoveLines() {...}
function MoveFigure(direction) {...}

Пример 2. tetris.js. Генерация таблицы для
отображения поля
function GetFieldTable() {
var result = "<table class='tetristable'>";
for (var y = 0; y < Field.length; y++) {
result += "<tr class='tetristr'>"
for (var x = 0; x < Field[y].length; x++) {
result += "<td class='tetriscell ";
switch (Field[y][x]) {
case 0: result += " tetriscell0 "; break;
default:;
}
result += "'></td>";
}
result += "</tr>";
}
result += "</table>";
return result;
}

Пример 2. tetris.js. Обработка нажатия кнопок
function ProcessKeyPressed(event) {
var event = event || window.event;
event.stopPropagation();
switch (event.keyCode) {
case KEY_CODE.LEFT: MoveFigure(0); break; // Left
case KEY_CODE.RIGHT: MoveFigure(1); break; // Right
case KEY_CODE.DOWN: MoveFigure(2); break; // Down
case KEY_CODE.UP: MoveFigure(3); break; // Rotate
}
$("content").innerHTML = GetFieldTable();
return false;
}

Пример 2. tetris.js. Обработка срабатывания таймера
function ProcessTimer() {
MoveFigure(2);
}

Пример 2. tetris.js. Привязка обработчиков
function StartTetris() {
GenerateField();
GenerateFigure();
document.onkeydown = ProcessKeyPressed;
window.setInterval(ProcessTimer, 1000);
}

Пример 2. Результат

var FieldMaxY = 50;

Лабораторная работа №3.
К своей персональной странице добавить JavaScript-активность с
обработкой управления кнопками клавиатуры (небольшую игру,
например «Змейка» или т.п.).

�ݺ�ߣ

JavaScript Базовый. Занятие 06.

More Related Content

JavaScript Базовый. Занятие 06.