Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 RSS
←   Август 2013   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

681 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

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, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

 
В избранное