Оглавление

16.10. Объект event. Вывод координат курсора и кода нажатой клавиши.

Объект event позволяет получить детальную информацию о произошедшем событии и выполнить необходимые действия. Объект event доступен только в обработчиках событий. При наступлении следующего события все предыдущие значения свойств сбрасываются.
Объект event имеет следующие свойства:
□  srcEiement — ссылка на элемент, который является источником события. В модели DOM Level 2 используется свойство target;


□  currentTarget — в модели DOM Level 2 возвращает ссылку на элемент, в котором обрабатывается событие. Ссылается на тот же элемент, что и ключевое слово this внутри обработчика события. Значение свойства currentTarget может не совпадать со значением свойства target;


□  type — строка, содержащая тип события. Возвращается в нижнем регистре и без префикса on. Например, при событии onclick свойство type равно click;


□  clientX и clienty — координаты события (по осям X и Y) в клиентских координатах;


□  screenX и screenY — координаты события (по осям X и Y) относительно окна;

 

□  offsetX и offsetY — координаты события (по осям X и Y) относительно контейнера;


□  х и у — координаты события по осям X и Y. В модели DOM Level 2 этих свойств нет;


□  button — число, указывающее нажатую кнопку мыши. Может принимать следующие значения:
          •   0 — кнопки не были нажаты;
          •   1 — нажата левая кнопка мыши;

          •   2 — нажата правая кнопка мыши;
          •   3 — левая и правая кнопки мыши были нажаты одновременно;
          •   4 — нажата средняя кнопка.


В модели DOM Level 2 значения другие:
          •    0 — нажата левая кнопка мыши;
          •    1 — нажата средняя кнопка;
          •    2 — нажата правая кнопка мыши;


□  keyCode — код нажатой клавиши клавиатуры. В Web-браузере Firefox при нажатии обычной клавиши в обработчике события onkeypress свойство keyCode имеет значение 0, а код символа доступен через свойство char code. Если нажата только функциональная клавиша, то ситуация другая — свойство charcode имеет значение 0, а код символа доступен через свойство keyCode;


□  aitKey — true, если в момент события была нажата клавиша <Alt>;


□  aitLeft — true, если была нажата левая клавиша <Alt>, и false, если правая. В модели DOM Level 2 этого свойства нет;

 

□  ctriKey — true, если была нажата клавиша <Ctrl>;


□  ctriLeft — true, если была нажата левая клавиша <Ctrl>, и false, если правая. В модели DOM Level 2 этого свойства нет;


□  shif tKey — true, если была нажата клавиша <Shift>;


□  shiftLeft — true, если была нажата левая клавиша <Shift>, и false, если правая. В модели DOM Level 2 этого свойства нет;


□  canceiBubbie указывает, будет ли событие передаваться по иерархии объектов или нет. Для прерывания всплывания событий необходимо этому свойству присвоить значение true. Пример использования этого свойства мы рассматривали при изучении всплывания событий (см. разд. 16.7). В модели DOM Level 2 используется метод stopPropagation();


□  returnvalue задает, будет ли выполняться действие по умолчанию для элемента страницы. Для прерывания действия по умолчанию необходимо этому свойству присвоить значение false (листинг 41). В модели DOM Level 2 используется метод preventDefault().

 

Листинг 41. Прерывание действия по умолчанию


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Прерывание действия по умолчанию</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_print(Str, e) {
   window.alert(Str);
   e = e || window.event;
   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
}
//-->
</script>
</head>
<body>
<p>
<a href="file.html" 
onclick="f_print('Перехода по ссылке не будет!', event);">
Нажмите для перехода по ссылке</a><br><br>
<a href="file.html" onclick="window.alert('Перехода по ссылке не будет!'); 
return false;">Нажмите для перехода по ссылке</a></p>
</body>
</html>

 

В этом примере рассмотрены два метода прерывания действия по умолчанию. В первой ссылке прерывание действия по умолчанию реализовано с помощью свойства returnValue объекта event. Во второй ссылке прерывание осуществляется возвратом значения false;
□   fromElement — ссылка на элемент, с которого переместился курсор мыши. В модели DOM Level 2 используется свойство relatedTarget;

 

□   toElement — ссылка на элемент, на который пользователь перемещает курсор мыши. В модели DOM Level 2 используется свойство relatedTarget;


□   repeattrue, если событие onkeypress наступило повторно в результате удержания клавиши нажатой. В модели DOM Level 2 этого свойства нет;


