Ինչպես օգտագործել իրադարձությունների ունկնդիրները JavaScript-ում
Միջոցառումների մշակումը կենսական նշանակություն ունի ինտերակտիվ հավելվածների համար: Իմացեք, թե ինչպես արձագանքել մկնիկի և ստեղնաշարի իրադարձություններին՝ օգտագործելով JavaScript:
Շատ վեբ հավելվածներ իրենց գործառույթներն իրականացնելու համար ապավինում են իրադարձությունների որևէ ձևի: Ինչ-որ պահի մարդը փոխազդում է իր ինտերֆեյսի հետ, որը առաջացնում է իրադարձություն: Մարդկանց կողմից առաջնորդվող այս իրադարձությունները սովորաբար հիմնվում են ծայրամասային սարքի վրա, ինչպիսիք են մկնիկը կամ ստեղնաշարը:
Երբ սարքը ստեղծում է իրադարձություն, ծրագիրը կարող է լսել այն, իմանալու, թե երբ պետք է իրականացնել կոնկրետ վարքագիծ: Այս ձեռնարկում դուք կսովորեք, թե ինչպես լսել իրադարձությունները՝ օգտագործելով JavaScript:
Ի՞նչ է իրադարձությունների վրա հիմնված ծրագրավորումը:
Իրադարձությունների վրա հիմնված ծրագրավորումը պարադիգմայի անվանումն է, որը հիմնված է իրադարձության կատարման վրա՝ իր գործառույթներն իրականացնելու համար: Հնարավոր է ստեղծել իրադարձությունների վրա հիմնված ծրագիր ցանկացած բարձր մակարդակի ծրագրավորման լեզվով: Սակայն իրադարձությունների վրա հիմնված ծրագրավորումն առավել տարածված է JavaScript-ի նման լեզուներում, որոնք ինտեգրվում են օգտատիրոջ միջերեսին:
Ի՞նչ է Իրադարձությունների ունկնդիրը:
Իրադարձությունների ունկնդիրը գործառույթ է, որը նախաձեռնում է նախապես սահմանված գործընթաց, եթե տեղի է ունենում կոնկրետ իրադարձություն: Այսպիսով, իրադարձության ունկնդիրը «լսում է» գործողությունը, այնուհետև կանչում է գործառույթ, որը կատարում է համապատասխան առաջադրանք: Այս իրադարձությունը կարող է ունենալ բազմաթիվ ձևերից մեկը: Ընդհանուր օրինակները ներառում են մկնիկի իրադարձությունները, ստեղնաշարի իրադարձությունները և պատուհանի իրադարձությունները:
Իրադարձությունների ունկնդիրի ստեղծում՝ օգտագործելով JavaScript
Դուք կարող եք լսել իրադարձություններ DOM-ի ցանկացած տարրի վերաբերյալ: JavaScript-ն ունի addEventListener() ֆունկցիա, որը կարող եք զանգահարել վեբ էջի ցանկացած տարրի վրա: addEventListener() ֆունկցիան EventTarget ինտերֆեյսի մեթոդ է: Բոլոր օբյեկտները, որոնք աջակցում են իրադարձություններին, իրականացնում են այս ինտերֆեյսը: Սա ներառում է պատուհանը, փաստաթուղթը և էջի առանձին տարրեր:
AddEventListener() ֆունկցիան ունի հետևյալ հիմնական կառուցվածքը.
element.addEventListener("event", functionToExecute);Որտեղ:
- տարրը կարող է ներկայացնել ցանկացած HTML թեգ (կոճակից մինչև պարբերություն)
- «իրադարձությունը»-ը կոնկրետ, ճանաչված գործողություն անվանող տող է
- functionToExecute-ը հղում է գոյություն ունեցող ֆունկցիային
Եկեք ստեղծենք հետևյալ վեբ էջը, որն ունի մի քանի HTML տարրեր.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="home">
<h1 class="mainHeading">Welcome</h1>
<p>
Hello, welcome to my website.
</p>
<button class="btn" id="btn=1">Learn More</button>
</div>
<div id="about">
<h2 class=subheading>User Info</h2>
<label for="username">User Name: </label>
<input type="text" id="username">
<button class="btn" id="btn-2">Submit</button>
</div>
<script src="app.js"></script>
</body>
</html>Վերևի HTML կոդը ստեղծում է մի պարզ էջ, որը կապում է JavaScript ֆայլին, որը կոչվում է app.js: app.js ֆայլը կպարունակի իրադարձության ունկնդիրներին կարգավորելու կոդը: Այսպիսով, եթե ցանկանում եք սկսել որոշակի գործընթաց, երբ օգտվողը սեղմում է վեբ էջի առաջին կոճակը, սա այն ֆայլն է, որտեղ այն պետք է ստեղծվի:
app.js ֆայլը
document.querySelector('.btn').addEventListener("click", clickDemo)
function clickDemo(){
console.log("Hi there")
}Վերևի JavaScript կոդը մուտք է գործում էջի առաջին կոճակը՝ օգտագործելով querySelector() ֆունկցիան: Այնուհետև այն ավելացնում է իրադարձությունների լսող այս տարրին՝ օգտագործելով addEventListener() մեթոդը: Կոնկրետ իրադարձությունը, որը նա լսում է, ունի «սեղմել» անունը: Երբ կոճակը գործարկում է այդ իրադարձությունը, լսողը կկանչի clickDemo() ֆունկցիան:
clickDemo() ֆունկցիան տպում է «Բարև ձեզ» բրաուզերի վահանակում: Ամեն անգամ, երբ սեղմում եք կոճակը, դուք պետք է տեսնեք այս ելքը ձեր վահանակում:
«Սեղմեք» Իրադարձության ելքը
Որոնք են մկնիկի իրադարձությունները:
JavaScript-ն ունի MouseEvent ինտերֆեյս, որը ներկայացնում է իրադարձություններ, որոնք տեղի են ունենում մկնիկի հետ օգտատերերի փոխազդեցության պատճառով: Մի քանի իրադարձություններ օգտագործում են MouseEvent ինտերֆեյսը: Այս իրադարձությունները ներառում են հետևյալը.
- սեղմել
- dblclick
- մկնիկի շարժում
- mouseover
- մկնիկը դուրս հանել
- mouseup
- mousedown
սեղմել իրադարձությունը տեղի է ունենում, երբ օգտատերը սեղմում և արձակում է մկնիկի կոճակը, մինչդեռ դրա ցուցիչը գտնվում է տարրի վրա: Սա հենց այն է, ինչ տեղի ունեցավ նախորդ օրինակում: Ինչպես տեսնում եք վերը նշված ցանկից, մկնիկի իրադարձությունները կարող են տարբեր ձևեր ունենալ:
Մկնիկի մեկ այլ տարածված իրադարձություն է dblclick, որը նշանակում է կրկնակի սեղմում: Սա գործարկվում է, երբ օգտատերը երկու անգամ անընդմեջ սեղմում է մկնիկի կոճակը: addEventListener() ֆունկցիայի ուշագրավ բանն այն է, որ դուք կարող եք օգտագործել այն մեկ տարրին մի քանի իրադարձությունների ունկնդիրներ նշանակելու համար:
Առաջին կոճակին dblclick իրադարձություն ավելացնելը
document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
alert("This is a demonstration of how to create a double-click event")
}Վերը նշված կոդը app.js ֆայլին ավելացնելով արդյունավետորեն կստեղծվի վեբ էջի առաջին կոճակի երկրորդ իրադարձությունների լսող: Այսպիսով, առաջին կոճակը երկու անգամ սեղմելով զննարկիչում կստեղծվի հետևյալ ահազանգը.
Վերևի պատկերում կտեսնեք ստեղծվող ահազանգը, ինչպես նաև կտեսնեք, որ ևս երկու «Բարև ձեզ» ելք կա վահանակում: Դա պայմանավորված է նրանով, որ կրկնակի սեղմումով իրադարձությունը երկու սեղմումով իրադարձությունների համակցություն է, և կան իրադարձություններ ունկնդիրներ և՛click, և՛dblclick իրադարձությունների համար:
Ցանկում մկնիկի մյուս իրադարձությունների անունները նկարագրում են նրանց վարքը: mousemove իրադարձությունը տեղի է ունենում ամեն անգամ, երբ օգտատերը տեղափոխում է իր մկնիկը, երբ կուրսորը գտնվում է տարրի վրայով: մկնիկի ավելացումիրադարձությունը տեղի է ունենում, երբ օգտատերը սեղմում է կոճակը տարրի վրա, այնուհետև բաց է թողնում այն:
Որոնք են ստեղնաշարի իրադարձությունները:
JavaScript-ն ունի KeyboardEvent ինտերֆեյս: Սա լսում է օգտագործողի և նրա ստեղնաշարի փոխազդեցությունը: Նախկինում KeyboardEvent-ն ուներ երեք տեսակի իրադարձություն: Այնուամենայնիվ, JavaScript-ը հնացել է keypress իրադարձությունը:
Այսպիսով, keyup և keydown իրադարձությունները միակ երկու առաջարկվող իրադարձություններն են ստեղնաշարի վրա, որոնք այն ամենն են, ինչ ձեզ հարկավոր է: keydown իրադարձությունը տեղի է ունենում, երբ օգտատերը սեղմում է ստեղնը, և keyup իրադարձությունը տեղի է ունենում, երբ օգտագործողը թողարկում է այն:
Վերանայելով վերը նշված HTML օրինակը՝ ստեղնաշարի իրադարձությունների ունկնդիր ավելացնելու լավագույն վայրը մուտքագրում տարրն է:
Ստեղնաշարի իրադարձությունների ունկնդիր ավելացնելով app.js ֆայլին
let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput(e){
greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`)
}Վերևի կոդը օգտագործում է querySelector() ֆունկցիան՝ էջի պարբերությունը և մուտքագրման տարրերը մուտք գործելու համար: Այնուհետև այն կանչում է addEventListener() մեթոդը input տարրի վրա, որը լսում է keyup իրադարձությունը: Ամեն անգամ, երբ տեղի է ունենում keyup իրադարձություն, captureInput() ֆունկցիան վերցնում է հիմնական արժեքը և ավելացնում այն էջի պարբերությանը: e պարամետրը ներկայացնում է իրադարձությունը, որը JavaScript-ը ավտոմատ կերպով նշանակում է: Այս իրադարձության օբյեկտն ունի հատկություն՝ թիրախ, որը հղում է այն տարրին, որի հետ օգտատերը շփվել է:
Այս օրինակումմուտքագրումդաշտին կցված պիտակը օգտանուն է խնդրում: Եթե մուտքագրեք ձեր անունը input դաշտում, ապա վեբ էջը կունենա այսպիսի տեսք.
Այժմ պարբերությունը պարունակում է մուտքային արժեք, որը վերը նշված օրինակում «Ջեյն Դո» է:
addEventListener-ը գրավում է բոլոր տեսակի օգտատերերի փոխազդեցությունը
Այս հոդվածը ձեզ ներկայացրեց addEventListener() մեթոդը, ինչպես նաև մկնիկի և ստեղնաշարի մի քանի իրադարձություններ, որոնք կարող եք օգտագործել դրա հետ: Այս պահին դուք գիտեք, թե ինչպես լսել որոշակի իրադարձություն և ինչպես ստեղծել գործառույթ, որն արձագանքում է դրան:
addEventListener-ն ապահովում է լրացուցիչ հնարավորություն, սակայն, իր երրորդ պարամետրի միջոցով: Դուք կարող եք օգտագործել այն իրադարձությունների տարածումը վերահսկելու համար. իրադարձությունների հաջորդականությունը տարրերից դեպի ծնողներ կամ երեխաներ տեղափոխելու համար: