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

Темы лекции: Работа с событиями.

Практическое задание: Работа с событиями.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 6

http://www.slideshare.net/IgorShkulipa 2

Жизненный цикл событий

Событие является сигналом от браузера, говорящим о каком-тоизменении в окне страницы, которое уже произошло или должнопроизойти в ближайшем времени, если вы не предпримете каких-либомер.

Обработчик события - функция на JavaScript, которая назначается всоответствие некоторой паре из объекта и названия события. Когдасоответствующее событие происходит для данного объекта,выполняются все обработчики событий, назначенные этому узлу.

Все функции-обработчики событий выполняются последовательно,и каждое событие обрабатывается полностью перед тем, как будетвыполнено следующее событие.

http://www.slideshare.net/IgorShkulipa


Порядок возникновения событий

Такие события как 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="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("../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("../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>";



Пример. tictactoe.jsfunction CheckVictory(xo) {

if (

//Строки

(($("11").innerHTML == xo) && ($("12").innerHTML == xo) && ($("13").innerHTML == xo)) ||



//Столбцы




//Диагонали


(($("31").innerHTML == xo) && ($("22").innerHTML == xo) && ($("13").innerHTML == xo))) {

if (xo == "X") {

alert("Крестики победили!");

StartTicTacToe();

}

else {

alert("Нолики победили!");

StartTicTacToe();

}

} else {

var cls = document.querySelectorAll(".tdx").length +

document.querySelectorAll(".tdo").length;

if (cls >= 9) {

alert("Ничья!");

StartTicTacToe();

}

}

}




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.jsvar 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

Education