|
Web-программирование: Java Script(JS): Объект event. Продолжение. |
|
|
|
Автор megabax
|
|
10.08.2013 г. |
Урок 13. Управление шрифтами в CSS
New Page 1
Web-программирование: Java Script(JS): Объект event. Продолжение.
Для
углубленного изучения web-программирования (язык
PHP и написание своей собственной CMS) советую
подписаться на
платный раздел (см. анонсы раздела "Пишем
Easy CMS").
Продолжим
изучать объект event. В прошлом выпуске мы рассмотрели
пример обращения через event к коду нажатой клавиши.
Сегодня рассмотрим еще несколько примеров. И так, координаты курсора мыши:
|
<html>
<head>
<title>Урок
93. Java Script (JS):
Объект
event</title>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
onBodyClick(e) {
evt = (e) ? e : event
//в зависимости от типа браузера происходит по разному обращение к event
document.getElementById("myDiv").innerHTML=evt.x+",
"+evt.y;
}
</SCRIPT>
</head>
<body
onClick="onBodyClick(event)">
<div
id="myDiv"></div>
</body>
</html> |
Данный пример
выводи координаты курсора мыши при кликании мышкой на браузере. Координаты
будут относительно окна браузера. А вот свойства screenX и screenY показывают
координаты курсора мыши на экране компьютера. Давайте проиллюстрируем это на
примере:
|
<html>
<head>
<title>Урок
93. Java Script (JS):
Объект
event</title>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
onBodyClick(e) {
evt = (e) ? e : event
//в зависимости от типа браузера происходит по разному обращение к event
document.getElementById("myDiv").innerHTML=evt.x+",
"+evt.y+"<br>"+evt.screenX+",
"+evt.screenY;
}
</SCRIPT>
</head>
<body
onClick="onBodyClick(event)">
<div
id="myDiv"></div>
</body>
</html> |
Еще есть
интересное свойство type, оно показывает тип события.
Оно бывает полезно, когда у нас есть общий обработчик событий, например, см.
пример:
|
<html>
<head>
<title>Урок
92. Java Script (JS):
Объект
event</title>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
onEvent(e) {
evt = (e) ? e : event
//в зависимости от типа браузера происходит по разному обращение к event
document.getElementById("myDiv").innerHTML=evt.type;
}
</SCRIPT>
</head>
<body
onClick="onEvent(event)"
onDblClick="onEvent(event)"
onKeyPress="onEvent(event)"
onLoad="onEvent(event)">
<div
id="myDiv"></div>
</body>
</html> |
Теперь
рассмотрим типы событий.
-
Abort (обработчик
onAbort). Возникает при прерывании загрузки
изображения пользователем.
-
Blur (onBlur). Возникает при потере элементом
HTML-фокуса.
-
Change (onChange).
Возникакет, когда графический объект, связанный с JS-объектами
Select, Text или TextArea
теряет фокус и его значение изменено.
-
Click (onClick). Возникает при щелчке мыши на
объекте.
-
DblClick (onDblClick).
Возникает при щелчке мыши на объекте.
-
DblClick (onDblClick).
Возникает при двойном щелчке мыши на объекте.
-
DragDrop (onDragDrop
). Возникает перетаскивании объекта.
-
Error (onError). Возникает при ошибке во время
загрузки HTML-документа или изображения.
-
Focus (onFocus). Возникает, когда
элемент HTML-формы получает фокус.
-
KeyDown (onKeyDown). Возникает при нажатии
клавиши на клавиатуре.
-
KeyPress (onKeyPress). Возникает при удержании
нажатой клавиши на клавиатуре.
-
KeyUp (onKeyUp). Возникает при отпускании
клавиши на клавиатуре.
-
Load (onLoad). Возникает при окончании загрузки
HTML-документа.
-
MouseDown (onMouseDown). Возникает при нажатии
кнопки мыши
-
MouseOut (onMouseOut). Возникает при убирании
курсора мыши с объекта
-
MouseOver (onMouseOver). Возникает при наводе
курсора мыши на объект
-
MouseUp (onMouseUp). Возникает при отпускании
кнопки мыши
-
Move (onMove). Возникает при перемещении окна
браузера.
-
Reset (onReset). Возникает, когда юзер
нажимает reset в окне формы.
-
Resize (onResize). Возникает, когда
изменяется размер окна браузера.
-
Select (onSelect). Возникает
при выделение текста в окне браузера или элементе управления.
-
Submit (onSubmit). Возникает
при нажатии на кнопку Submit HTML-формы..
-
Upload (onUpload). Возникает
при выгрузке текущего HTML-документа (загрузке
нового)..
|
