Êóðñ îáó÷åíèÿ JavaScript: Ñîáûòèÿ
|
Àâòîð: Àðòåìüåâ Ñåðãåé Èãîðåâè÷ ICQ: 438856621 email: _spin_@bk.ru |
JavaScript ïîääåðæèâàåò îòñëåæèâàíèå íåêîòîðûõ èçìåíåíèé è äåéñòâèé ïîëüçîâàòåëÿ íà ñòðàíèöå. Êàæäîå òàêîå èçìåíåíèå èëè äåéñòâèå ïîðîæäàåò ñîáûòèå, êîòîðîå ïðîãðàììèñò ìîæåò ïåðåõâàòèòü è âûïîëíèòü êàêèå-òî íåîáõîäèìûå äåéñòâèÿ. Ïðèìåðû ñîáûòèé - êëèê ìûøè íà ýëåìåíòå ñòðàíèöû, ïîëó÷åíèå ôîêóñà ââîäà ýëåìåíòîì ôîðìû, îêîí÷àíèå çàãðóçêè èëè âûãðóçêè ñòðàíèöû.
Ñïèñîê ñîáûòèé, äîñòóïíûõ â êàæäîì îòäåëüíîì áðàóçåðå îáû÷íî ìîæíî óçíàòü íà ñàéòå êîìïàíèè-ðàçðàáîò÷èêà èëè â ñïðàâî÷íîé äîêóìåíòàöèè. Ñïèñîê îñíîâíûõ îáðàáîò÷èêîâ îïðåäåë¸í ñòàíäàðòîì W3C, íî êàæäûé ðàçðàáîò÷èê áðàóçåðà âîëåí äîáàâëÿòü îáðàáîò÷èêè ïî ñâîåìó æåëàíèþ. Íàïðèìåð, ñîáûòèå onAbort ïîääåðæèâàåòñÿ IE, íî íå ÿâëÿåòñÿ ñòàíäàðòíûì è íå ïîääåðæèâàåòñÿ áðàóçåðàìè Netscape.
 ïåðâûõ âåðñèÿõ áðàóçåðîâ Web-ïðîãðàììèñòû ìîãëè îïåðèðîâàòü ëèøü ñ íåáîëüøèìè íàáîðàìè ñîáûòèé äëÿ êàæäîãî òèïà îòîáðàæàåìûõ ýëåìåíòîâ, íî â ïîñëåäíèõ âåðñèÿõ ìîæíî íàçíà÷èòü ñîáûòèÿ ïðàêòè÷åñêè ëþáîìó ýëåìåíòó ñòðàíèöû.