□   propertyName — имя атрибута тега, стиля или свойства элемента страницы, значение которого изменилось. В модели DOM Level 2 этого свойства нет.


Пример использования свойств объекта event приведен в листинге 42.

 

Листинг 42. Выводим координаты курсора и код нажатой клавиши


<!-- Работает только в Internet Explorer !!! -->
<html>
<head>
 <title>Координаты курсора и код нажатой клавиши</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_unload() {
   event.returnValue = "Хотите покинуть документ?";
}
function f_body() {
   switch (event.type) {
   case "mousemove":
      var m1, m2;
      m1 = event.clientX;
      m2 = event.clientY;
      var div1 = document.getElementById("div1");
      div1.innerHTML = "clientX, clientY: x - " + m1 + " y - " + m2;
      m1 = event.screenX;
      m2 = event.screenY;
      var div2 = document.getElementById("div2");
      div2.innerHTML = "screenX, screenY: x - " + m1 + " y - " + m2;
      m1 = event.offsetX;
      m2 = event.offsetY;
      var div3 = document.getElementById("div3");
      var div4 = document.getElementById("div4");
      var div5 = document.getElementById("div5");
      div3.innerHTML = "offsetX, offsetY: x - " + m1 + " y - " + m2;
      div4.innerHTML = "x, y: x - " + event.x + " y - " + event.y;
      div5.innerHTML = "Тег: " + event.srcElement.tagName;
      break;
   case "keypress":
      var div6 = document.getElementById("div6");
      div6.innerHTML = "код нажатой клавиши - " + event.keyCode;
      if (event.ctrlLeft && event.keyCode==10) {
         window.alert("Нажата левая клавиша Ctrl + Enter");
      }
      if (!event.ctrlLeft && event.keyCode==10) {
         window.alert("Нажата правая клавиша Ctrl + Enter");
      }
      break;
   case "contextmenu":
      event.returnValue = false;
      break;
   case "selectstart":
      event.returnValue = false;
      break;
   }
}
//-->
</script>
</head>
<body onkeypress="f_body();" onmousemove="f_body();" 
onbeforeunload="f_unload();">
<p oncontextmenu="f_body();">
Над этим абзацем нельзя вывести контекстное меню</p>
<div id="div5"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div6">Нажмите клавишу на клавиатуре, 
чтобы увидеть ее код</div>
<p>Нажмите левую или правую клавишу Ctrl вместе с Enter, 
чтобы увидеть сообщение</p>
<p onselectstart="f_body();">Этот абзац нельзя выделить 
отдельно от других абзацев</p>
<div><a href="file.html">Нажмите для перехода 
по ссылке</a></div>
</body>
</html>

 

Итак, почти все события документа обрабатываются одной функцией f _body(). С помощью свойства type объекта event и оператора выбора switch можно определить, какое событие произошло, и обработать его. При щелчке правой кнопкой мыши на первом абзаце не выводится контекстное меню. При перемещении курсора мыши можно наблюдать изменение координат, а при нажатии клавиши на клавиатуре выводится ее код, зная который, можно обработать нажатие. Например, если одновременно нажать клавишу <Ctrl> слева и <Enter>, выводится одно сообщение, а если <Ctrl> справа и <Enter> — другое. Последний абзац нельзя выделить отдельно от других абзацев, но если начать выделение с другого абзаца, то будет выделен и последний абзац.
Теперь попробуйте перейти по ссылке или закрыть окно Web-браузера. Появится окно с запросом. Событие onbeforeunload, возникающее перед выгрузкой документа, позволяет вывести стандартное диалоговое окно с двумя кнопками. Окно может содержать текст, указанный в качестве значения свойства returnValue. Да! Свойству returnValue можно присвоить не только значение true или false, но и строку, которая отобразится в диалоговом окне. Но это справедливо только для события onbeforeunioad.
event.returnValue = "Хотите покинуть документ?";


Нужно еще раз напомнить, что это справедливо только для Microsoft Internet Explorer. Например, в Web-браузере Opera половина свойств не работает. Поэтому для написания скриптов, которые будут правильно работать во всех Web-браузерах, приходится писать код под каждый Web-браузер отдельно. Даже если брать Microsoft Internet Explorer, и то следует учитывать его версию. Как определить программно, какой Web-браузер использует пользователь, мы рассмотрим в разд. 17.6.

 

-----

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити