Лекция 8 Обработка событий. Примеры привязки обработчиков событий Привязка с помощью атрибута обработчика: ; Информация о модели DOM консорциума W3C Привязка. - презентация

1 Лекция 8 Обработка событий

2 Примеры привязки обработчиков событий Привязка с помощью атрибута обработчика: ; Информация о модели DOM консорциума W3C Привязка с помощью свойства соответствующего объекта в DOM document.getElementById("моя Форма").onsubmit = моя Функция; Использование методов DOM2 ( addEventListener() ) Использование «фирменных» возможностей браузеров ( attachEvent() в IE)

3 Способы вызова событий неявный вызов браузером в ответ на действия, инициированные пользователем или средствами JavaScript; явный вызов средствами JavaScript с помощью методов DOM1, например document.forms[0].submit(); явный вызов с помощью фирменных методов, например fireEvent() в Internet Explorer; явный вызов средствами JavaScript с помощью метода DOM2 dispatchEvent().

4 Атрибуты-обработчики событий Атрибут события Описание события Допустимые элементы стандартного (X)HTML onblur Возникает при потере элементом фокуса ввода,,,,,, ; также,,,,,,,,,, ; onchange Потеря фокуса ввода полем формы, когда значение поля было модифицировано во время доступа к нему,, onclick Выполнение щелчка на элементе Большинство элементов изображения*; ondblcli ck Выполнение двойного щелчка на элементе Большинство элементов изображения*; onfocus Получение фокуса ввода элементом,,,,,, ;

5 Атрибуты-обработчики событий onkeydown Нажатие клавиши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; onkeypress Нажатие и освобождение клавиши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; onkeyup Освобождение ранее нажатой клавиши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; onload Окончание загрузки объекта (как правило, окна или фрейма) в браузер, ; onmousedown Нажатие кнопки мыши в то время, когда эле­мент имеет фокус ввода Большинство элементов изображения*; onmousemove Движение указателя мыши, когда он находится на элементе Большинство элементов изображения*;

6 Атрибуты-обработчики событий onmouseout Смещение указателя мыши с элемента Большинство элементов изображения*; onmouseove r Помещение указателя мыши на элемент Большинство элементов изображения*; onmouseup Освобождение ранее нажатой кнопки мыши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; onreset Возвращение формы в исходное состояние onselect Выбор текста пользователем, onsubmit Отправка формы серверу onunload Выгрузка браузером текущего документа из окна или фрейма,

7 Привязка обработчиков с помощью свойств Пример использования анонимной функции: Кликните на меня! document.getElementById("b1").onclick = function(){alert('Успешно!');}; Пример использования существующей функции: function showMessage(){ alert("Успешно!"); } Укaжитe сюда! document.getElementById("b1").onmouseover = showMessage;

8 Использование this в обработчике событий Пример: отображение id элемента Укажите на меня!

9 Эффекты возвращения false обработчиками Обработчик события Эффект возвращения false click Кнопки переключателей и флажки не устанавливаются. Для кнопки "Подача запроса" не выполняется отправка данных формы. Для кнопки "Сброс" не очищаются поля формы. Для ссылок не осуществляются переходы по ссылкам dragdrop Отменяется перетаскивание keydown Отменяется эффекты удерживания клавиш нажатыми keypress Отменяются эффекты нажатия клавиш mousedown Отменяется эффект, имеющий место по умолчанию (начало перетаскивания, режима выделения или перехода по ссылке) mouseover Любые изменения свойств status или defaultStatus окна игнорируются браузером. (И наоборот, возвращение true приводит к тому, что любые изменения свойств status или default-status окна отражаются браузером.) submit Отменяется отправка данных формы

10 Использование возвращаемого значения браузером Правильно: W3C Неправильно: W3C

11 Проверка данных в форме: function validateField (field) { if (field.value == ""){ alert("Вы должны ввести имя пользователя."); field.focus(); return false; } return true; } Имя пользователя:

12 Генерирование событий вручную Пример document.getElementById('button1').click(); Обработка двух взаимосвязанных событий

13 Методы, генерирующие события Метод события Элементы click(),,,,, (не является частью DOM, но имеет широкую поддержку) blur (),,, focus(),,, select (),,, submit () reset ()

14 Обращение к обработчику событий document.forms[0].elements[0].onclic k();

15 Привязка событий в DOM2 (аналогично базовой модели): Нажмите здесь А не здесь function handleClick(e){ alert("Щелчок получен: " + e) ; } document.getElementById("myElem").onclic k = handleClick;