Íàèáîëåå ïîïóëÿðíûå è ïîëåçíûå ñîáûòèÿ ïåðå÷èñëåíû â òàáëèöå:
| Ñîáûòèÿ ôîðì è ýëåìåíòîâ ñòðàíèöû | |
| onchange() | Ýëåìåíò òåðÿåò ôîðêóñ ââîäà, à ñîäåðæèìîå ýëåìåíòà èçìåíèëîñü çà âðåìÿ, ïîêà ýëåìåíò áûë â ôîêóñå. |
| onselect() | Êàêàÿ-òî ÷àñòü òåêñòà âíóòðè ýëåìåíòà ñòàíîâèòñÿ âûäåëåíîé. |
| ousubmit() | Â ôîðìå íàæàòà êíîïêà "Îòïðàâèòü", íî îòïðàâêà ôîðìû íà ñåðâåð åù¸ íå ïðîèçâîäèëàñü. |
| Ñîáûòèÿ ìûøè | |
| onclick() | Ïðîèçâåä¸í êëèê êíîïêîé ìûøè íà ýëåìåíòå óïðàâëåíèÿ. Ñîáûòèå âîçíèêàåò ïîñëå òîãî, êàê êíîïêà ìûøè áûëà îòïóùåíà. |
| onmousedown() | Íàæàòà êíîïêà ìûøè. |
| onmousemove() | Óêàçàòåëü ìûøè äâèæåòñÿ âíóòðè îáëàñòè îòîáðàæåíèÿ ýëåìåíòà. |
| onmouseout() | Óêàçàòåëü ìûøè âûøåë èç îáëàñòè îòîáðàæåíèÿ ýëåìåíòà. |
| oumouseover() | Óêàçàòåëü ìûøè íàõîäèòñÿ âíóòðè îáëàñòè îòîáðàæåíèÿ ýëåìåíòà. |
| onmouseup() | Îòæàòà êíîïêà ìûøè. |
| Ñîáûòèÿ îêíà (îáúåêò window) | |
| onblur() | Ýëåìåíò óïðàâëåíèÿ òåðÿåò ôîêóñ ââîäà, ò.å. êóðñîð ïåðåõîäèò ê äðóãîìó ýëåìåíòó. |
| onfocus() | Îòîáðàæàåìûé ýëåìåíò ïîëó÷èë ôîêóñà ââîäà. Äëÿ òåêñòîâûõ ïîëåé ýòî ñîáûòèå îçíà÷àåò, ÷òî êóðñîð óæå íàõîäèòñÿ â äàííîì ýëåìåíòå. |
| onload() | Çàâåðøåíà çàãðóçêà ñòðàíèöû. |
| onunload() | Ïðîèçâîäèòñÿ âûõîä èç äîêóìåíòà (çàêðûòèå èëè ïåðåíàïðàâëåíèå ñòðàíèöû íà äðóãîé àäðåñ). |
| Ñîáûòèÿ êëàâèàòóðû | |
| onkeydown() | Íàæàòà êíîïêè íà êëàâèàòóðå. |
| onkeypress() | Êíîïêà íà êëàâèàòóðå íàæàòà è íå îòïóñêàåòñÿ äîëüøå, ÷åì èíòåðâàë ïîâòîðåíèÿ. Äëèòåëüíîñòü èíòåðâàëà ïîâòîðåíèÿ ÿâëÿåòñÿ ñèñòåìíûì ïàðàìåòðîì è çàâèñèò îò íàñòðîåê îïåðàöèîííîé ñèñòåìû ïîëüçîâàòåëÿ. |
| onkeyup() | Îòïóùåíà ðàíåå íàæàòàÿ êíîïêà. |
Íàðÿäó ñî ñòàíäàðòíûìè ñîáûòèÿìè êîìïàíèÿ Microsoft â ñâîèõ áðàóçåðàõ IE âåðñèè 5.5 è âûøå ââåëà áîëüøîå êîëè÷åñòâî ñîáñòâåííûõ ñîáûòèé, íàïðèìåð oncut(), oncopy(), onselectstart() è ò.ï. Íî åñëè âû õîòèòå, ÷òîáû âàøè ñêðèïòû îäèíàêîâî õîðîøî ðàáîòàëè âî âñåõ áðàóçåðàõ - ñòàðàéòåñü èñïîëüçóéòå òîëüêî ñòàíäàðòíûé íàáîð ñîáûòèé.
×òîáû ïðè âîçíèêíîâåíèè ñîáûòèÿ âûïîëíèòü êàêèå-òî äåéñòâèÿ, íåîáõîäèìî ïðåäâàðèòåëüíî óêàçàòü îáðàáîò÷èê ýòîãî ñîáûòèÿ. Ýòî ìîæíî ñäåëàòü äâóìÿ ïóòÿìè: ïðîãðàììíî èëè íåïîñðåäñòâåííî â HTML-êîäå.
Ïðèìåð ïðîãðàììíîãî äîáàâëåíèÿ ñîáÿòèÿ onload():
<head>
<script type="text/javascript" language="javascript">
function initVariables()
{
alert('äîêóìåíò çàãðóæåí');
retun true;
}
window.onload = initVariables;
</script>
</head>
À ýòà âåðñèÿ ïðèìåðà èìååò òàêîé æå ôóíêöèîíàë, êàê ïðåäûäóùàÿ, íî îáðàáîò÷èê ñîáûòèÿ äîáàâëÿåòñÿ ñðåäñòâàìè HTML:
<head>
<script type="text/javascript" language="javascript">
function initVariables()
{
alert('äîêóìåíò çàãðóæåí');
retun true;
}
</script>
</head>
<body onload="initVariables();">
</body>
Àíàëîãè÷íûì îáðàçîì ìîãóò áûòü ïðèñâîåíû îáðàáîò÷èêè ñîáûòèé äðóãèì ýëåìåíòàì (ññûëêàì, ýëåìåíòàì ñïèñêà, êíîïêàì è ïð.).
Íåêîòîðûå ýëåìåíòû óæå èìåþ âñòðîåííûå îáðàáîò÷èêè ïî-óìîë÷àíèþ. Íàïðèìåð, êëèê ïî êíîïêå òèïà "submit" îòïðàâëÿåò ôîðìó íà ñåðâåð, à êëèê ïî ññûëêå ïåðåíàïðàâëÿåò áðàóçåð ïî óêàçàííîìó àäðåñó. Íî èíîãäà âîçíèêàåò íåîáõîäèìîñòü îòêëþ÷èòü ñòàíäàðòíûé îáðàáîò÷èê. Ñäåëàòü ýòî î÷åíü ïðîñòî - äîñòàòî÷íî â îáðàáîò÷èêå âåðíóòü çíà÷åíèå false èëè âîñïîëüçîâàòüñÿ ñâîéñòâàìè îáúåêòà event.
Ðàññìîòðèì ïðèìåð - ïðîâåðêà çíà÷åíèé ïîëåé ôîðìû ïåðåä îòïðàâêîé. Íàïðèìåð, ó íàñ åñòü ôîðìà ïîäïèñêè íà ïî÷òîâûå ðàññûëêè. Ôîðìà ñîñòîèò èç ïîëÿ ââîäà, êóäà ïîëüçîâàòåëü äîëæåí âïèñàòü ñâîé email, è êíîïêè "Îòïðàâèòü" òèïà "submit". Íàì íåîáõîäèìî ñîçäàòü ñêðèïò, êîòîðûé áóäåò ïðîâåðÿòü ïîëå ââîäà íà íàëè÷èå òåêñòà è çàïðåùàòü îòïðàâêó ôîðìû, åñëè ïîëüçîâàòåëü íè÷åãî íå ââ¸ë.
<head>
<script type="text/javascript" language="javascript">
function checkForm(evt)
{
// ïîëó÷àåì çíà÷åíèå ïîëÿ email
var value = document.getElementById("email").value;
// åñëè çíà÷åíèå îòñóòñòâóåò -
// ïðåäóïðåæäàåì ïîëüçîâàòåëÿ è
// çàïðåùàåì îòïðàâêó ïî÷òû
if(!value)
{
alert('íå óêàçàí email!');
return false;
}
// èíà÷å ïðîñòî ðàçðåøàåì îòïðàâêó ôîðìû
return true;
}
</script>
</head>
<body>
<form action="subsribe.php" method="get" onsubmit="return checkForm();">
<input type="text" name="email" id="email" /> <br />
<input type="submit" name="sbm" id="sbm" value="Ïîäïèñàòüñÿ" />
</form>
</body>
Ýòîò ñêðèïò âïîëíå ðàáîòîñïîñîáåí, íî íå ñîâñåì êîððåêòåí ñ òî÷êè çðåíèÿ ñèñòåìû ñîáûòèé JavaScript. Ïðàâèëüíûå ñïîñîáû îáðàáîòêè è áëîêèðîâêè ñîáÿòèé ìû ðàññìîòðèì â óðîêàõ ýòîãî ðàçäåëà.
