Wiki-учебник по веб-технологиям: JavaScript/СобытияПровоцируемыеМышьюВJavaScript ...

Главная | Каталог |

События провоцируемые мышью в JavaScript


Какие события мыши мы должны использовать? Мы не имеем MouseDrag, но мы можем достигать этого же самого через события MouseDown, MouseMove и MouseUp. JavaScript использует новую модель событий. Без этой модели событий мы не могли бы решить нашу задачу. Пользователь нажимает кнопку мыши где-нибудь внутри окна браузера. Наш сценарий должен реагировать на это событие и вычислять, какой объект (то есть уровень) был нажат. Мы должны знать координаты события мыши. JavaScript применяет новый объект Event, который сохраняет координаты события мыши (помимо другой информации). Другая важная вещь называется фиксацией события. Если пользователь например нажимает на кнопку, событие мыши посылается непосредственно объекту кнопки. Но в нашем случае мы хотим, чтобы окно обработало наше событие. Так что мы позволяем окну фиксировать событие мыши, то есть объект окна получает это событие и может воздействовать на него. Следующий пример показывает это (использование события Click). Вы можете нажать где-нибудь внутри окна браузера. Появится всплывающее окно, которое отобразит координаты события мыши:

Это код для приведенного выше примера:

<html>

<script language="JavaScript">
<!--

  window.captureEvents(Event.CLICK);

  window.onclick= displayCoords;


  function displayCoords(e) {
    alert("x: " + e.pageX + " y: " + e.pageY);
  }

// -->
</script>

Click somewhere inside the browser window.

</html>


Сначала мы сообщаем Window-объекту, зафиксировать событие Click. Для этого мы используем метод captureEvent(). Следующая строка

window.onclick= displayCoords;


определяет, что должно произойти при событии Click. Она сообщает броузеру, что должно быть вызвана displayCoords(), как реакция на событие Click (Пожалуйста обратите внимание, что в этом случае вы не должны использовать скобки после displayCoords). displayCoords() – функция, которая, описывается наподобие этого

function displayCoords(e) {
    alert("x: " + e.pageX + " y: " + e.pageY);
  }


Вы можете видеть, что эта функция имеет один параметр (мы назовем его e). Это – объект Event, который передается функции displayCoords(). Объект Event имеет свойства pageX и pageY (помимо других), которые представляют координаты события мыши. Всплывающее окно отображает эти значения.