Ñîáûòèÿ êëàâèàòóðû è ìûøè
|
Àâòîð: Àðòåìüåâ Ñåðãåé Èãîðåâè÷ 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.
 çàâåðøåíèå õî÷ó îòìåòèòü, ÷òî ìåõàíèçì ñîáûòèé - î÷åíü ìîùíûé èíñòðóìåíò â ðóêàõ ñïåöèàëèñòà. Îñâîèâ åãî, âû ñìîæåòå ñ ë¸ãêîñòüþ ðåøàòü ðàçëè÷íûå, â òîì ÷èñëå äîñòàòî÷íî ñëîæíûå çàäà÷è ïî ñîçäàíèþ êðàñèâûõ è óäîáíûõ ñòðàíèö.
