Aina za Matukio

Katika siku za mwanzo za Mtandao Wote wa Ulimwenguni, watengenezaji wa mtandao walipaswa kukabiliana na idadi ndogo tu ya matukio: "mzigo", "click", "mouseover" na wengine. Aina hizi za matukio ya zamani zinaungwa mkono vyema na vivinjari vyote. Kadiri jukwaa la wavuti lilivyobadilika, violesura vyenye nguvu zaidi vilijumuishwa na idadi ya matukio iliongezeka sana. Hakuna kiwango kinachofafanua seti kamili ya matukio, na idadi ya matukio yanayoungwa mkono inaendelea kukua kwa kasi. Matukio haya mapya yamefafanuliwa katika vyanzo viwili vifuatavyo:

Uainishaji wa "Matukio ya Kiwango cha 3 cha DOM", ambayo, baada ya miaka mingi ya vilio, ilianza kuendelezwa kikamilifu chini ya ufadhili wa muungano wa W3C.

Miingiliano mingi ya programu mpya katika vipimo vya HTML5 (na vipimo vya ziada vinavyohusiana) hufafanua matukio mapya yanayotumika, kwa mfano, kwa ajili ya kudhibiti historia ya kuvinjari, kuburuta-dondosha, kutuma ujumbe kati ya hati, na kucheza sauti na video.

Tafadhali kumbuka kuwa nyingi za aina hizi mpya za matukio bado hazitumiki sana na zinafafanuliwa kwa viwango ambavyo bado viko katika awamu ya muundo. Matukio ambayo utatumia mara nyingi katika programu zako za wavuti kwa kawaida yatakuwa yale ya muda mrefu ambayo yanaauniwa na vivinjari vyote: matukio ya kipanya, matukio ya kibodi, matukio ya fomu za HTML na matukio ya Dirisha. Tutazingatia matukio haya.

Matukio ya Upakiaji wa Hati

Programu nyingi za wavuti huhitaji kabisa kivinjari cha wavuti kuzijulisha hati inapomaliza kupakua na iko tayari kufanya shughuli juu yake. Tukio la kupakia kwenye kitu cha Dirisha hutumikia kusudi hili. Tukio la mzigo linafukuzwa tu baada ya hati na picha zake zote zimepakiwa kabisa. Walakini, hati zinaweza kuendeshwa mara tu baada ya hati kuchanganuliwa, kabla ya picha kupakiwa. Unaweza kupunguza kwa kiasi kikubwa muda wa uanzishaji wa programu ya wavuti ikiwa utaanza kutekeleza hati kwenye matukio mbali na kupakia.

Tukio la DOMContentLoaded linainuliwa mara hati inapopakiwa, kuchanganuliwa, na hati zozote zilizoahirishwa zimetekelezwa. Katika hatua hii, picha na hati zilizo na sifa ya usawazishaji zinaweza kuendelea kupakiwa, lakini hati yenyewe itakuwa tayari kwa shughuli. Tukio hili lilianzishwa kwanza katika Firefox na baadaye kupitishwa na watengenezaji wengine wote wa kivinjari, pamoja na Microsoft, ambayo iliongeza usaidizi kwa tukio hili katika IE9. Licha ya kiambishi awali cha DOM katika jina, tukio hili si sehemu ya kiwango cha Matukio cha Kiwango cha 3 cha DOM, lakini limesanifishwa na vipimo vya HTML5.

Wakati hati inavyopakia, thamani ya hati hati.readyState inabadilika. Kila badiliko la thamani ya mali hii katika IE linaambatana na tukio la readystatechange kwenye kitu cha Hati, kwa hivyo katika IE tukio hili linaweza kutumiwa kuamua wakati hali kamili inatokea. Viainisho vya HTML5 husawazisha tukio la readystatechange, lakini huhitaji kuwashwa mara moja kabla ya tukio la kupakia, kwa hivyo haijulikani kabisa faida ya tukio la readystatechange ni nini juu ya tukio la kupakia.

Mfano hapa chini unafafanua whenReady() kazi. Chaguo za kukokotoa zilizopitishwa whenReady() huitwa (kama mbinu ya kitu cha Hati) mara tu hati inapokuwa tayari kwa utendakazi. whenReady() husubiri matukio ya DOMContentLoaded na readystatechange na hutumia tukio la kupakia kama njia mbadala ikiwa itatumika katika vivinjari vya zamani ambavyo havitumii matukio mawili ya kwanza. WhenReady() kazi itatumika katika baadhi ya matukio yafuatayo:

/* Pass whenReady() kitendakazi chako na itaiita (kama njia kwenye kitu cha hati) mara hati itakapomaliza kuchanganua na iko tayari kufanya shughuli. Vitendaji vilivyosajiliwa huitwa kwenye tukio la kwanza la DOMContentLoaded, readystatechange, au pakiwa. Mara hati ikiwa tayari na kazi zote zimeitwa, whenReady() itaita mara moja kazi zote ambazo zilipitishwa kwake. */ var whenReady = (function() ( // Chaguo hili la kukokotoa linarejeshwa na kitendakazi whenReady() var funcs = ; // Kazi zinazopaswa kuitwa kwenye tukio var ready = false; // Itapokea thamani ya kweli wakati handler kazi inaitwa // Event handler , ambayo huitwa mara tu hati // iko tayari kutekeleza shughuli za kishughulikiaji(e) ( // Ikiwa kidhibiti kimeitwa tayari, rudisha udhibiti ikiwa (tayari) kurudi; / / Ikiwa hili ni tukio la readystatechange na hali imepokea thamani, // bora kutoka kwa "kamili", ambayo inamaanisha kuwa hati bado haiko tayari ikiwa (e.type==="readystatechange" && document.readyState !== " kamili") kurudi; // Piga simu vitendaji vyote vilivyosajiliwa. // Kumbuka kuwa hapa kila Thamani ya // mali ya funcs.length inaangaliwa mara moja, ikiwa mojawapo ya vitendakazi vinavyoitwa // itasajili vitendaji vya ziada. kwa(var i = 0 ;i

Matukio ya panya

Kuna matukio mengi yanayohusiana na panya. Zote zimeorodheshwa kwenye jedwali hapa chini. Matukio yote ya kipanya isipokuwa ingiza kipanya na acha kiputo. Matukio ya kubofya yanayotokea kwenye viungo na vitufe vya kuwasilisha fomu vina vitendo chaguomsingi vinavyoweza kughairiwa. Kinadharia inawezekana kughairi tukio la menyu ya muktadha na kuzuia menyu ya muktadha kuonekana, lakini baadhi ya vivinjari vina mipangilio inayofanya tukio hili lisighairiwe.

Matukio ya Kipanya cha JavaScript Maelezo ya Aina

bonyeza	Tukio la kiwango cha juu linalojitokeza wakati mtumiaji anabonyeza na kutoa kitufe cha kipanya au vinginevyo kuwezesha kipengele.
menyu ya muktadha	Tukio linaloweza kughairiwa lililotolewa kabla ya menyu ya muktadha kuonyeshwa. Vivinjari vya sasa vinaonyesha menyu ya muktadha kwa kubofya kulia, ili tukio hili pia litumike kama tukio la kubofya.
dblclick	Huwaka mtumiaji anapobofya mara mbili.
kipanya chini	Inawaka wakati mtumiaji anabonyeza kitufe cha kipanya.
kipanya	Inawaka wakati mtumiaji anatoa kitufe cha kipanya.
panya hoja	Inawaka wakati mtumiaji anasogeza kiashiria cha kipanya.
kipanya	Moto wakati kiashiria cha kipanya kinawekwa juu ya kipengele. Sifa inayohusianaTarget (au kutokaElement katika IE) huamua kipengele ambacho kiashiria cha kipanya kilihamishwa.
kipanya nje	Moto wakati pointer ya panya inaacha kipengele. Sifa inayohusianaTarget (au toElement katika IE) inabainisha kipengele ambacho kiashiria cha kipanya kilihamishiwa.
kipanya	Sawa na kipanya, lakini haitokei. Ilianzishwa kwanza katika IE na kusawazishwa katika HTML5, lakini bado haijaauniwa na vivinjari vyote.
kuondoka kwa panya	Sawa na kipanya, lakini haitokei. Ilianzishwa kwanza katika IE na kusawazishwa katika HTML5, lakini bado haijaauniwa na vivinjari vyote.

Kipengee kilichopitishwa kwa vidhibiti tukio la kipanya kina sifa za clientX na clientY ambazo zinabainisha viwianishi vya kielekezi kinachohusiana na dirisha. Ili kuzibadilisha kuwa viwianishi vya hati, unahitaji kuongeza nafasi za pau za kusogeza za dirisha kwao.

Mali altKey, ctrlKey, metaKey Na shiftKey kuamua majimbo ya funguo mbalimbali za kurekebisha ambazo zinaweza kushikiliwa wakati wa tukio: kwa msaada wao, unaweza kutofautisha kubofya rahisi kutoka kwa kubofya na ufunguo wa Shift uliosisitizwa, kwa mfano.

Sifa ya kitufe huamua ni kitufe kipi kilishikiliwa wakati wa tukio. Walakini, vivinjari tofauti huandika maadili tofauti kwa mali hii, kwa hivyo ni ngumu kutumia kwa njia ya kubebeka.

Vivinjari vingine huwasha tu tukio la kubofya wakati kitufe cha kushoto kinapobofya. Kwa hivyo, ikiwa unahitaji kushughulikia mibofyo kutoka kwa vifungo vingine, unapaswa kutumia matukio ya kipanya chini na kipanya. Tukio la menyu ya muktadha kwa kawaida huashiria kuwa mbofyo wa kulia umetekelezwa, lakini kama ilivyobainishwa hapo juu, haiwezekani kila mara kwa vidhibiti tukio hili kuzuia menyu ya muktadha kuonekana.

Mfano ulio hapa chini unaonyesha chaguo la kukokotoa la buruta(), ambalo, linapoitwa kutoka kwa kidhibiti cha tukio la kipanya, huruhusu mtumiaji kuburuta vipengele vya hati vilivyowekwa vyema kwa kutumia kipanya. Chaguo la kukokotoa () linafanya kazi na miundo ya matukio ya DOM na IE.

Drag() chaguo za kukokotoa huchukua hoja mbili. Ya kwanza ni kipengele kinachoburuzwa. Hiki kinaweza kuwa kipengele ambacho tukio la kuangusha kipanya lilitokea na kipengele kilichokuwa nacho (kwa mfano, unaweza kumruhusu mtumiaji kuburuta kipanya kwenye kipengele kinachoonekana kama upau wa kichwa cha dirisha na kuburuta kipengee kilicho na kinachoonekana kama dirisha) . Hata hivyo, kwa hali yoyote, lazima iwe kipengele cha hati kilichowekwa kikamilifu kwa kutumia sifa ya nafasi ya CSS. Hoja ya pili ni kitu cha tukio kilichopokelewa na tukio la kipanya:

/* buruta() - kuburuta vipengele vya HTML vilivyowekwa vyema. Chaguo hili la kukokotoa lazima liitwe kutoka kwa kidhibiti cha tukio la onmousedown. Matukio yajayo ya kusogeza kipanya yatasababisha kipengele kilichobainishwa kusogezwa. Tukio la kuongeza kipanya litakamilisha harakati. Utekelezaji huu unafanya kazi katika mifano ya matukio ya kawaida na ya IE. Hutumia kitendakazi cha getScrollOffsets(). Hoja: kipengeleToDrag: Kipengele kilichopokea tukio la kuangusha kipanya au kipengele kilicho na. Kipengele hiki lazima kiwe na nafasi kamili. Thamani za sifa zake za mtindo.kushoto na style.top zitabadilika kadri mtumiaji anavyosogeza kiashiria cha kipanya. tukio: kitu cha Tukio kilichopokelewa na kidhibiti cha tukio la kipanya chini. */ kitendakazi buruta(kipengeleToDrag, tukio) ( // Badilisha viwianishi vya awali vya kiashiria cha kipanya kuwa viwianishi vya hati var scroll = getScrollOffsets(); // Kitendaji cha Msaidizi kimetangazwa hapa chini var startX = event.clientX + scroll.x; var startY = tukio mtejaY + scroll.y; // Viwianishi asili (vinahusiana na mwanzo wa hati) vya kipengele ambacho // kitasogezwa. Kwa kuwa kipengeleToDrag kimewekwa kabisa, // offsetParent mali yake inachukuliwa kurejelea mwili. ya hati var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop;// Tafuta umbali kati ya sehemu ya tukio la kipanya chini na kona ya juu kushoto ya kipengele. // Umbali huu utazingatiwa wakati wa kusogeza kipanya pointer. var deltaX = startX - origX; var deltaY = startY - origY; // Vidhibiti vya Vidhibiti vya kusajili panya na kuweka kipanya // ambayo yatafuata tukio la kupunguza kipanya ikiwa (document.addEventListener) ( // Muundo wa kawaida wa tukio // Sajili vidhibiti vya kukatiza katika hati document.addEventListener("mousemove", moveHandler, true); document.addEventListener("kipanya", upHandler, true); ) vinginevyo ikiwa (document.attachEvent) ( // mfano wa tukio la IE kwa IE5-8 // Katika muundo wa tukio la IE, matukio yananaswa kwa kupiga simu // mbinu ya kipengele cha setCapture() elementToDrag.setCapture(); elementToDrag.attachEvent() "onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // Tafsiri upotevu wa kunasa tukio la kipanya kama kipengele cha tukio la kipanyaToDrag.attachEvent("onlosecapture", upHandler); ) // Tukio hili limeshughulikiwa na haipaswi kupitishwa kwa washikaji wengine ikiwa (tukio .stopPropagation) tukio.stopPropagation(); // Mfano wa kawaida tukio lingine.cancelBubble = kweli; // IE // Zuia vitendo chaguo-msingi kukimbia. ikiwa (tukio.preventDefault) tukio.preventDefault(); // Mfano wa kawaida tukio lingine.returnValue = uongo; // IE /* Kidhibiti hiki hukatiza matukio ya kusogeza kwa kipanya yanayotokea wakati kipengele kinaburutwa. Ni wajibu wa kusonga kipengele. */ kazi moveHandler(e) ( if (!e) e = window.event; // IE Tukio Model // Hamisha kipengele hadi nafasi ya kipanya pointer, kwa kuzingatia nafasi za scrollbar // na kukabiliana na uhusiano na click ya awali. var scroll = getScrollOffsets( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px" ;// Na kukomesha uenezaji zaidi wa tukio hilo. */ fanya kazi upHandler(e) ( ikiwa (!e) e = window.event; // IE Mfano wa Tukio // Ondoa vidhibiti vya tukio vinavyokatiza. ikiwa (document.removeEventListener) ( // DOM Event Model document.removeEventListener("mouseup" , upHandler, true); document.removeEventListener("mousemove", moveHandler, true); ) vinginevyo ikiwa (document.detachEvent) ( // IE 5+ Tukio Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent( "onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture();) // Na usimamishe uenezaji zaidi wa tukio. ikiwa (e.stopPropagation) e.stopPropagation(); // Standard model else e.cancelBubble = true; // IE ) ) // Hurejesha nafasi za sasa za pau za kusogeza kama sifa ya x na y ya kitendakazi cha kitu getScrollOffsets(w) ( // Tumia dirisha lililobainishwa au la sasa // ikiwa kipengele cha kukokotoa kinaitwa bila hoja w = w | | dirisha; // Mbinu ifuatayo inafanya kazi katika vivinjari vyote isipokuwa toleo la 8 la IE na chini ikiwa (w.pageXOffset != null) inarudi (x: w.pageXOffset, y:w .pageYOffset); // Kwa IE (na vivinjari vingine) katika hali ya kawaida var d = w.document; ikiwa (document.compatMode == "CSSICompat") inarudi (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Kwa vivinjari katika hali ya utangamano kurudi ( x: d.body.scrollLeft, y: d.body.scrollTop); )

Kijisehemu kifuatacho kinaonyesha jinsi ya kutumia kitendakazi cha drag() katika faili ya HTML:

Niburute

Huu ni mtihani. Angalia, angalia, angalia.

Jambo muhimu zaidi hapa ni sifa ya onmousedown kwenye kipengee kilichowekwa. Kumbuka kwamba hutumia kipengele cha this.parentNode. Hii ina maana kwamba kipengele chote cha chombo kitasonga.

Matukio ya kuingiza maandishi

Vivinjari vinaauni matukio matatu ya urithi ya kibodi. Matukio ya ufunguo na vitufe ni matukio ya kiwango cha chini na yanajadiliwa katika sehemu inayofuata. Walakini, tukio la kubonyeza kitufe ni tukio la kiwango cha juu ambalo linaripoti kuwa herufi inayoweza kuchapishwa imeingizwa.

Vibainishi vya rasimu ya Matukio ya Kiwango cha 3 ya DOM hufafanua tukio la matini la jumla zaidi ambalo hutolewa kwa kujibu uingizaji wa maandishi, bila kujali jinsi ulivyoingizwa.

Kwa tukio la maandishi lililopendekezwa na tukio la maandishi ya maandishi linalotekelezwa kwa sasa, kitu rahisi cha tukio hupitishwa ambacho kina sifa ya data ambayo huhifadhi maandishi yaliyowekwa. (Sifa nyingine inayopendekezwa na vipimo, inputMethod, inapaswa kubainisha chanzo cha ingizo, lakini bado haijatekelezwa.) Kwa ingizo la kibodi, sifa ya data kwa kawaida itakuwa na herufi moja, lakini kwa ingizo kutoka kwa vyanzo vingine inaweza kuwa na herufi nyingi. .

Kitu cha tukio kilichopitishwa na tukio la kubonyeza kitufe kina shirika ngumu zaidi. Tukio la kubonyeza kitufe huwakilisha ingizo la herufi moja. Herufi hii iko kwenye kipengee cha tukio kama thamani ya nukta ya msimbo wa Unicode, na ili kuibadilisha kuwa mfuatano, lazima utumie mbinu ya String.fromCharCode(). Katika vivinjari vingi, sehemu ya msimbo ya herufi iliyoingizwa huhifadhiwa katika sifa ya msimbo wa kitu cha tukio. Walakini, kwa sababu za kihistoria, Firefox hutumia mali badala yake charCode.

Katika vivinjari vingi, tukio la kubonyeza vitufe hutupwa tu wakati herufi inayoweza kuchapishwa imeingizwa. Walakini, katika Firefox, tukio la kubonyeza kitufe pia limeinuliwa kwa herufi zisizochapisha. Ili kutofautisha kati ya visa hivi viwili (na kupuuza herufi zisizoweza kuchapishwa), unaweza kuangalia ikiwa sifa ya charCode ya kitu cha tukio iko na ikiwa ina thamani 0.

Matukio ya ingizo, maandishi, na ubonyezo wa vitufe yanaweza kughairiwa ili kuzuia herufi isiingizwe. Hiyo ni, matukio haya yanaweza kutumika kuchuja pembejeo. Kwa mfano, unaweza kuzuia herufi za kialfabeti kuingizwa kwenye sehemu inayokusudiwa kuingizwa data ya nambari.

Mfano hapa chini unaonyesha moduli ya JavaScript inayotekelezea aina hii ya uchujaji. Inatafuta vipengee vilivyo na sifa ya ziada (isiyo ya kawaida) data-kuruhusiwa-chara. Husajili maandishi, Input, na vishikilizi vya matukio ya kubonyeza vitufe kwa vipengele vyote vilivyopatikana na kuweka mipaka kwa vibambo vya kujieleza vya kawaida vilivyobainishwa katika sifa ya chati-zinazoruhusiwa na data:

/* Uchujaji wa ingizo kwa vipengele Moduli hii hupata vipengele vyote kwenye hati ambavyo vina sifa ya "data-allowed-chars". Husajili vidhibiti, maandishi, na vidhibiti vya tukio la maandishiIngiza kwa vipengele hivi ili kuzuia seti ya herufi zinazoruhusiwa kuingiza ili kuruhusu herufi zilizobainishwa tu kwenye sifa kuingizwa. Ikiwa kipengele pia kina sifa ya "data-messageid", thamani ya sifa hiyo inafasiriwa kama kitambulisho cha kipengele kingine cha hati. Mtumiaji akiingiza herufi batili, kipengele kilicho na kitambulisho kilichobainishwa kitaonekana. Ikiwa mtumiaji ataingiza herufi halali, kipengele cha ujumbe kinafichwa. Kipengele hiki cha ujumbe kimekusudiwa kuonyesha maelezo ya kwa nini ingizo la mtumiaji lilikataliwa. Muundo wake lazima utekelezwe kwa kutumia CSS ili isionekane mwanzoni. */ whenReady(kazi () ( // Piga simu kitendakazi hiki hati inapopakiwa // Tafuta vipengee vyote var inputelts = document.getElementsByTagName("input"); // Pitia kwa(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 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

Ifuatayo ni mfano wa alama za HTML kwa kutumia moduli hii:

Tafadhali jaza fomu.

Maelezo ya mawasiliano Majina ya herufi pekee
Nambari za Simu pekee
Barua pepe Barua pepe isiyo sahihi

Kielelezo hapa chini kinaonyesha matumizi ya fomu hii. Hapa, baada ya kuingiza jina, niliingiza nambari, ambayo ilizuiwa kiatomati na ujumbe wa onyo ukatokea:

Mibonyezo ya vitufe na matukio ya kuingiza maandishi huondolewa kabla ya maandishi mapya kuingizwa kwenye kipengele cha hati ambacho kina mwelekeo wa ingizo, kwa hivyo vidhibiti vya matukio haya vinaweza kuzuia maandishi kuingizwa kwa kughairi tukio.

Vivinjari pia hutekeleza tukio la ingizo, ambalo hutupwa wakati maandishi yanapoingizwa kwenye kipengele. Tukio hili haliwezi kughairiwa na tukio linalolingana halina taarifa kuhusu maandishi yaliyoingizwa - inaarifu tu kwamba maudhui ya maandishi ya kipengele yamebadilika. Ikiwa, kwa mfano, unataka kuhakikisha kuwa herufi kubwa pekee ndizo zimeingizwa, unaweza kufafanua kidhibiti cha tukio kama inavyoonyeshwa hapa chini:

Tukio la ingizo limesanifishwa katika vipimo vya HTML5 na linaauniwa na vivinjari vyote vya kisasa isipokuwa IE. Athari sawa katika IE inaweza kupatikana kwa kugundua mabadiliko katika sifa ya thamani ya kipengele cha uingizaji maandishi kwa kutumia tukio maalum. mabadiliko ya mali.

Matukio ya kibodi

Matukio ya vitufe na vitufe huinuliwa mtumiaji anapobofya au kutoa kitufe kwenye kibodi. Zinatengenezwa kwa vibonye vya kurekebisha, vitufe vya kufanya kazi na vitufe vya alphanumeric. Mtumiaji akishikilia kitufe cha muda wa kutosha kuanzisha hali ya kujirudia kiotomatiki, matukio mengi ya vitufe yatatolewa kabla ya tukio la ufunguo kutokea.

Kipengee cha tukio kinacholingana na matukio haya kina sifa ya Msimbo muhimu yenye thamani ya nambari inayotambulisha kitufe kilichobonyezwa. Kwa funguo zinazozalisha herufi zinazoweza kuchapishwa, kwa ujumla sifa ya keyCode ina nukta ya msimbo wa Unicode inayolingana na herufi ya msingi iliyoonyeshwa kwenye kitufe. Vifunguo vya herufi daima huzalisha thamani za msimbo muhimu zinazolingana na herufi kubwa, bila kujali hali ya kitufe cha Shift, kwani hizo ndizo herufi zinazoonyeshwa kwenye funguo.

Vile vile, vitufe vya nambari daima huzalisha thamani za Msimbo muhimu zinazolingana na herufi za nambari zilizoonyeshwa kwenye vitufe, hata kama umeshikilia kitufe cha Shift ili kuweka alama za uakifishi. Kwa funguo ambazo hazilingani na herufi zinazoweza kuchapishwa, sifa ya Msimbo wa ufunguo itakuwa na thamani nyingine. Thamani hizi za mali za KeyCode hazijawahi kusawazishwa. Walakini, hazitofautiani sana kati ya vivinjari hivi kwamba uhamishaji hauwezi kupatikana.

Kama vitu vya tukio la kipanya, vitu vya tukio la kibodi vina altKey , ctrlKey , metaKey , na sifa za shiftKey ambazo hutathmini kuwa kweli ikiwa ufunguo unaolingana wa kirekebishaji ulishikiliwa wakati tukio lilipotokea.

Matukio ya vitufe na vitufe na sifa ya Msimbo wa ufunguo yamekuwa yakitumika kwa zaidi ya muongo mmoja, lakini hayajawahi kusanifishwa. Rasimu ya Matukio ya Kiwango cha 3 ya DOM husawazisha aina za ufunguo na vitufe vya matukio, lakini haisawazishi sifa ya Msimbo muhimu. Badala yake, inafafanua mali mpya, ufunguo, ambao unapaswa kuwa na jina la ufunguo kama kamba. Ikiwa ufunguo unalingana na herufi inayoweza kuchapishwa, sifa muhimu lazima iwe na herufi inayoweza kuchapishwa. Kwa vitufe vya kukokotoa, kipengele muhimu lazima kiwe na thamani kama vile F2, Nyumbani, au Kushoto.

Wakati wa uandishi huu, kipengele muhimu kilichofafanuliwa na kiwango cha Matukio cha Kiwango cha 3 cha DOM bado hakijatekelezwa katika kivinjari chochote. Walakini, vivinjari vinavyotegemea Webkit, Safari, na Chrome hufafanua sifa katika vipengee vya matukio haya: Kitambulisho muhimu. Kwa vitufe vya kukokotoa, kama sifa kuu, sifa ya Kitambulisho cha ufunguo haina nambari bali mfuatano wenye jina la ufunguo, kama vile Shift au Ingiza. Kwa funguo zinazolingana na herufi zinazoweza kuchapishwa, sifa hii ina uwakilishi wa mfuatano usioweza kutumika wa alama ya msimbo wa Unicode. Kwa mfano, kitufe cha A kinalingana na thamani U+0041.

Mfano ulio hapa chini unafafanua darasa la Keymap ambalo hupanga vitambulishi mseto vya vitufe kama vile PageUp, Alt_Z, na ctrl+alt+shift+F5 hadi vitendaji vya JavaScript ambavyo huitwa kujibu michanganyiko hiyo ya vitufe inayobonyezwa. Ufafanuzi muhimu wa kuunganisha hupitishwa kwa Kijenzi cha Keymap() kwa njia ya kitu cha JavaScript ambacho majina yake ya sifa yanalingana na vitambulishi muhimu vya mchanganyiko, na ambavyo thamani zake za sifa zina marejeleo ya vidhibiti. Kuongeza na kuondoa vifungo hufanywa kwa kutumia njia za bind() na unbind().

Kitu cha Keymap kimesakinishwa kwenye kipengele cha HTML (kawaida ni kitu cha Hati) kwa kutumia njia ya install(). Kipengee cha Keymap kinapowekwa, kidhibiti cha matukio muhimu kinasajiliwa na kipengele hiki. Kila mara ufunguo unapobonyezwa, kidhibiti hukagua ili kuona kama kuna chaguo za kukokotoa zinazolingana na mseto huo. Ikiwa kazi ipo, inaitwa.

Kidhibiti cha matukio ya ufunguo hutumia kipengele muhimu kilichofafanuliwa na kiwango cha Matukio cha Kiwango cha 3 cha DOM, ikiwa kipo. Vinginevyo inajaribu kutumia kipengele cha Webkit keyIdentifier. Na kama njia mbadala, kidhibiti hutumia mali isiyo ya kawaida ya Msimbo:

// Kitendo cha utendakazi cha kijenzi Keymap(vifungo) ( this.map = (); // Bainisha kitambulisho cha ramani->kidhibiti ikiwa (vifungo) ( // Nakili ramani ya awali ya kuifunga ndani yake kwa(jina katika vifungo) this.bind( jina, vifungo); ) ) // Hufunga kitambulishi cha ufunguo kilichobainishwa kwa kidhibiti cha chaguo la kukokotoa Keymap.prototype.bind = function(key, func) ( this.map = func; ); // Huondoa kiambatanisho kwa kitambulisho maalum Keymap.prototype.unbind = function(key) ( futa this.map; ); // Inasakinisha kipengee hiki cha Muhimu katika kipengele maalum cha HTML Keymap.prototype.install = function(element) ( var keymap = this; // Bainisha kidhibiti cha kidhibiti cha tukio (tukio) ( rudisha keymap.dispatch(tukio, kipengele); ) // Iweke ikiwa (element.addEventListener) element.addEventListener("keydown", handler, false); vinginevyo ikiwa (element.attachEvent) element.attachEvent("onkeydown", handler); ); // Mbinu hii hukabidhi ushughulikiaji wa tukio la kibodi, kwa kutegemea vifungo Keymap.prototype.dispatch = kazi(tukio, kipengele) ( // Hapo awali hakuna majina ya vitufe vya kirekebishaji au virekebishaji jina muhimu var = ""; var keyname = null; // Tengeneza mifuatano ya kirekebishaji katika umbo la kisheria kutoka kwa herufi ndogo //, ukizipanga kwa mpangilio wa alfabeti. ikiwa (tukio.altKey) virekebishaji += "alt_"; ikiwa virekebishaji vya (event.ctrlKey) += "ctrl_"; ikiwa (tukio .metaKey) modifiers += "meta_"; ikiwa (event.shiftKey) modifiers += "shift_"; // Jina la ufunguo ni rahisi kupata ikiwa sifa kuu // iliyofafanuliwa na kiwango cha 3 cha DOM inatekelezwa: ikiwa (event.key ) keyname = event.key; // Ili kupata majina ya funguo za utendakazi katika Safari na Chrome, unaweza // kutumia kipengele cha Kitambulisho cha ufunguo kama(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+" ) jina la ufunguo = tukio.Kitambulisho cha ufunguo;// Vinginevyo, unaweza kutumia sifa ya Msimbo wa ufunguo // na msimbo wa kuonyesha > jina lililo chini ya jina jingine kuu = Keymap.keyCodeToKeyName; // Ikiwa jina la ufunguo halikuweza kuamua, tu kupuuza tukio // na kurejesha udhibiti. ikiwa (!jina kuu) itarudi; // Kitambulisho cha ufunguo wa kisheria kinajumuisha majina ya kirekebishaji // na jina la ufunguo wa herufi ndogo var keyid = virekebishaji + keyname.toLowerCase(); // Angalia ikiwa kuna kiambatanisho kwa kitambulisho fulani muhimu var handler = this.map; ikiwa (kidhibiti) ( // Ikiwa kidhibiti ni cha kitufe ulichopewa, kiite // Piga kitendaji cha kidhibiti var retval = handler.call(kipengele, tukio, keyid); // Ikiwa kidhibiti kimerudi sivyo, ghairi chaguo-msingi // / na kukomesha matukio ya kibubujiko ikiwa (retval === si kweli) ( ikiwa (event.stopPropagation) event.stopPropagation(); // DOM model else event.cancelBubble = kweli; // mfano wa IE ikiwa (event.preventDefault) event.preventDefault () // Kitendaji cha Msaidizi kubadilisha kitambulisho muhimu kuwa fomu ya kisheria. // Tunahitaji kubadilisha kitambulisho cha "meta" kuwa "ctrl" ili kugeuza // kitambulisho cha Meta-C kuwa "Command-C" kwenye Mac na kuwa "Ctrl-C" kwa kila mtu mwingine. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // Kwa herufi ndogo var words = keyid.split(/\s+|[\-+_]/); // Chagua virekebishaji var jina kuu = maneno . pop() kurudisha majina .jiunge("_");// Unganisha kila kitu pamoja ) Keymap.aliases = ( // Ramani lakabu za ufunguo wa kawaida kwa majina yao // "rasmi" yanayotumiwa katika Kiwango cha 3 cha DOM, na misimbo ya funguo ya ramani // kwa majina hapa chini. Jina na thamani lazima iwe na herufi ndogo tu "escape":"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar" ", "ingiza":"ingiza"); // Sifa ya zamani ya msimbo wa kipengee cha tukio la ufunguo haijasawazishwa // Lakini maadili yafuatayo yanaweza kutumika kwa mafanikio katika vivinjari na OS nyingi. Keymap.keyCodeToKeyName = ( // Vifunguo vyenye maneno au mishale juu yake 8:"Backspace", 9:"Tab", 13:"Ingiza", 16:"Shift", 17:"Control", 18:"Alt", 19:"Sitisha", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 34:"PageDown", 35:"Mwisho", 36:"Nyumbani", 37: "Kushoto", 38:"Juu", 39:"Kulia", 40:"Chini", 45:"Ingiza", 46:"Del", // Vifunguo vya nambari kwenye kibodi kuu (sio kwenye ile ya ziada) 48 :"0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // Vifunguo vya herufi. Kumbuka kuwa hakuna tofauti kati ya herufi kubwa na ndogo 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", // Vifunguo vya nambari kwenye kibodi ya pili na funguo zilizo na alama za uakifishaji. // (Haitumiki katika Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103 :"7" ,104:"8", 105:"9",106:"Zidisha", 107:"Ongeza", 109:"Toa", 110:"Desimali", 111:"Gawanya", // Kazi funguo 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", // Vifunguo vyenye alama za uakifishaji alama, kwa ingizo ambazo hazihitaji // kushikilia kitufe cha Shift. // Kistarishi hakiwezi kutumika kwa njia ya kubebeka: FF inarudisha // msimbo sawa na wa kitufe cha Ondoa 59:";", 61:"=", 186:";", 187:"=", // Firefox na Opera inarudisha 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """);

Chini ni mfano wa kutumia kitu cha Keymap:

Window.onload = function() ( var keymap = new Keymap; // Unda keymap mpya ya kitu keymap.bind("ctrl+a", // Mchanganyiko Ctrl+A kitendakazi(tukio, keyid) ( tahadhari("Ulibonyeza: " + keyid) )); // Kifungo kingine cha Ctrl + Enter keymap.bind("ctrl+enter", kazi(tukio, keyid) ( tahadhari("Ulibonyeza: " + keyid) )); keymap.install(hati. body); // Weka kitu cha Keymap kwa hati nzima);

Matukio ni vitendo au matukio yanayotokea katika mfumo unaotayarisha, ambayo mfumo unakuambia ili uweze kuyajibu kwa njia fulani ukipenda. Kwa mfano, ikiwa mtumiaji atabofya kitufe kwenye ukurasa wa tovuti, unaweza kutaka kujibu kitendo hicho kwa kuonyesha kisanduku cha taarifa. Katika makala hii, tunajadili dhana muhimu zinazozunguka matukio, na kuangalia jinsi wanavyofanya kazi katika vivinjari. Huu hautakuwa utafiti wa kina; kile tu unachohitaji kujua katika hatua hii.

Masharti: Lengo:

Ujuzi wa kimsingi wa kompyuta, ufahamu wa kimsingi wa HTML na CSS, hatua za kwanza za JavaScript.

Ili kuelewa nadharia ya msingi ya matukio, jinsi yanavyofanya kazi katika vivinjari, na jinsi matukio yanaweza kutofautiana katika mazingira tofauti ya programu.

Msururu wa matukio ya bahati

Kama ilivyoelezwa hapo juu, matukio ni vitendo au matukio yanayotokea katika mfumo unaopanga - mfumo hutoa (au "moto") ishara ya aina fulani tukio linapotokea, na pia hutoa utaratibu ambao aina fulani ya hatua inaweza kufanyika. kuchukuliwa kiotomatiki (yaani, msimbo fulani unaoendesha) tukio linapotokea. Kwa mfano katika uwanja wa ndege wakati njia ya kurukia ndege iko wazi kwa ndege kupaa, ishara huwasilishwa kwa rubani, na kwa sababu hiyo, wanaanza kuiongoza ndege.

Kwa upande wa Wavuti, matukio yanarushwa ndani ya dirisha la kivinjari, na huwa yameambatanishwa na kipengee mahususi kilichomo ndani yake - hiki kinaweza kuwa kipengele kimoja, seti ya vipengele, hati ya HTML iliyopakiwa kwenye kichupo cha sasa, au dirisha lote la kivinjari. Kuna aina nyingi za matukio ambayo yanaweza kutokea, kwa mfano:

• Mtumiaji akibofya kipanya juu ya kipengele fulani au kuelea kielekezi juu ya kipengele fulani.
• Mtumiaji akibonyeza kitufe kwenye kibodi.
• Mtumiaji akibadilisha ukubwa au kufunga dirisha la kivinjari.
• Fomu inawasilishwa.
• Video inayochezwa, au kusitishwa, au kumaliza kucheza.
• Hitilafu inatokea.

Unaweza kukusanya kutoka kwa hili (na kutoka kwa kutazama rejeleo la Tukio la MDN) kwamba kuna matukio mengi ambayo yanaweza kujibiwa.

Kila tukio linalopatikana lina kidhibiti cha tukio , ambacho ni kizuizi cha msimbo (kawaida ni chaguo la kukokotoa la JavaScript ambalo wewe kama mtayarishaji programu huunda) ambalo litaendeshwa tukio linapowaka. Wakati kizuizi kama hicho cha msimbo kinafafanuliwa kuendeshwa kwa kujibu kurusha tukio, tunasema tunasajili kidhibiti tukio . Kumbuka kuwa wasimamizi wa hafla wakati mwingine huitwa wasikilizaji wa hafla - wanaweza kubadilishana sana kwa madhumuni yetu, ingawa kwa kusema kweli, wanafanya kazi pamoja. Msikilizaji husikiliza tukio linalotokea, na kidhibiti ni msimbo unaoendeshwa kwa kuitikia kutokea.

Kumbuka: Matukio ya wavuti si sehemu ya lugha kuu ya JavaScript - yanafafanuliwa kama sehemu ya API zilizojengwa kwenye kivinjari.

Mfano rahisi

Hebu tuangalie mfano rahisi ili kueleza tunachomaanisha hapa. Tayari umeona wasimamizi wa matukio na matukio wakitumiwa katika mifano mingi katika kozi hii, lakini hebu turudie ili kuimarisha ujuzi wetu. Katika mfano ufuatao, tuna single , ambayo ikibonyezwa, hufanya mandharinyuma kubadilika kuwa rangi isiyo ya kawaida:

Badilisha rangi

Kitufe ( ukingo: 10px );

JavaScript inaonekana kama hii:

Const btn = document.querySelector("kifungo"); kazi nasibu(nambari) ( rudisha Math.floor(Math.random() * (namba+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + nasibu(255) + "," + nasibu(255) + ")"; document.body.style.backgroundColor = rndCol; )

Katika msimbo huu, tunahifadhi rejeleo la kitufe ndani ya kitendawili kinachoitwa btn , kwa kutumia kitendakazi cha Document.querySelector(). Pia tunafafanua chaguo za kukokotoa ambazo hurejesha nambari nasibu. Sehemu ya tatu ya kanuni ni kidhibiti tukio. btn mara kwa mara huelekeza kwa kipengele, na aina hii ya kitu ina idadi ya matukio ambayo yanaweza kuwaka juu yake, na kwa hivyo, vidhibiti vya hafla vinapatikana. Tunasikiliza kurusha tukio la kubofya, kwa kuweka kipengele cha kidhibiti cha mbofyo ili sawa na chaguo la kukokotoa lisilojulikana lililo na msimbo ambao hutoa rangi ya nasibu ya RGB na kuweka rangi ya usuli sawa nayo.

Nambari hii inaendeshwa wakati wowote tukio la kubofya linapowaka kwenye kipengele, yaani, wakati wowote mtumiaji anapoibofya.

Mfano wa pato ni kama ifuatavyo:

Sio kurasa za wavuti pekee

Jambo lingine linalofaa kutajwa katika hatua hii ni kwamba matukio sio ya kipekee kwa JavaScript - lugha nyingi za programu zina aina fulani ya modeli ya tukio, na jinsi mtindo hufanya kazi mara nyingi hutofautiana na njia ya JavaScript. Kwa kweli, mfano wa tukio katika JavaScript. kwa kurasa za wavuti hutofautiana na muundo wa tukio la JavaScript kama inavyotumika katika mazingira mengine.

Vidhibiti vya matukio ya ndani - usitumie hizi

Unaweza pia kuona muundo kama huu kwenye nambari yako:

Nibonyeze chaguo la kukokotoa bgChange() ( const rndCol = "rgb(" + nasibu(255) + "," + nasibu(255) + "," + nasibu(255) + ")"; document.body.style.backgroundColor = rndCol;)

Mbinu ya awali zaidi ya kusajili vidhibiti vya matukio inayopatikana kwenye Wavuti ilihusisha sifa za HTML za kidhibiti tukio (au vidhibiti vya tukio ndani ya mstari ) kama ile iliyoonyeshwa hapo juu - thamani ya sifa ni msimbo wa JavaScript unaotaka kutekeleza tukio linapotokea. Mfano hapo juu unaomba kazi iliyofafanuliwa ndani ya kipengee kwenye ukurasa huo huo, lakini pia unaweza kuingiza JavaScript moja kwa moja ndani ya sifa, kwa mfano:

Bonyeza mimi

Unaweza kupata sifa sawia za HTML kwa sifa nyingi za kidhibiti tukio; hata hivyo, hupaswi kutumia hizi - zinachukuliwa kuwa mazoea mabaya.Huenda ikaonekana kuwa rahisi kutumia sifa ya kidhibiti tukio ikiwa unafanya jambo haraka sana, lakini haraka sana huwa hazidhibitiki na hazifanyi kazi.

Kwa kuanzia, si wazo zuri kuchanganya HTML yako na JavaScript yako, kwani inakuwa vigumu kuchanganua - kuweka JavaScript yako yote katika sehemu moja ni bora; ikiwa iko katika faili tofauti unaweza kuitumia kwa hati nyingi za HTML.

Hata katika faili moja, washughulikiaji wa tukio la ndani sio wazo nzuri. Kitufe kimoja ni sawa, lakini vipi ikiwa ungekuwa na vifungo 100? Utalazimika kuongeza sifa 100 kwenye faili; ingebadilika haraka kuwa matengenezo. Ukiwa na JavaScript, unaweza kuota ndoto kwa urahisi kuongeza kidhibiti cha tukio kwenye vitufe vyote kwenye ukurasa bila kujali zilikuwa ngapi, kwa kutumia kitu kama hicho. hii:

Const vifungo = document.querySelectorAll("kifungo"); kwa (wacha i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Kumbuka: Kutenganisha mantiki yako ya programu kutoka kwa maudhui yako pia hufanya tovuti yako kuwa rafiki zaidi kwa injini za utafutaji.

addEventListener() na removeEventListener()

Aina mpya zaidi ya utaratibu wa tukio imefafanuliwa katika Ainisho ya Matukio ya Kiwango cha 2 ya Kipengee cha Hati (DOM) ambacho hutoa vivinjari kazi mpya - addEventListener() . Hii inafanya kazi kwa njia sawa na mali ya kidhibiti tukio, lakini syntax ni wazi ni tofauti. Tunaweza kuandika tena mfano wetu wa rangi bila mpangilio ili kuonekana kama hii:

Const btn = document.querySelector("kifungo"); kazi bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("bofya", bgChange);

Ndani ya kitendakazi cha addEventListener(), tunabainisha vigezo viwili - jina la tukio tunalotaka kusajili kidhibiti hiki, na msimbo unaojumuisha kitendakazi cha kidhibiti tunachotaka kutekeleza kukijibu. Kumbuka kuwa inafaa kabisa kuweka nambari zote ndani ya addEventListener() kazi, kwa kazi isiyojulikana, kama hii:

Btn.addEventListener("click", function() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol; ));

Utaratibu huu una faida fulani juu ya mifumo ya zamani iliyojadiliwa hapo awali. Kwa mwanzo, kuna kazi ya mwenzake, removeEventListener() , ambayo huondoa msikilizaji aliyeongezwa hapo awali. Kwa mfano, hii ingeondoa kisikilizaji kilichowekwa katika kizuizi cha kwanza cha msimbo katika sehemu hii:

Btn.removeEventListener("bofya", bgChange);

Hii si muhimu kwa programu rahisi, ndogo, lakini kwa programu kubwa, ngumu zaidi inaweza kuboresha ufanisi wa kusafisha vidhibiti vya matukio vya zamani ambavyo havijatumiwa. Zaidi ya hayo, kwa mfano, hii inakuwezesha kuwa na kifungo sawa kufanya vitendo tofauti katika hali tofauti - unachotakiwa kufanya ni kuongeza au kuondoa vidhibiti vya tukio inavyofaa.

Pili, unaweza pia kusajili vidhibiti vingi kwa msikilizaji mmoja. Vidhibiti viwili vifuatavyo havingetumika vyote:

MyElement.onclick = functionA; myElement.onclick = functionB;

Mstari wa pili unafuta thamani ya kubofya iliyowekwa na mstari wa kwanza. Hii ingefanya kazi, hata hivyo:

MyElement.addEventListener("bonyeza", kaziA); myElement.addEventListener("bonyeza", kaziB);

Vitendaji vyote viwili sasa vingefanya kazi wakati kipengee kinapobofya.

Kwa kuongeza, kuna idadi ya vipengele vingine vya nguvu na chaguo zinazopatikana na utaratibu wa tukio hili. Hizi ziko nje ya wigo wa nakala hii, lakini ikiwa unataka kusoma juu yao, angalia addEventListener() na uondoeEventListener() kurasa za marejeleo.

Je, nitumie utaratibu gani?

Kati ya mifumo hiyo mitatu, hakika hupaswi kutumia sifa za kidhibiti tukio la HTML - hizi zimepitwa na wakati, na mazoea mabaya, kama ilivyotajwa hapo juu.

Nyingine mbili zinaweza kubadilishana, angalau kwa matumizi rahisi:

• Sifa za kidhibiti tukio zina uwezo na chaguo chache, lakini utangamano bora wa kivinjari (kinaungwa mkono hadi kufikia Internet Explorer 8). Labda unapaswa kuanza na haya unapojifunza.
• Matukio ya Kiwango cha 2 cha DOM (addEventListener() , n.k.) yana nguvu zaidi, lakini pia yanaweza kuwa magumu zaidi na hayatumiki vyema (yanatumika kama Internet Explorer 9). Unapaswa pia kuzijaribu, na ulenge kuzitumia inapowezekana.

Faida kuu za utaratibu wa tatu ni kwamba unaweza kuondoa msimbo wa kidhibiti tukio ikiwa inahitajika, kwa kutumia removeEventListener() , na unaweza kuongeza wasikilizaji wengi wa aina moja kwa vipengele ikiwa inahitajika. Kwa mfano, unaweza kupiga simu addEventListener("click", function() ( ... )) kwenye kipengele mara nyingi, na vitendaji tofauti vilivyobainishwa katika hoja ya pili. Hili haliwezekani na mali ya kidhibiti tukio kwa sababu majaribio yoyote yajayo ya kuweka mali yatabatilisha yale ya awali, kwa mfano:

Element.onclick = kazi1; kipengele.onclick = kazi2; na kadhalika.

Kumbuka: Iwapo utaombwa kuauni vivinjari vya zamani zaidi ya Internet Explorer 8 katika kazi yako, unaweza kupata matatizo, kwani vivinjari vile vya zamani hutumia miundo tofauti ya matukio kutoka kwa vivinjari vipya zaidi. Lakini usiogope, maktaba nyingi za JavaScript (kwa mfano jQuery) zina vitendaji vilivyojumuishwa ambavyo huondoa tofauti za kivinjari. Usijali kuhusu hili sana katika hatua hii ya safari yako ya kujifunza.

Dhana zingine za tukio

Katika sehemu hii, tunashughulikia kwa ufupi dhana kadhaa za hali ya juu ambazo zinafaa kwa matukio. Sio muhimu kuelewa dhana hizi kikamilifu kwa wakati huu, lakini zinaweza kutumika kuelezea mifumo kadhaa ya nambari ambayo unaweza kukutana nayo mara kwa mara.

Vitu vya tukio

Wakati mwingine ndani ya kitendakazi cha kidhibiti tukio, unaweza kuona kigezo kilichobainishwa kwa jina kama vile event , evt , au kwa urahisi e . Hii inaitwa kitu cha tukio , na inapitishwa kiotomatiki kwa wasimamizi wa tukio ili kutoa vipengele na maelezo ya ziada. Kwa mfano, hebu tuandike tena mfano wetu wa rangi bila mpangilio tena kidogo:

Kazi bgChange(e) ( const rndCol = "rgb(" + nasibu(255) + "," + nasibu(255) + "," + nasibu(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); ) btn.addEventListener("bofya", bgChange);

Hapa unaweza kuona kwamba tunajumuisha kipengee cha tukio, e , katika chaguo la kukokotoa, na katika chaguo za kukokotoa kuweka mtindo wa rangi ya usuli kwenye e.target - ambayo ni kitufe chenyewe. Sifa inayolengwa ya kitu cha tukio huwa ni marejeleo ya kipengele ambacho tukio limetokea hivi punde. Kwa hivyo katika mfano huu, tunaweka rangi ya mandharinyuma bila mpangilio kwenye kitufe, sio ukurasa.

Kumbuka : Unaweza kutumia jina lolote unalopenda kwa kitu cha tukio - unahitaji tu kuchagua jina ambalo unaweza kutumia kulirejelea ndani ya kipengele cha kidhibiti cha tukio. e/evt/tukio hutumiwa sana na wasanidi programu kwa sababu ni fupi na ni rahisi kukumbuka. Daima ni vizuri kuwa thabiti - na wewe mwenyewe, na na wengine ikiwa inawezekana.

e.target ni muhimu sana unapotaka kuweka kidhibiti kimoja cha tukio kwenye vipengele vingi na kufanya jambo kwa vyote tukio linapotokea juu yake. Unaweza, kwa mfano, kuwa na seti ya vigae 16 ambavyo hutoweka vinapobofya. Ni muhimu kuwa na uwezo wa kuweka tu kitu kutoweka kama e.target , badala ya kukichagua kwa njia ngumu zaidi. Katika mfano ufuatao (tazama useful-eventtarget.html kwa msimbo kamili wa chanzo; pia tazama inavyoendeshwa moja kwa moja hapa), tunaunda vipengele 16 kwa kutumia JavaScript. Kisha tunachagua zote kwa kutumia document.querySelectorAll() , kisha pitia kila moja, na kuongeza kidhibiti cha kubofya kwa kila kinachofanya hivyo kwamba rangi ya nasibu itumike kwa kila moja inapobofya:

Const divs = document.querySelectorAll("div"); kwa (wacha i = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

Matokeo ni kama ifuatavyo (jaribu kubonyeza juu yake - furahiya):

Mfano uliofichwa Mfano wa lengo la tukio muhimu div ( urefu: 100px; upana: 25%; kuelea: kushoto; ) kwa (acha i = 1; i

Katika mfano hapo juu, baada ya shamba kupokea lengo na mtumiaji anaendelea kujaza sehemu inayofuata (kwa mfano, kwa kutumia TAB au kubofya mara kwa mara), kipengele kitaita kipengele cha kuangaliaName, ambacho kimeandikwa kwa JS.
Vidhibiti vya kawaida vya matukio ya HTML havipendekezwi kutumika katika maendeleo ya kisasa, hasa kutokana na ukweli kwamba utendakazi umechanganywa na uwekaji alama, ambayo inatatiza kazi na utatuzi wa msimbo.

2. Vidhibiti vya kawaida vya hafla katika DOM

Mbinu hii hutenganisha JS na markup, lakini ina kizuizi sawa - matukio yanaweza tu kupewa kazi moja. Ingizo sawa la kidhibiti tukio la HTML kwenye DOM litakuwa:

var username = document.getElementbyId("jina la mtumiaji"); username.onblur = checkName;

jina la mtumiaji. onblur = checkName ;

JavaScript. Kuanza kwa haraka

Jifunze misingi ya JavaScript kwa mfano wa moja kwa moja wa jinsi ya kuunda programu ya wavuti.

Kama ilivyo katika mfano uliopita, chaguo la kukokotoa la jina la kuangalia huendesha baada ya kipengele cha fomu kupoteza mwelekeo.

3. Wasikilizaji wa Matukio

Mbinu ya kisasa ya kuongeza kidhibiti cha tukio ambacho hukuruhusu kuratibu matukio na vitendakazi vingi:

var username = document.getElementbyId("jina la mtumiaji"); username.addEventListener("blur", checkName, uongo);

var username = hati. getElementbyId("jina la mtumiaji"); jina la mtumiaji. addEventListener ("blur" , checkName , false ) ;

Thamani ya boolean mwishoni inaonyesha ikiwa tukio linafaa kunaswa. Kwa kawaida huwekwa kuwa sivyo. Katika maandishi rahisi, tukio mara nyingi huandikwa kama kazi isiyojulikana:

var username = document.getElementbyId("jina la mtumiaji"); username.addEventListener("blur", function() (// vitendo vya kuanzisha tukio))

Sio matukio yote ni sawa Ni muhimu kuelewa kwamba sio matukio yote yanaweza kutibiwa sawa. Matukio ya kusongesha na kurekebisha ukubwa yanafukuzwa mara nyingi sana, ndiyo sababu unahitaji kufanya kazi nao kwa uangalifu sana ili usipunguze kasi ya hati. Vile vile hutumika kwa matukio yanayoonekana kutokuwa na madhara kama vile ingizo. Utendaji wa hati unaweza kuathiriwa sana ikiwa itajaribu kujibu kila mara tukio la ingizo linaloanzishwa mara kwa mara kwenye kitelezi cha masafa. Sio matukio yote yanayofuatiliwa Watazamaji wa mabadiliko kwa sasa hawawezi kufuatilia mabadiliko yote kwa vipengele vyote kwenye ukurasa. Kwa mfano, hakuna njia ya kufuatilia mabadiliko katika urefu wa kipengee (wakati chombo katika muundo wa msikivu kinapungua, maandishi ndani yake yanapangwa upya na vipengele vinakuwa ndefu). Bado, kuna njia za kufuatilia mabadiliko, nitazungumzia kuhusu hili katika makala inayofuata. Ambatanisha matukio kwa vipengele sahihi Tukio la kubofya linatumika kwa vipengele vingi, ikiwa ni pamoja na viungo. Kuna sheria ya jumla - haipendekezi kushikamana na nambari ya JS kwenye viungo. Kwa kubofya kiungo, mtumiaji anapaswa kupelekwa kwenye eneo lingine la tovuti au kwa nanga. Ikiwa unahitaji kipengele cha UI ambacho unaweza kubadilisha kitu kwenye ukurasa huo huo, basi kifungo kinafaa kwako. Unaweza kuongeza JavaScript kwa urahisi kwenye kitufe. Usitumie JavaScript wakati unaweza kuifanya kwa CSS Ikilinganishwa na CSS, JavaScript ni ya polepole na haitegemei. Kimsingi, CSS inapaswa kutumika kama mbadala wa hati ngumu inapowezekana. Walakini, CSS haifanyi kila kitu. Inafanya kazi nzuri na :hover (inachukua nafasi ya matukio ya kugusa mara nyingi) na inaweza pia kuchukua nafasi ya tukio la kubofya na :target katika visa vingine. Uhuishaji wa CSS huzinduliwa kiotomatiki baada ya ukurasa kupakiwa, na pia kuna hali maalum za CSS ambazo zinaweza kuanzishwa kwa vipengele kama vile vitufe vya redio. Walakini, kitu chochote ngumu zaidi kawaida huachwa kwa JavaScript.