16 Привязка событий в DOM2 с помощью addEventListener(): объект.addEventListener(событие, обработчик, фаза Захвата); объект задает узел, к которому привязывается приемник события; событие соответствует событию, которое должно отслеживаться; обработчик задает функцию, которая должна вызываться, когда происходит соответствующее событие; фаза Захвата является логическим значением, указывающим, когда должен вызываться обработчик событий в фазе захвата ( true ) или в фазе возврата ( false ).

17 Примеры использования addEventListener(): Добавление обработчика в фазе захвата: document.getElementById('myText').addEven tListener("mouseover", changeColor, true); Добавление обработчика в фазе возврата: document.getElementById('myText').addEven tListener("mouseover", swapImage, false); Удаление обработчика с помощью removeEventListener() document.getElementById('myText').removeE ventListener("mouseover", changeColor, true);

18 Свойства всех объектов Event Свойство только для чтения Описание bubbles Логическое значение, указывающее, имеет ли событие фазу возврата cancelable Логическое значение, указывающее, допускает ли объект возможность отмены currentTarget Узел, обработчик события которого выполняется в данный момент (т.е. узел, к которому привязан данный обработчик событий) eventPhase Числовое значение, указывающее текущую фазу течения события (1 для фазы захвата, 2 для нахождения в целевом объекте, 3 для фазы возврата) type Строка, соответствующая типу события (например, "click" ) target Узел, к которому изначально направлялось событие (т.е. узел, в котором событие произошло)

19 События, связанные с мышью Событие Фаза возврата Возможность отмены click Да mousedown Да mouseup Да mouseover Да mousemove Да Нет mouseout Да

20 Дополнительные свойства Event, связанные с мышью Свойство Описание altKey Логическое значение, указывающее, была ли нажата клавиша ALT button Числовое значение, соответствующее использовавшейся кнопке мыши (обычно 0 соответствует левой, 1 средней, а 2 правой кнопкам) clientX Горизонтальная координата точки, в которой произошло событие, относительно окна содержимого браузера clientY Вертикальная координата точки, в которой произошло событие, относительно окна содержимого браузера ctrlKey Логическое значение, указывающее, была ли нажата клавиша CTRL detail Указывает число щелчков мыши (если таковые были вообще)

21 Дополнительные свойства Event, связанные с мышью metaKey Логическое значение, указывающее, была ли нажата клавиша МЕТА (на компьютерах Макинтош) relatedTarg et Ссылка на узел, связанный с событием; например, для mouseover она указывает на узел, по которому указатель мыши движется, а для mouseout на узел, который указатель мыши по­кидает screenX Горизонтальная координата точки, в которой произошло событие, относительно всего экрана screenY Вертикальная координата точки, в которой произошло событие, относительно всего экрана shiftKey Логическое значение, указывающее, была ли нажата клавиша SHIFT

22 Атрибуты Event, связанные с мышью (пример), ч. 1 Нажата ли клавиша Alt? Нажата ли клавиша Ctrl? Нажата ли клавиша Shift? Нажата ли клавиша Meta? Координаты щелчка относительно браузера:, Координаты щелчка относительно экрана:, Нажата кнопка:

23 Атрибуты Event, связанные с мышью (пример), ч. 1 Щелкните в любом месте документа... function showMouseDetails(event){ document.forms[0].elements[0].value = event.altKey; document.forms[0].elements[1].value = event.ctrlKey; document.forms[0].elements[2].value = event.shiftKey; document.forms[0].elements[3].value = event.metaKey; document.forms[0].elements[4].value = event.clientX; document.forms[0].elements[5].value = event.clientY; document.forms[0].elements[6].value = event.screenX; document.forms[0].elements[7].value = event.screenY; if (event.button ==0) document.forms[0].elements[8].value = "left"; else if (event.button == 1) document.forms[0].elements[8].value = "middle"; else document.forms[0].elements[8].value = "right"; } document.addEventListener("click", showMouseDetails, true);

24 События клавиатуры Событие Фаза возврата Возможность отмены keyup Да keydown Да keypress Да

25 Дополнительные свойства event, связанные с клавиатурой Свойство Описание altKey Логическое значение, указывающее, была ли нажата клавиша ALT charCode Для печатаемых символов является числовым значением, указывающим значение Unicode нажатой клавиши ctrlKey Логическое значение, указывающее, была ли нажата клавиша CTRL isChar Логическое значение, указывающее, был ли при нажатии клавиши сгенерирован символ keyCode Для непечатаемых символов является числовым значением, указывающим значение Unicode нажатой клавиши metaKey Логическое значение, указывающее, была ли нажата клавиша МЕТА shiftKey Логическое значение, указывающее, была ли нажата клавиша SHIFT