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-документа (загрузке нового).. С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать. |
Комментариев нет:
Отправить комментарий
Спасибо за Ваш комментарий. ASI очень ценит его.