События клавиатуры и мыши
|
Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru |
События клавиатуры порождаются нажатием клавиш, а события мыши - нажатием клавиш мыши или перемещением курсора. Всю информацию о событии можно узнать из свойств объекта event. Список событий и их краткое описение приведен в таблице:
| IE | W3C-браузеры | Описание |
| altKey | altKey | Нажата или нет клавиша Alt |
| button | button | Номер нажатой кнопки мыши. нумерация зависит от браузера. |
| cancelBubble | stopPropagation() | Свойство определяет, должно ли событие передаваться дальше по цепи обработчиков. |
| clientX, clientY | clientX, clientY | Координаты курсора относительно клиентской обрасти браузера (область окна без учёта рамки, панели инструментов, строки состояния, меню и заголовка) |
| ctrlKey | ctrlKey | Нажата или нет клавиша Control (Ctrl) |
| fromElement | relatedTarget | Элемент, с которого пришел указатель. Имеет значение только для событий onmouseover и onmouseout. |
| keyCode | keyCode | Код символа для клавиатурного события |
| offsetX, offestY | нет | Координаты указателя мыши относительно элемента, породившего событие. |
| нет | pageX, pageY | Координаты относительно документа. |
| returnValue | preventDefault() | Значение, возвращаемое системе из обработчика. |
| screenX, screenY | screenX, screenY | Координаты курсора относительно экрана. |
| shiftKey | shiftKey | Нажата или нет клавиша Shift |
| srcElement | target | Элемент, породивший событие. |
| toElement | relatedTarget | Элемент, на который переместился указатель. Имеет значение только для событий onmouseover и onmouseout. |
| type | type | Название события (без префикса "on"). |
| x, y | layerX, layerY | Для не позиционируемых элементов - координаты относительно body. Для всех остальных - относительно самого элемента. |
Как видите, не все свойства совпадают для браузеров разных групп. Как следствие - разработчики вынуждены идти на ухищрения и большое количество дополнительных проверок, чтобы обеспечить качественную работу скрипта во всех браузерах (т.н. "кроссплатформенность").
Некоторые свойства объекта event доступны при любом типе события, но некоторые имеют значение лишь для некоторых типов. Например, свойство button имеет смысл читать только в событиях мыши, а вот свойство keyCode/charCode - только в событиях клавиатуры. Вот простой пример, как можно обработать нажатие книпки мыши и одновременно определить состояние клавиши "Shift" на клавиатуре:
<script type="text/javascript" language="javascript">
function checkClick(evt)
{
evt = (evt) ? evt : event;
if(evt.shiftKey)
{
document.getElementById("logger").innerHTML =
"Нажата клавиша Shift";
}
else
{
document.getElementById("logger").innerHTML =
"Клавиша Shift не нажата";
}
}
document.onmousedown = checkClick;
</script>
...
Состояние: <span id="logger">?</span>
Если вы в функции checkClick() попробуете прочитать значение свойства charCode, то получите неопределённое значение, т.к. в один момент времени не может быть нажата клавиша на клавиатуре и происходить клик мыши (исключение составляют управляющие клавиши, не порождающие кодов символов, такие как Shift, Ctrl и Alt).
Обратите внимание на конструкцию evt = (evt) ? evt : event;. Дело в том, что во всех браузерах, отвечающих стандартам W3C DOM, объект события передаётся в параметрах функции-обработчика (параметр evt), а в семействе браузеров на базе Internet Explorer объект события является свойством объекта window. Применение указаной конструкции позволяет скрипту получать события независимо от типа браузера.
Аналогичный механизм проверки может быть использован при определении доступности свойств объекта event. Например, следующий код позволяет блокировать контекстное меню браузера (оно появляется при клике правой кнопкой мыши). Скрипт сначала получает доступ к объекту события, а затем проверяет у него наличие свойства, позволяющего блокировать появление меню.
<script type="text/javascript" language="javascript">
function blockMenu(evt)
{
evt = (evt) ? evt : event;
// Свойство button во всех браузерах имеет
// различные значения для разных кнопок,
// но номер второй (правой) кнопки всегда равен 2.
if(evt.button == 2)
{
document.getElementById("logger").innerHTML =
"Нажата правая кнопка мыши";
if(evt.returnValue)
evt.returnValue = false;
else evt.preventDefault();
}
else
{
document.getElementById("logger").innerHTML =
"Клавиша Shift не нажата";
}
}
document.onmousedown = blockMenu;
document.oncontextmenu = blockMenu;
</script>
...
Состояние: <span id="logger">?</span>
Обработка событий мыши часто используется при создании интерактивных меню, онлайн-игр, интерактивных карт и онлайн-приложений. В последнее время насыщенность и интерфейсная сложность сайтов сильно возросла, поэтому многие программисты стали уделять значительное внимание "мышиным" событиям и трюкам, которые на этих событиях основаны.
Клавиатурные события обычно используются не реже событий мыши. Многие пользователи, работающие с настольными приложениями, привыкли пользоваться определёнными сочетаниями клавиш для выполнения рутинных операций (выделение текста, копирование, вставка, изменение стиля или размера текста и т.п.). Поэтому разработчики веб-приложений большое внимание уделяют обработке клавиатурных событий. Согласитесь, приятно перейти от MS Word к онлайн-редактору и при этом продолжить пользоваться привычными Ctrl+O,Ctrl+P или Ctrl+B.
Другая важная область применения клавиатурных событий - обработка форм. К сожалению, стандарт HTML не позволяет задавать маски ввода и диапазоны допустимых значений для полей формы. Поэтому, когда надо ограничить возможности ввода, прибегают к помощи JavaScript.
Вот пример скрипта для контроля вводимых символов. Он перехватывает все нажания кнопок и позволяет ввести в текстовое поле формы только числовые символы:
<script type="text/javascript" language="javascript">
function checkNumber(evt)
{
evt = (evt) ? evt : window.event;
if(evt)
{
var elm = (evt.target) ?
evt.target : evt.srcElement;
if(elm)
{
var code = (evt.charCode)?
evt.charCode : evt.keyCode;
if((code > 47) && (code < 58))
{
return true;
}
else
{
return false;
}
}
}
}
</script>
</head>
<body onload=
"document.getElementById('numcode').onkeypress =
checkNumber;">
<form>
<input type="text" id="numcode"
value="" onkeypress="checkNumber" />
</form>
Для перехвата события нажатия кнопки необходимо определить обработчик события onkeypress для того элемента, который необходимо контролировать. Сделать это можно либо в событии onload элемента body, либо непосредственно разместив скрипт в конце HTML-кода. Инициализировать обработчик сразу после объявления функции не получится, т.к. мы объявляем функцию в элементе head, содержимое которого грузится и анализируется браузером ДО того, как будет загружена остальная страница, а значит найти нужный элемент формы мы не сможем.
Второй пример использования клавиатурных событий - изменение не редактируемых элементов страницы помощи клавиш. Но для этих целей лучше воспользоваться не onkeypress, а onkeydown или onkeyup. Только учитывайте, что событие onkeydown некорректно обрабатывается старыми версиями браузера Netscape.
<script type="text/javascript" language="javascript">
function moveSquare(evt)
{
evt = (evt) ? evt : window.event;
if(evt)
{
var elm = document.getElementById("square");
if(elm)
{
var code = (evt.charCode)?
evt.charCode : evt.keyCode;
switch(code)
{
case 37:
elm.style.left =
(parseInt(elm.style.left) - 10);
break;
case 38:
elm.style.top =
(parseInt(elm.style.top) - 10);
break;
case 39:
elm.style.left = (parseInt(elm.style.left) + 10);
break;
case 40:
elm.style.top = (parseInt(elm.style.top) + 10);
break;
}
}
}
}
document.onkeyup = moveSquare;
</script>
...
<div id="square" style="position:absolute;width:150px;
height:150px;top:200px;left:200px;
border:1px dotted #C00;">
Перемещаемый квадрат
</div>
Этот скрипт будет перехватывать только клавиши стрелок курсора и сдвигать квадрат на странице в соответствии со стрелкой. Скрипт необходимо разместить в элементе head, а элемент div - внутри body.
В завершение хочу отметить, что механизм событий - очень мощный инструмент в руках специалиста. Освоив его, вы сможете с лёгкостью решать различные, в том числе достаточно сложные задачи по созданию красивых и удобных страниц.
