Llojet e ngjarjeve
Në agimin e zhvillimit Rrjet i gjere boteror zhvilluesit e uebit duhej të përballeshin vetëm me një numër të vogël ngjarjesh: "ngarkim", "klikoni", "over mouse" dhe të tjera. Këto lloje mjaft të vjetra ngjarjesh mbështeten mirë nga të gjithë shfletuesit. Me evoluimin e platformës së internetit, API-të më të fuqishme u përfshinë dhe numri i ngjarjeve u rrit ndjeshëm. Nuk ka asnjë standard që përcakton një grup të plotë ngjarjesh dhe numri i ngjarjeve të mbështetura vazhdon të rritet me shpejtësi. Këto ngjarje të reja identifikohen në dy burimet e mëposhtme:
Specifikimi i Ngjarjeve të Nivelit 3 të DOM, i cili, pas shumë vitesh stagnimi, filloi të zhvillohet në mënyrë aktive nën kujdesin e konsorciumit W3C.
Shumë nga API-të e reja në specifikimin HTML5 (dhe specifikimet shtesë të lidhura) përcaktojnë ngjarje të reja të përdorura, për shembull, për të menaxhuar historikun, për të tërhequr dhe lëshuar, për të shkëmbyer mesazhe midis dokumenteve dhe për të luajtur audio dhe video.
Vini re se shumë nga këto lloje të reja të ngjarjeve nuk janë ende të mbështetura gjerësisht dhe janë përcaktuar nga standardet që janë ende në fazën e projektimit. Ngjarjet që do t'i përdorni më shpesh në aplikacionet tuaja në ueb zakonisht do të bien në kategorinë e atyre të vjetra dhe të mbështetura nga të gjithë shfletuesit: ato janë ngjarje për të punuar me miun, tastierën, format HTML dhe objektin Window. Ne do t'i shqyrtojmë këto ngjarje.
Ngjarjet e ngarkimit të dokumentit
Shumica e aplikacioneve në ueb kanë nevojë absolutisht që shfletuesi i uebit t'i njoftojë kur dokumenti të ketë mbaruar ngarkimi dhe të jetë gati për të kryer veprime në të. Këtij qëllimi i shërben ngjarja ngarkesës në objektin Window. Ngjarja e ngarkimit ngrihet vetëm pasi dokumenti dhe të gjitha imazhet e tij të jenë ngarkuar plotësisht. Sidoqoftë, skriptet zakonisht mund të ekzekutohen menjëherë pasi dokumenti të jetë analizuar, përpara se të ngarkohen imazhet. Ju mund të zvogëloni ndjeshëm kohën e fillimit të një aplikacioni në internet duke filluar skriptimin në ngjarje të tjera përveç ngarkesës.
Ngjarja DOMContent i ngarkuar aktivizohet sapo të jetë ngarkuar dokumenti, analizohet nga analizuesi dhe të gjitha skriptet e shtyra janë ekzekutuar. Në këtë pikë, imazhet dhe skriptet me atribut asinkron mund të vazhdojë të ngarkohet, por vetë dokumenti do të jetë gati për operim. Kjo ngjarje u prezantua për herë të parë në Firefox dhe që atëherë është miratuar nga të gjithë prodhuesit e tjerë të shfletuesit, duke përfshirë Microsoft, i cili shtoi mbështetjen për këtë ngjarje në IE9. Pavarësisht prefiksit DOM në emër, kjo ngjarje nuk është pjesë e standardit të modelit Ngjarjet DOM Ngjarjet e nivelit 3, por është e standardizuar nga specifikimi HTML5.
Ndërsa ngarkohet dokumenti, vlera e vetive të dokumentit.readyState ndryshon. Çdo ndryshim në vlerën e kësaj vetie në IE shoqërohet nga një ngjarje gatistatechange në objektin Document, kështu që në IE kjo ngjarje mund të përdoret për të përcaktuar se kur ndodh gjendja e plotë. Specifikimi HTML5 standardizon ngjarjen gatistatechange, por udhëzon për ta ndezur atë menjëherë përpara ngjarjes së ngarkesës, kështu që nuk është plotësisht e qartë se cili është avantazhi i ngjarjes gatistatechange ndaj ngarkesës.
Shembulli i mëposhtëm përcakton funksionin WhenReady (). Funksioni i kaluar në whenReady () thirret (si metodë e objektit Document) sapo dokumenti të jetë gati për të kryer operacione. WhenReady () dëgjon për ngjarjet DOMContentLoaded dhe readystatechange dhe përdor ngjarjen e ngarkimit vetëm si një rezervë në rast se përdoret në shfletues të vjetër që nuk mbështesin dy ngjarjet e para. Funksioni WhenReady () do të përdoret në disa nga skenarët e mëposhtëm:
/ * Kaloni funksionin tuaj në whenReady () dhe ai do ta thërrasë atë (si një metodë e objektit të dokumentit) sapo të përfundojë analizë dokument dhe do të jetë gati për të kryer operacionet. Funksionet e regjistruara thirren në ngjarjen e parë DOMContentLoaded, gatistatechange ose load. Pasi dokumenti të jetë gati dhe të thirren të gjitha funksionet, WhenReady () do të thërrasë menjëherë të gjitha funksionet që i janë kaluar. * / var whenReady = (funksioni () (// Ky funksion kthehet nga funksioni whenReady () var funcs =; // Funksionet që do të thirren në ngjarje var gati = false; // Do të jetë e vërtetë kur thirret funksioni mbajtës // Trajtuesi i ngjarjeve , i cili thirret sapo dokumenti // të jetë gati për të kryer operacionet mbajtësi i funksionit (e) (// Nëse mbajtësi është thirrur tashmë, thjesht ktheni kontrollin nëse (gati) kthehet; // Nëse kjo ngjarje është gatistatechange dhe gjendja është // e shkëlqyer nga "i plotë", që do të thotë se dokumenti nuk është ende gati nëse (e.type === "readystatechange" && document.readyState! == "i plotë") kthehet; // Telefono të gjitha funksionet e regjistruara. // Vini re se çdo vlerë e // pronës funcs.length kontrollohet një herë, në rast se një nga funksionet e thirrura // regjistron funksione shtesë.for (var i = 0; i
Ngjarjet e miut
Ka mjaft ngjarje të lidhura me miun. Të gjitha janë renditur në tabelën e mëposhtme. Të gjitha ngjarjet e miut përveç futjes së miut dhe fletës së miut flluskohen lart. Klikoni mbi ngjarjet në lidhje dhe butonat e paraqitjes së formularit kanë veprime të paracaktuara që mund të zhbëhen. Teorikisht është e mundur të anulohet ngjarja e menysë së kontekstit dhe të parandalohet shfaqja e menysë së kontekstit, por disa shfletues kanë cilësime që e bëjnë këtë ngjarje të pa anulueshme.
| Një lloj | Përshkrim |
|---|---|
| klikoni | Një ngjarje e nivelit të lartë që ngrihet kur përdoruesi shtyp dhe lëshon një buton të mausit ose aktivizon ndryshe një element. |
| menyja e kontekstit | Një ngjarje e anulueshme që ngrihet përpara se të shfaqet menyja e kontekstit. Prodhimi aktual i shfletuesve menyja e kontekstit me klikim të djathtë, pra këtë ngjarje mund të përdoret gjithashtu si një ngjarje klikimi. |
| dblkliko | Hapet kur përdoruesi klikon dy herë. |
| mousedown | Ndizet kur përdoruesi shtyp butonin e miut. |
| mouseup | Ndizet kur përdoruesi lëshon butonin e miut. |
| lëvizja e miut | Ngrihet kur përdoruesi lëviz treguesin e miut. |
| mbi mouse | Ngrihet kur treguesi i miut është i pozicionuar mbi një element. Vetia relatedTarget (ose fromElement në IE) identifikon elementin nga i cili u zhvendos treguesi i miut. |
| mouseout | Ngrihet kur treguesi i miut largohet nga elementi. Vetia relatedTarget (ose toElement në IE) specifikon elementin ku u zhvendos treguesi i miut. |
| fut miun | Ngjashëm me mouseover, por nuk shfaqet. Së pari u shfaq në IE dhe u standardizua në HTML5, por ende nuk mbështetet nga të gjithë shfletuesit. |
| gjethe miu | Ashtu si mouseout, por nuk shfaqet. Së pari u shfaq në IE dhe u standardizua në HTML5, por ende nuk mbështetet nga të gjithë shfletuesit. |
Objekti i kaluar te mbajtësit e ngjarjeve të miut ka veti klientiX dhe kliente që përcaktojnë koordinatat e treguesit në lidhje me dritaren. Për t'i kthyer ato në koordinata dokumentesh, duhet t'u shtoni atyre pozicionet e shiritit të lëvizjes së dritares.
Vetitë altKey, ctrlKey, metaKey dhe ShiftKey përcaktoni gjendjet e çelësave të ndryshëm modifikues që mund të jenë mbajtur të shtypur në kohën e ngjarjes: ato mund të përdoren për të dalluar një klikim të thjeshtë nga një klikim me tastin Shift të shtypur, për shembull.
Pronës butonin përcakton se cili buton i miut është mbajtur i shtypur në momentin e ngjarjes. Megjithatë, shfletues të ndryshëm shkruajnë në këtë pronë kuptime të ndryshme kështu që është e vështirë të përdoret në një mënyrë portative.
Disa shfletues ngrenë ngjarjen e klikimit vetëm kur klikohet butoni i majtë. Prandaj, nëse keni nevojë të trajtoni klikimet e butonave të tjerë, duhet të përdorni ngjarjet e hedhjes së miut dhe mouseup. Ngjarja e menysë së kontekstit zakonisht sinjalizon se është kryer një klikim me të djathtën, por siç u përmend më lart, nuk është gjithmonë e mundur të parandalohet shfaqja e menysë së kontekstit në trajtuesit për këtë ngjarje.
Shembulli i mëposhtëm demonstron një funksion zvarritjeje () që, kur thirret nga një mbajtës i ngjarjeve me ulje të miut, i lejon përdoruesit të tërheqë elementë të dokumentit të pozicionuar absolutisht me miun. Funksioni drag () funksionon me të dy modelet e ngjarjeve, DOM dhe IE.
Funksioni drag () merr dy argumente. E para është sendi që po tërhiqet zvarrë. Ky mund të jetë elementi që ngriti ngjarjen e uljes së miut dhe elementi që e përmban atë (për shembull, mund ta lini përdoruesin të kapë një element që duket si një titull dritareje dhe të tërhiqni elementin që përmban që duket si një dritare). Sidoqoftë, në çdo rast, duhet të jetë një element dokumenti i pozicionuar absolutisht me duke përdorur CSS-atribut pozicion. Argumenti i dytë është objekti i ngjarjes i marrë me ngjarjen e zbritjes së miut:
/ * zvarrit () - tërhiq dhe lësho elementë HTML të pozicionuar absolutisht. Ky funksion duhet të thirret nga mbajtësi i ngjarjeve onmousedown. Ngjarjet pasuese të lëvizjes së miut do të bëjnë që elementi i specifikuar të lëvizë. Ngjarja e ngritjes së miut do të përfundojë lëvizjen. Ky zbatim funksionon si në modelet standarde ashtu edhe në IE të ngjarjeve. Përdor funksionin getScrollOffsets (). Argumentet elementToDrag: Elementi që ka marrë ose përmban ngjarjen e uljes së miut. Ky artikull duhet të ketë pozicionim absolut... Vlerat e vetive të tij style.left dhe style.top do të ndryshojnë kur përdoruesi të lëvizë treguesin e miut. ngjarje: Objekti Ngjarja e marrë nga mbajtësi i ngjarjeve me ulje të miut. * / funksioni zvarrit (elementToDrag, ngjarje) (// Konvertoni koordinatat fillestare të miut në koordinatat e dokumentit var scroll = getScrollOffsets (); // Funksioni ndihmës deklaruar më poshtë var startX = event.clientX + scroll.x; var startY = event.clientY + scroll.y; // Koordinatat fillestare (në lidhje me fillimin e dokumentit) të elementit që // do të zhvendoset. Meqenëse elementiToDrag është absolutisht i pozicionuar, // vetia e tij offsetParent supozohet se i referohet trupit të dokumentit. var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Gjeni distancën midis pikës së ngjarjes së uljes së miut dhe këndit të sipërm majtas të elementit. // Kjo distancë do të merret parasysh gjatë lëvizjes së treguesit të miut. var deltaX = startX - origX; var deltaY = startY - origY; ( if (document.addEventListener) (// Modeli standard i ngjarjes // Regjistro mbajtësit e interceptimit në dokumentin document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, true);) tjetër nëse ( dokument .attachEvent) (// Modeli i ngjarjes IE për IE5-8 // Në modelin e ngjarjes IE, ngjarjet përgjohen duke thirrur metodën // setCapture () të elementit. elementToDrag.setCapture (); elementToDrag.attachEvent ("onmousemove ", moveHandler); elementToDrag. attachEvent ("onmouseup", upHandler); // Interpretoni humbjen e kapjes së ngjarjeve të miut si një element të ngjarjes së mausitToDrag.attachEvent ("onlosecapture", upHandler);) // Kjo ngjarje është trajtuar dhe nuk duhet t'u kalohet mbajtësve të tjerë nëse ngjarja (event.stopPropagation) stopPropagation (); // Modeli standard else event.cancelBubble = true; // IE // Parandaloni kryerjen e veprimeve të paracaktuara. if (event.preventDefault) event.preventDefault (); // Modeli standard other event.returnValue = false; // IE / * Ky mbajtës kap ngjarjet e lëvizjes së miut që ndodhin gjatë tërheqjes së një elementi. Ai është përgjegjës për lëvizjen e elementit. * / funksioni moveHandler (e) (nëse (! e) e = window.event; // Modeli i ngjarjes IE // Zhvendos elementin në pozicionin e miut bazuar në pozicionet dhe zhvendosjet e shiritit // në lidhje me lëvizjen fillestare click.var = getScrollOffsets ( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; / / Dhe anuloni përhapjen e ngjarjes më tej nëse (e.stopPropagation) e.stopPropagation (); // Modeli standard tjetër e.cancelBubble = true; // IE) / * Ky mbajtës përgjon ngjarjen përfundimtare të mouseup që përfundon operacionin e tërheqjes. * / funksioni upHandler (e) (if (! e) e = window.event; // IE Event Model // Hiq mbajtësit e ngjarjeve interceptuese. if (document.removeEventListener) (// DOM Event Model document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) other if (document.detachEvent) (// IE 5+ Modeli i ngjarjes elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // Dhe ndërpret përhapjen e mëtejshme të ngjarjes. if (e.stopPropagation) e.stopPropagation (); // Standard modeli else e.cancelBubble = e vërtetë; // IE)) // I kthen pozicionet aktuale të shiritit të lëvizjes si vetitë x dhe y të funksionit të objektit getScrollOffsets (w) (// Përdorni dritaren e specifikuar ose atë aktuale, // nëse funksioni thirret pa argument w = w | | dritare; // Mënyra tjetër funksionon në të gjithë shfletuesit përveç IE 8 dhe më poshtë nëse (w.pageXOffset! = null) kthehet (x: w.pageXOffset, y: w.pageYOffset); // Për IE (dhe shfletues të tjerë) në modaliteti standard var d = w.dokument; nëse (document.compatMode == "CSSICompat") kthehet (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Për shfletuesit në modalitetin e përputhshmërisë kthehen (x: d.body.scrollLeft, y: d.body.scrollTop); )
Fragmenti i mëposhtëm tregon se si të përdoret funksioni zvarrit () në një skedar HTML:
Ky eshte nje test. Kontrollimi, kontrolli, kontrolli.
Më e rëndësishmja këtu është atributi onmousedown në elementin e mbivendosur
Ngjarjet e futjes së tekstit
Shfletuesit mbështesin tre ngjarje të vjetra të hyrjes në tastierë. Ngjarjet e tastierës dhe tastierës janë ngjarje të nivelit të ulët dhe mbulohen seksioni tjetër... Megjithatë, ngjarja shtypja e tastitështë ai i nivelit të lartë që tregon se është futur një karakter i printueshëm.
Specifikimi i draftit të Ngjarjeve të Nivelit 3 DOM përcakton një ngjarje më të përgjithësuar futja e tekstit gjeneruar në përgjigje të futjes së tekstit, pavarësisht se si është futur.
Me ngjarjen e propozuar të hyrjes së tekstit dhe ngjarjen textInput të implementuar aktualisht, kalohet një objekt i thjeshtë i ngjarjes që ka një veti të dhënash që ruan tekstin e futur. (Një veçori tjetër e propozuar, inputMethod, duhet të përcaktojë burimin e hyrjes, por ende nuk është zbatuar.) Për futjen e tastierës, vetia e të dhënave zakonisht do të përmbajë një karakter të vetëm, por kur shtypet nga burime të tjera, mund të përmbajë shumë karaktere .
Objekti i ngjarjes i dërguar me ngjarjen e shtypjes së tastit ka një organizim më kompleks. Ngjarja e shtypjes së tastit përfaqëson hyrjen e një karakteri të vetëm. Ky karakter gjendet në objektin e ngjarjes si një vlerë numerike e pikës së kodit Unicode dhe duhet të përdorni metodën String.fromCharCode () për ta kthyer atë në një varg. Në shumicën e shfletuesve, pika e kodit e karakterit të futur ruhet në pronë Kodi kyç objekt ngjarjeje. Megjithatë, për arsye historike, Firefox-i e përdor këtë pronë në vend të kësaj charCode.
Në shumicën e shfletuesve, ngjarja e shtypjes së tastit ngrihet vetëm kur futet një karakter i printueshëm. Megjithatë, në Firefox, ngjarja e shtypjes së tastit ngrihet gjithashtu për karaktere që nuk mund të printohen. Për të dalluar dy rastet (dhe për të injoruar karakteret jo të printueshme), mund të kontrolloni nëse veçoria charCode e objektit të ngjarjes ekziston dhe përmban vlerën 0.
Ngjarjet e futjes së tekstit, tekstit dhe shtypjes së tastierës mund të anulohen për të parandaluar futjen e karaktereve. Kjo do të thotë, këto ngjarje mund të përdoren për të filtruar hyrjen. Për shembull, mund të parandaloni futjen e karaktereve alfabetike në një fushë të hyrjes numerike.
Shembulli më poshtë tregon modulin në JavaScript që zbaton këtë lloj filtrimi. Ai kërkon për sende me një atribut shtesë (jo standard) karaktere të dhëna të lejuara. Regjistron futjen e tekstit, textInput dhe mbajtësit e ngjarjeve të shtypjes së tastierës për të gjithë elementët e gjetur dhe kufizon hyrjen në karakteret e shprehjeve të rregullta të specifikuara në atributin data-lejed-chars:
/ * Hyrja e filtrit për artikujt Ky modul gjen të gjithë elementët në dokumentin që kanë atributin "data-lejed-chars". Regjistron mbajtësit e ngjarjeve të shtypjes, hyrjes së tekstit dhe tekstit për këto elemente për të kufizuar grupin e karaktereve që mund të futen për të lejuar futjen e vetëm karaktereve të specifikuara në atribut. Nëse elementi gjithashtu ka një atribut "data-messageid", vlera e këtij atributi interpretohet si id i një elementi tjetër në dokument. Nëse përdoruesi fut një karakter të pavlefshëm, elementi me ID-në e specifikuar bëhet i dukshëm. Nëse përdoruesi fut një karakter të vlefshëm, artikulli i mesazhit fshihet. Ky artikull me një mesazh ka për qëllim të shfaqë një shpjegim se përse u refuzua hyrja e përdoruesit. Duhet të stilohet me CSS në mënyrë që fillimisht të jetë i padukshëm. * / WhenReady (funksioni () (// Thirrni këtë funksion kur dokumenti është i ngarkuar // Merrni të gjithë elementët var inputelts = document.getElementsByTagName ("input"); // Anashkaloni ato në një cikli for (var i = 0; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий Karakteri ASCII e.charCode == 0 || // Tasti i funksionit (në Firefox) e.ctrlKey || e.altKey) // Modifier key holded return; // Mos e filtro këtë ngjarje // Konverto kodin e karakterit në varg var tekst = String.fromCharCode (kodi); ) // Gjeni informacionin që na nevojitet në këtë element input var allow = target.getAttribute ("data-allowed-chars"); // Karakteret e lejuara var messageid = target.getAttribute ("data-messageid"); // ID e mesazhit nëse (messageid) // Nëse është dhënë id, merrni elementin var messageElement = document.getElementById (messageid); // Hapni karakteret në tekstin e futur për (var i = 0; i< text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем shprehje e rregullt if (c.search (e lejuar) == -1) (// Karakter i pavlefshëm? // Shfaq elementin e mesazhit nëse specifikohet nëse (messageElement) messageElement.style.visibility = "visible"; // Anuloni veprimet e paracaktuara për të parandaluar që teksti të jetë futur nëse (e.preventDefault) e.preventDefault (); if (e.returnValue) e.returnValue = false; kthe false;)) // Nëse të gjitha karakteret ishin të vlefshme, fshihni elementin // me një mesazh, nëse ishte nëse (messageElement) është specifikuar messageElement.style.visibility = "fshehur"; )));
Më poshtë është një mostër Shënimi HTML duke përdorur këtë modul:
Figura më poshtë ilustron përdorimin e kësaj forme. Këtu, pasi futa emrin, futa një shifër që u bllokua automatikisht dhe u shfaq një mesazh paralajmërues:
Ngjarjet e shtypjes së tastit dhe të futjes së tekstit aktivizohen pak përpara futjes aktuale të tekstit të ri në elementin e fokusuar të dokumentit, në mënyrë që mbajtësit e tyre të parandalojnë futjen e tekstit duke anuluar ngjarjen.
Shfletuesit gjithashtu zbatojnë ngjarjen hyrje i cili aktivizohet pasi teksti është futur në element. Kjo ngjarje nuk mund të anulohet dhe objekti i saj përkatës i ngjarjes nuk përmban informacion në lidhje me tekstin e futur - thjesht njofton se përmbajtja e tekstit të elementit ka ndryshuar. Nëse, për shembull, dëshironi të siguroheni që të futen vetëm karaktere të mëdha, mund të përcaktoni një mbajtës të ngjarjeve hyrëse siç tregohet më poshtë:
Ngjarja hyrëse është e standardizuar në specifikimin HTML5 dhe mbështetet nga të gjithë shfletues modern përveç IE. Një efekt i ngjashëm mund të arrihet në IE duke zbuluar një ndryshim në vlerën e vetive të vlerës. element teksti të dhëna duke përdorur një ngjarje të personalizuar ndryshim prone.
Ngjarjet e tastierës
Ngjarjet çelësi dhe keyup aktivizohet kur përdoruesi shtyp ose lëshon një tast në tastierë. Ato janë krijuar për çelësat modifikues, çelësat e funksionit dhe çelësat alfanumerik. Nëse përdoruesi mban të shtypur një çelës mjaftueshëm për të aktivizuar modalitetin e përsëritjes automatike, shumë ngjarje të tastierës do të gjenerohen përpara se të ndodhë ngjarja e tastierës.
Objekti i ngjarjes që korrespondon me këto ngjarje ka pronën Kodi kyç me një vlerë numerike që identifikon tastin e shtypur. Për çelësat që gjenerojnë karaktere të printueshme, në rast i përgjithshëm vetia keyCode përmban pikën e kodit Unicode që korrespondon me karakterin bazë të shfaqur në çelës. Tastet me shkronja gjenerojnë gjithmonë vlera të kodit kyç që korrespondojnë me shkronjat e mëdha, pavarësisht nga gjendja e tastit Shift, pasi këto janë karakteret e përshkruara në taste.
Po kështu, çelësat numerikë gjenerojnë gjithmonë vlerat e kodit kyç që korrespondojnë me karaktere dixhitale përshkruhen në çelësa, edhe nëse mbani të shtypur Tasti Shift për të futur një shenjë pikësimi. Për çelësat që nuk përputhen me karakteret e printueshme, vetia keyCode do të ketë një kuptim tjetër. Këto vlera të vetive të kodit kyç nuk janë standardizuar kurrë. Megjithatë, në shfletues të ndryshëm ato nuk janë aq të ndryshme sa nuk mund të sigurohet transportueshmëria.
Ashtu si objektet e ngjarjeve të miut, objektet e ngjarjeve të tastierës kanë veti altKey, ctrlKey, metaKey dhe ShiftKey që bëhen të vërteta nëse tasti modifikues përkatës është mbajtur i shtypur kur është ngritur ngjarja.
Ngjarjet keydown dhe keyup dhe vetia keyCode kanë ekzistuar për më shumë se një dekadë, por ato kurrë nuk janë standardizuar. Drafti i Ngjarjeve të Nivelit 3 DOM standardizon llojet e ngjarjeve keydown dhe keyup, por nuk standardizon vetinë keyCode. Në vend të kësaj, ai përcakton një pronë të re, çelës, i cili duhet të përmbajë emrin e çelësit si një varg. Nëse çelësi përputhet me një karakter të printueshëm, vetia e çelësit duhet të përmbajë atë karakter të printueshëm. Për çelësat e funksionit, vetia e çelësit duhet të përmbajë vlera të tilla si F2, Home ose Left.
Deri në momentin e shkrimit, vetia kryesore e Ngjarjeve të Nivelit 3 të DOM nuk është zbatuar ende në asnjë shfletues. Megjithatë, shfletuesit e bazuar në Webkit, Safari dhe Chrome përcaktojnë një veti në këto objekte ngjarjesh kyçIdentifikues... Për çelësat e funksionit, si vetia e çelësit, vetia keyIdentifier nuk përmban një numër, por një varg me emrin e tastit, si Shift ose Enter. Për çelësat që korrespondojnë me karaktere të printueshme, kjo veti përmban përfaqësimin e vargut më pak të përshtatshëm për përdoruesit të pikës së kodit Unicode të karakterit. Për shembull, tasti A korrespondon me U + 0041.
Shembulli i mëposhtëm përcakton një klasë Keymap që harton identifikuesit e shkurtoreve si PageUp, Alt_Z dhe ctrl + alt + shift + F5 në funksionet JavaScript që thirren në përgjigje të atyre goditjeve të tastave. Përkufizimet e hartës së çelësit i kalohen konstruktorit Keymap () në formë Objekti JavaScript emrat e vetive të të cilëve korrespondojnë me identifikuesit e kombinimeve të çelësave dhe vlerat e këtyre veçorive përmbajnë referenca për funksionet e mbajtësit. Lidhjet shtohen dhe hiqen duke përdorur metodat bind () dhe unbind ().
Instalon një objekt Keymap në një element HTML (zakonisht një objekt Dokumenti) duke përdorur metodën install (). Vendosja e objektit Keymap regjistron një mbajtës për ngjarjen e tastierës në këtë element. Sa herë që shtypet një tast, mbajtësi kontrollon për një funksion që përputhet me atë kombinim. Nëse funksioni ekziston, ai thirret.
Trajtuesi i ngjarjeve keydown përdor veçorinë e çelësit Ngjarjet e nivelit 3 të DOM, nëse ekziston. Përndryshe, ai përpiqet të përdorë vetinë Webkit KeyIdentifier. Dhe si rikthim, mbajtësi përdor veçorinë jo standarde të kodit të çelësit:
// Funksioni i konstruktorit Keymap (lidhjet) (this.map = (); // Përcaktoni identifikuesin e hartës-> mbajtësin nëse (lidhjet) (// Kopjo hartën fillestare të lidhjeve në të për (emri në lidhje) this.bind ( emri, lidhjet);)) // Lidh id-në e çelësit të specifikuar me funksionin e specifikuar mbajtës Keymap.prototype.bind = funksion (kyç, func) (this.map = func;); // Heq lidhjen për id-në e çelësit të specifikuar Keymap.prototype.unbind = funksioni (çelësi) (fshij këtë.map;); // Instalon këtë objekt Keymap në elementin e specifikuar HTML Keymap.prototype.install = funksion (element) (var keymap = ky; // Përcaktoni funksionet e mbajtësit të ngjarjeve mbajtësin e funksionit (ngjarje) (ktheje keymap.dispatch (ngjarje, element);) // Set it if (element.addEventListener) element.addEventListener ("keydown", handler, false); other if (element.attachEvent) element.attachEvent ("onkeydown", handler); // Kjo metodë delegon trajtimin e ngjarjeve të tastierës bazuar në funksionin Keymap.prototype bindings.dispatch = (ngjarje, element) (// Fillimisht, nuk ka emra çelësash modifikues ose emra çelësash var modifikues = ""; emri i çelësit var = null; / / Ndërtoni vargjet e modifikuesve kanonikë nga shkronjat e vogla // karakteret sipas rendit alfabetik. Nëse (event.altKey) modifikuesit + = "alt_"; if (event.ctrlKey) modifikuesit + = "ctrl_"; nëse (ngjarje .metaKey) modifikuesit + = " meta_"; nëse modifikuesit (event.shiftKey) + = "shift_"; // Emri i çelësit është i lehtë për t'u marrë nëse vetia e çelësit zbatohet, // përcaktohet nga standardi i nivelit 3 DOM: if (event.key) emri i çelësit = event.key; // Mund të përdorni veçorinë keyIdentifier // për të marrë emrat e çelësave të funksionit në Safari dhe Chrome tjetër nëse (event.keyIdentifier && event.keyIdentifier.substring (0,2)! == "U +") Emri i çelësit = ngjarje. Identifikuesi i çelësit; // Përndryshe, mund të përdorni veçorinë keyCode // dhe kodin e shfaqjes> emrin më poshtë tjetër ke yname = Keymap.keyCodeToKeyName; // Nëse emri i çelësit nuk mund të përcaktohet, thjesht injoroni ngjarjen // dhe kthehuni. nëse (! emri kyç) kthimi; // Identifikuesi kanonik i çelësit përbëhet nga emrat e modifikuesve // dhe emri i tastit me shkronja të vogla var keyid = modifikuesit + emri i çelësit.toRasti i vogël (); // Kontrolloni nëse ka një lidhje për këtë identifikues keys var handler = kjo.hartë; if (handler) (// Nëse mbajtësi është për këtë çelës, thirreni // Thirrni funksionin e mbajtësit var retval = handler.call (element, ngjarje, çelës); // Nëse mbajtësi ktheu false, anuloni veprimet e paracaktuar / / dhe anuloni ngjarjet e flluskimit nëse (retval === false) (if (event.stopPropagation) ngjarja.stopPropagation (); // Modeli DOM else event.cancelBubble = e vërtetë; // Modeli IE if (event.preventDefault) event.preventDefault (); // DOM else event.returnValue = false; // IE) // Ktheni vlerën e marrë nga kthimi i kthimit të mbajtësit; )); // Funksioni ndihmës për konvertimin e identifikuesit të çelësit në formën kanonike. // Ne duhet të konvertojmë identifikuesin "meta" në "ctrl" në mënyrë që // identifikuesi Meta-C të jetë "Command-C" në Mac dhe "Ctrl-C" në të gjithë të tjerët. Keymap.normalize = funksion (keyid) (keyid = keyid.toLowerCase (); // Fjalë të vogla var = keyid.split (/ \ s + | [\ - + _] /); // Ekstrakt modifikuesit var emri kyç = fjalë . pop (); // emri kyç është emri i fjalës së fundit = Keymap.aliases || emri kryesor; // A është ky një pseudonim? words.sort (); // Rendit modifikuesit words.push (emri kryesor); // Vendos përsëri të normalizuar fjalët e kthimit të emrit .join ("_"); // Vendos të gjitha së bashku) Keymap.aliases = (// Harto pseudonimet kryesore të njohura me emrat e tyre // "zyrtarë" të përdorur në nivelin 3 të DOM dhe harto kodet e çelësave // tek emrat më poshtë. Emri dhe vlera duhet të përbëhen vetëm nga shkronjat e vogla "escape": "esc", "return": "enter", "delete": "del", "ctrl": "control", "space" : "spacebar", "ins": "insert"); // Vetia e vjetër keyCode e objektit të ngjarjes keydown nuk është e standardizuar // Por vlerat e mëposhtme mund të përdoren me sukses në shumicën e shfletuesve dhe sistemeve operative. Keymap.keyCodeToKeyName = (// Çelësat me fjalë ose shigjeta mbi to 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Control", 18: "Alt", 19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Spacebar", 33: "PageUp", 34: "PageDown", 35: "Fund", 36: "Home", 37: "Majtas", 38: "Lart", 39: "Djathtas", 40: "Poshtë", 45: "Fut", 46: "Del", // Çelësat numerikë në tastierën kryesore (jo në atë shtesë) 48: "0", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: " 6", 55: "7", 56: "8", 57: "9", // Çelësat e shkronjave. Vini re se nuk ka asnjë ndryshim // midis sipërme dhe shkronja të vogla 65: "A", 66: "B", 67: "C", 68: "D", 69: "E", 70: "F", 71: "G", 72: "H", 73: "I", 74: "J", 75: "K", 76: "L", 77: "M", 78: "N", 79: "O", 80: "P", 81: "Q ", 82:" R ", 83:" S ", 84:" T ", 85:" U ", 86:" V ", 87:" W ", 88:" X ", 89:" Y ", 90: "Z", // Çelësat numerikë të aktivizuar tastierë shtesë dhe tastet me shenja pikësimi. // (Nuk mbështetet në Opera.) 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6" , 103: "7", 104: "8", 105: "9", 106: "Shumë", 107: "Shto", 109: "Zbris", 110: "Dhjetore", 111: "Pjesto", / / Tastet e funksionit 112: "F1", 113: "F2", 114: "F3", 115: "F4", 116: "F5", 117: "F6", 118: "F7", 119: "F8" , 120: "F9", 121: "F10", 122: "F11", 123: "F12", 124: "F13", 125: "F14", 126: "F15", 127: "F16", 128 : "F17", 129: "F18", 130: "F19", 131: "F20", 132: "F21", 133: "F22", 134: "F23", 135: "F24", // Çelësat me shenja pikësimi që nuk kërkojnë // mbani të shtypur tastin Shift për të shtypur. // Viza nuk mund të përdoret në një mënyrë portative: FF kthen // të njëjtin kod si për tastin Zbris 59: ";", 61: "=", 186: ";", 187: "=", // Firefox dhe Opera kthen 59.61 188: ",", 190: ".", 191: "/", 192: "` ", 219:" [", 220:" \\ ", 221:"] ", 222: """);
Një shembull duke përdorur objektin Keymap është paraqitur më poshtë:
Window.onload = funksion () (var keymap = harta e re e tastierës; // Krijo një objekt të ri të hartës së tastierës keymap.bind ("ctrl + a", // Ctrl + Një funksion shkurtore (ngjarje, tasti) (lajmërim ("Ke shtypur: " + tasti))); // Një tjetër lidhëse Ctrl + Enter keymap.bind ("ctrl + enter", funksion (ngjarje, tasti) (lajmërim ("Ke shtypur:" + tasti))); keymap.install (dokument. body); // Vendosni objektin Keymap për të gjithë dokumentin);
Etiketa më e zakonshme e përdorur në forma është ... Nuk ka etiketë fundore. I gjithë informacioni që shfletuesi duhet të përpunojë përmbahet drejtpërdrejt në etiketë dhe vendoset duke përdorur atribute të ndryshme. Semantika ndryshon shumë në varësi të vlerës së atributit të tij lloji.
Atributet e etiketimit
type Atributi kryesor që specifikon llojin e elementit. Nëse atributi nuk është i specifikuar, atëherë është i paracaktuar teksti.Vlerat e mundshme:
Jo të gjithë shfletuesit mbështesin llojet e shtuara në HTML5.
Nëse shfletuesi nuk mbështet asnjë nga llojet e reja, atëherë do të supozojë se ky është një lloj. Mënyra e organizimit të mbështetjes për shfletuesit e vjetër përshkruhet duke përdorur një shembull të datës.
Autocomplete = "off" Çaktivizon plotësimin automatik për të kësaj fushe... Shumë i dobishëm për fushat e hyrjes për kodet një herë, captchas, etj. .setAttribute ("autocomplete", "off"); fokusim automatik Rikthim automatik përqendrohuni në ngarkimin e faqes. Vlera mund të vendoset në tre mënyra: ...
...
... Një shembull i imitimit të vetive të fokusimit automatik për shfletuesit e vjetër. i çaktivizuar E bën elementin të padisponueshëm. Artikujt e padisponueshëm nuk ngarkohen në server. emri Emri i fushës. Çdo fushë hyrëse që krijoni duhet të ketë emrin e saj unik, përndryshe skripti nuk do të përcaktojë se cilat fusha i përkasin vlerat e marra. Natyrisht, emri i fushës së hyrjes duhet të përputhet me emrin që përshkruhet për të në programin e përpunimit. vlera Vlera e paracaktuar e fushës ose etiketës në buton. madhësia Madhësia e fushës së tipit. maxlength Kufizoni numrin e karaktereve që mund të futen në një fushë tipi. readonly = "readonly" ose "" Parandalon ndryshimet në artikull. kërkohet Kontrollon automatikisht nëse fusha është e plotësuar.
Për të nënvizuar një fushë të kërkuar të plotësuar saktë, mund të përdorni strukturën e mëposhtme të stilit: min Vlera minimale e një numri në një fushë të llojit numri... max Vlera maksimale e një numri në një fushë të llojit numri... hap Hapi i ndryshimit të numrit në fushën e tipit numri... model Modeli i fushës së hyrjes. Kontrollimi i korrektësisë së futjes së të dhënave. Modelet e mostrave për modelin e hyrjes në formë html5. mbajtës i vendndodhjes Teksti i këshillimit në fushën e formës, i cili zhduket automatikisht kur merret fusha e fokusit.
Një shembull i vendosjes së një stili të këshillës së veglave:
IE dhe Firefox (deri në versionin 18) vendmbajtes konsiderohet pseudo-klasë, dhe në të tjera konsiderohet pseudo-element.
REZULTATI:
Lista Një listë opsionesh që mund të zgjidhni ndërsa shkruani në kutinë e tekstit.
Fillimisht, kjo listë fshihet dhe bëhet e disponueshme kur fusha merr fokusin ose kur shkruan.
Llojet e elementeve INPUT
Butoni BUTONI
Butoni BUTONIështë menduar për ato raste kur duhet të ekzekutoni ndonjë skript. Kjo do të thotë, një ngjarje është e varur në buton OnСlick dhe thirret funksioni i dëshiruar. atribut vlerë vendos etiketën në buton. atribut ne klikim specifikon një mbajtës JavaScript që thirret kur klikohet butoni. atribut emri shërben për emërtimin JavaScript të butonit (nuk transmetohet në server).
Shembull
REZULTATI:
Butoni SUBMIT
Ky buton është për dërgimin e një formulari. Në shumicën e shfletuesve, duket pothuajse i padallueshëm nga një buton. Ai në vetvete nuk transmetohet, por shërben vetëm për kontroll.
atribut ne klikim për butonin DORËZOJ praktikisht nuk përdoret, pasi është më mirë të përdorni një mbajtës ngjarjesh më dorëzo specifikuar në etiketë
REZULTATI:
atribut vlerë jep disa avantazhe kur përdorni më shumë se një buton transferimi të të dhënave. Në këtë rast, bazuar në vlerën e ndryshores së marrë, skripti do të jetë në gjendje të përcaktojë se si të përpunojë më tej informacionin e marrë.
Shembull
REZULTATI:
atribut formnovalidate mund të aplikohet për të parandaluar vërtetimin e vlerave të formularit.
Shembull
REZULTATI:
Butoni RESET
Ky është butoni për pastrimin e formularit. Kur shtypet, të gjithë artikujt e ndryshuar kthehen në vlerat e tyre të paracaktuara. Përdoret rrallë. Megjithatë, në disa raste mund të jetë mjaft i dobishëm.
Këshillë: bëni kujdes me zgjedhjen e etiketës në buton RISET... Diçka si "Pastro", "Fillo nga e para", "Fshi hyrjen", etj. do të jetë mjaft vizuale (dhe, më e rëndësishmja, intuitivisht e kuptueshme edhe për një çajnik). Në përgjithësi, është e nevojshme që përdoruesi të mos ketë një hije dyshimi për qëllimin e këtij çelësi.
Shembull
REZULTATI:
Fusha e futjes TEXT
Fusha e futjes së tekstit është kutia e tekstit më e përdorur në formularë. Për më tepër, me të drejtë mund të konsiderohet kryesore dhe element thelbësor forma. Ky lloj përdoret nga etiketa
si parazgjedhje, mund ta lini bosh për të shfaqur një kuti teksti. Megjithatë, nëse është e nevojshme të vendosni stilin për përzgjedhësin hyrje, pastaj atributin lloji = "tekst" nuk mund të anashkalohet.
Emri i fushës i specifikuar nga atributi emri, është gjithmonë i nevojshëm, pasi bazuar në këtë parametër, shfletuesi i kalon skriptit emrin = çiftin e vlerës.
Shembull
REZULTATI:
Teksti "Ivanov" vendoset në fushën e krijuar si vlerë fillestare. Nëse përdoruesi nuk bën ndryshime ose klikon butonin, vlera Ivanov do t'i dërgohet skriptit si mbiemri i përdoruesit.
Fusha e futjes së numrit NUMBER
Fusha është për futjen e numrave. Pjesa e pjesshme kur futet mund të ndahet ose me pikë (2.5) ose me presje (2.5). Nëse përdoruesi fut shkronja, formulari nuk do t'i dërgohet serverit.
Shembull
REZULTATI:
Ju mund të vendosni minimumin vlera maksimale fushat dhe hapi i ndryshimit të numrit. Vlera e hapit mund të jetë pozitive ose negative, por duhet të jetë më e madhe se 0. Nëse numri i futur në fushë nuk i plotëson kufijtë e specifikuar, atëherë dërgimi në server nuk do të ndodhë.
Shembull
REZULTATI:
Për të specifikuar ndonjë hap, përdorni hap = "çdo".
Shembull
REZULTATI:
Fusha numri shfaqet ndryshe: disa shfletues shfaqin gjithmonë shigjeta, disa vetëm kur fusha rri pezull ose merr fokus.
fushë e fshehtë HIDDEN
Ky është një lloj i veçantë (i fshehur). kuti teksti... Nëse një skript trajton disa forma të ndryshme, atëherë në fushën e fshehur të çdo formulari, mund të specifikoni një identifikues që do t'ju lejojë të përcaktoni se me cilën formë keni të bëni.
Shembull
Shfletuesi nuk shfaq fushën e fshehur, megjithëse mund të zbulohet duke e vendosur shfletuesin në modalitetin e pamjes HTML dhe duke analizuar tekstin e faqes së internetit. Fushat e fshehura janë të dobishme kur ju duhet të jepni informacionin që kërkohet për një skript, por nuk dëshironi që përdoruesi të jetë në gjendje të bëjë ndryshime në të. Megjithatë, vini re se një përdorues i zgjuar mund ta ruajë formularin tuaj në një skedar, ta modifikojë atë dhe më pas ta dërgojë atë formular në server në një formë të modifikuar. Prandaj, mos u mbështetni në fushat e fshehura për të krijuar një lloj mbrojtjeje.
Shembull
Skripti do të marrë një variabël me emrin FormVersion, të cilit do t'i caktohet vlera 1.2. Ky informacion mund të përdoret për të përcaktuar se si përpunohet pjesa tjetër e informacionit të marrë nga formulari. Nëse përdoruesi e ndryshon këtë vlerë, programi i skriptit mund të sillet në mënyra të papritura.
Fusha e futjes së adresës së emailit
Për të futur adresa të shumta, mund të shtoni atributin të shumëfishta, dhe një presje (,) përdoret për të ndarë adresat
Shembull
Në temën e fundit, ne shikuam ngjarjet e tastierës. Në këtë temë, ne do të hedhim një vështrim në ngjarje të tjera të formave. Përfshirë dorëzimin e formularit në server.
Element në fokus
Kur një element i formës është në fokus, ndizet një ngjarje e fokusit dhe kur elementi del jashtë fokusit, ndizet një ngjarje e turbullimit. Le të krijojmë një fushë hyrëse dhe një tekst dalës në tastierë kur merr fokusin dhe kur largohet nga fokusi:
Kodi HTML:
Ngjarja e turbullimit përdoret ndonjëherë për të vërtetuar vlerën e futur nga përdoruesi në një fushë hyrëse.
Nuk ka kuptim të përdoren këto ngjarje për të ndryshuar stilin e një elementi. Për këtë, ekziston një pseudo-klasë fokusi në CSS.
Futja e një vlere
Ngjarja hyrëse ndodh kur përdoruesi shkruan tekstin në një fushë hyrëse. Ai ndizet kur çdo karakter shtohet ose hiqet, ose kur teksti kopjohet në një fushë hyrëse. Në disa shfletues, kjo funksionon në një mënyrë të pazakontë: sa herë që futni një karakter, ngrihet një ngjarje e turbullt, më pas ekzekutohet mbajtësi i ngjarjeve hyrëse dhe më pas ngrihet një ngjarje e fokusit. Nëse nuk ka mbajtës të ngjarjeve të fokusit dhe turbullimit, atëherë ky nuk është problem. Por nëse janë, atëherë ato do të aktivizohen sa herë që shtohet një personazh.
Shtoni një etiketë tjetër në faqe dhe shfaq vlerën e tij ndërsa futni tekst:
Kodi HTML:
JavaScript:
12 |
var newv = document.getElementById ("vlera e re"); newv.onchange = funksioni () (console.log ("Vlera u ndryshua në:" + newv.value); |
Dorëzimi i formularit
Ngjarja e paraqitjes ndizet kur formulari dorëzohet në server. Përdoret për të vërtetuar të dhënat që përdoruesi ka futur në formular. Trajtuesi kontrollon vlerat e elementeve të formularit dhe nëse disa vlera janë futur gabimisht, dorëzimi i formularit anulohet. Kjo zakonisht shfaq një mesazh që tregon se çfarë duhet të rregullohet.
Vendosni etiketat e krijuara në formular dhe shtoni një buton për të dorëzuar formularin:
Kodi HTML:
Nëse formulari është plotësuar saktë, domethënë, të gjitha fushat kanë të paktën dy karaktere, atëherë shfletuesi do të përpiqet të ekzekutojë skedarin e specifikuar në atribut veprimi, dhe ndodh një gabim sepse nuk ka një skedar të tillë. Por nuk ka asnjë rrezik në këtë, kështu që nuk ka nevojë të kesh frikë të kontrollosh funksionimin e skenarit. Nëse në njërën nga fushat janë futur më pak se dy karaktere, do të shfaqet një mesazh dhe dërgimi do të anulohet. Nëse ka shumë kontrolle, atëherë për çdo kontroll mund të shfaqni mesazhin tuaj dhe të anuloni paraqitjen e formularit.
