ഇവന്റ് തരങ്ങൾ

വേൾഡ് വൈഡ് വെബിന്റെ ആദ്യ നാളുകളിൽ, വെബ് ഡെവലപ്പർമാർക്ക് വളരെ കുറച്ച് ഇവന്റുകൾ മാത്രമേ കൈകാര്യം ചെയ്യാനുണ്ടായിരുന്നുള്ളൂ: "ലോഡ്", "ക്ലിക്ക്", "മൗസ്ഓവർ" എന്നിവയും മറ്റുള്ളവയും. ഈ പഴയ ഇവന്റ് തരങ്ങളെ എല്ലാ ബ്രൗസറുകളും നന്നായി പിന്തുണയ്ക്കുന്നു. വെബ് പ്ലാറ്റ്ഫോം വികസിച്ചപ്പോൾ, കൂടുതൽ ശക്തമായ ആപ്ലിക്കേഷൻ ഇന്റർഫേസുകൾ ഉൾപ്പെടുത്തുകയും ഇവന്റുകളുടെ എണ്ണം ഗണ്യമായി വർദ്ധിക്കുകയും ചെയ്തു. ഇവന്റുകളുടെ സമ്പൂർണ്ണ സെറ്റ് നിർവചിക്കുന്ന ഒരു മാനദണ്ഡവുമില്ല, പിന്തുണയ്ക്കുന്ന ഇവന്റുകളുടെ എണ്ണം അതിവേഗം വളരുന്നു. ഈ പുതിയ ഇവന്റുകൾ ഇനിപ്പറയുന്ന രണ്ട് ഉറവിടങ്ങളിൽ നിർവചിച്ചിരിക്കുന്നു:

"DOM ലെവൽ 3 ഇവന്റുകൾ" സ്പെസിഫിക്കേഷൻ, നിരവധി വർഷത്തെ സ്തംഭനാവസ്ഥയ്ക്ക് ശേഷം, W3C കൺസോർഷ്യത്തിന്റെ ആഭിമുഖ്യത്തിൽ സജീവമായി വികസിപ്പിക്കാൻ തുടങ്ങി.

HTML5 സ്പെസിഫിക്കേഷനിലെ (ഒപ്പം അനുബന്ധ അധിക സ്പെസിഫിക്കേഷനുകളും) നിരവധി പുതിയ ആപ്ലിക്കേഷൻ ഇന്റർഫേസുകൾ ഉപയോഗിച്ചിരിക്കുന്ന പുതിയ ഇവന്റുകൾ നിർവചിക്കുന്നു, ഉദാഹരണത്തിന്, ബ്രൗസിംഗ് ചരിത്രം, ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് പ്രവർത്തനം, ഡോക്യുമെന്റുകൾക്കിടയിൽ സന്ദേശമയയ്ക്കൽ, ഓഡിയോ വീഡിയോകൾ പ്ലേ ചെയ്യൽ എന്നിവയ്ക്കായി.

ഈ പുതിയ ഇവന്റ് തരങ്ങളിൽ പലതും ഇതുവരെ വ്യാപകമായി പിന്തുണയ്‌ക്കപ്പെടുന്നില്ല, അവ ഇപ്പോഴും ഡിസൈൻ ഘട്ടത്തിലുള്ള മാനദണ്ഡങ്ങൾ അനുസരിച്ചാണ് നിർവചിച്ചിരിക്കുന്നത്. നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകളിൽ നിങ്ങൾ മിക്കപ്പോഴും ഉപയോഗിക്കുന്ന ഇവന്റുകൾ സാധാരണയായി എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്ന ദീർഘകാല ഇവന്റുകളായിരിക്കും: മൗസ് ഇവന്റുകൾ, കീബോർഡ് ഇവന്റുകൾ, HTML ഫോമുകൾ ഇവന്റുകൾ, വിൻഡോ ഇവന്റുകൾ. ഈ സംഭവങ്ങൾ ഞങ്ങൾ പരിഗണിക്കും.

ഡോക്യുമെന്റ് ലോഡ് ഇവന്റുകൾ

ഡോക്യുമെന്റ് ഡൗൺലോഡ് പൂർത്തിയാക്കി അതിൽ പ്രവർത്തനങ്ങൾ നടത്താൻ തയ്യാറാകുമ്പോൾ, മിക്ക വെബ് ആപ്ലിക്കേഷനുകൾക്കും അവരെ അറിയിക്കാൻ വെബ് ബ്രൗസർ ആവശ്യമാണ്. വിൻഡോ ഒബ്‌ജക്‌റ്റിലെ ലോഡ് ഇവന്റ് ഈ ആവശ്യത്തിന് സഹായിക്കുന്നു. ഡോക്യുമെന്റും അതിന്റെ എല്ലാ ചിത്രങ്ങളും പൂർണ്ണമായി ലോഡുചെയ്‌തതിനുശേഷം മാത്രമേ ലോഡ് ഇവന്റ് പ്രവർത്തനക്ഷമമാകൂ. എന്നിരുന്നാലും, ഡോക്യുമെന്റ് പാഴ്‌സ് ചെയ്‌ത ഉടൻ, ഇമേജുകൾ ലോഡുചെയ്യുന്നതിന് മുമ്പ് സ്‌ക്രിപ്റ്റുകൾ സാധാരണയായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും. ലോഡ് ഒഴികെയുള്ള ഇവന്റുകളിൽ സ്ക്രിപ്റ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങിയാൽ നിങ്ങൾക്ക് ഒരു വെബ് ആപ്ലിക്കേഷന്റെ സ്റ്റാർട്ടപ്പ് സമയം ഗണ്യമായി കുറയ്ക്കാൻ കഴിയും.

ഡോക്യുമെന്റ് ലോഡുചെയ്‌ത്, പാഴ്‌സ് ചെയ്‌ത്, മാറ്റിവെച്ച സ്‌ക്രിപ്റ്റുകൾ എക്‌സിക്യൂട്ട് ചെയ്‌തുകഴിഞ്ഞാൽ DOMContentLoaded ഇവന്റ് ഉയർത്തുന്നു. ഈ ഘട്ടത്തിൽ, അസിൻക് ആട്രിബ്യൂട്ട് ഉള്ള ചിത്രങ്ങളും സ്ക്രിപ്റ്റുകളും ലോഡ് ചെയ്യുന്നത് തുടരാം, പക്ഷേ ഡോക്യുമെന്റ് തന്നെ പ്രവർത്തനങ്ങൾക്ക് തയ്യാറാകും. ഈ ഇവന്റ് ആദ്യം ഫയർഫോക്സിൽ അവതരിപ്പിച്ചു, തുടർന്ന് മൈക്രോസോഫ്റ്റ് ഉൾപ്പെടെയുള്ള മറ്റെല്ലാ ബ്രൗസർ നിർമ്മാതാക്കളും ഇത് സ്വീകരിച്ചു, ഇത് IE9-ൽ ഈ ഇവന്റിന് പിന്തുണ ചേർത്തു. പേരിൽ DOM പ്രിഫിക്‌സ് ഉണ്ടെങ്കിലും, ഈ ഇവന്റ് DOM ലെവൽ 3 ഇവന്റ്‌സ് സ്റ്റാൻഡേർഡിന്റെ ഭാഗമല്ല, എന്നാൽ ഇത് HTML5 സ്പെസിഫിക്കേഷൻ അനുസരിച്ച് സ്റ്റാൻഡേർഡ് ചെയ്തിരിക്കുന്നു.

ഡോക്യുമെന്റ് ലോഡ് ചെയ്യുമ്പോൾ, ഡോക്യുമെന്റ്.readyState പ്രോപ്പർട്ടിയുടെ മൂല്യം മാറുന്നു. IE-യിലെ ഈ പ്രോപ്പർട്ടി മൂല്യത്തിലെ ഓരോ മാറ്റവും ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റിലെ ഒരു റെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഇവന്റിനോടൊപ്പമുണ്ട്, അതിനാൽ IE-യിൽ ഈ ഇവന്റ് പൂർണ്ണമായ അവസ്ഥ എപ്പോൾ സംഭവിക്കുമെന്ന് നിർണ്ണയിക്കാൻ ഉപയോഗിക്കാം. HTML5 സ്‌പെസിഫിക്കേഷൻ റെഡിസ്റ്റേറ്റ്‌ചേഞ്ച് ഇവന്റിനെ സ്റ്റാൻഡേർഡ് ചെയ്യുന്നു, എന്നാൽ ലോഡ് ഇവന്റിന് തൊട്ടുമുമ്പ് അത് ഫയർ ചെയ്യേണ്ടത് ആവശ്യമാണ്, അതിനാൽ ലോഡ് ഇവന്റിനേക്കാൾ റെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഇവന്റിന്റെ പ്രയോജനം എന്താണെന്ന് പൂർണ്ണമായും വ്യക്തമല്ല.

ചുവടെയുള്ള ഉദാഹരണം whenReady() ഫംഗ്‌ഷൻ നിർവചിക്കുന്നു. പ്രമാണം ഓപ്പറേഷനുകൾക്കായി തയ്യാറായ ഉടൻ തന്നെ, whenReady() എന്നതിലേക്ക് ഫംഗ്‌ഷൻ കൈമാറുന്നു (ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റിന്റെ ഒരു രീതിയായി). whenReady() DOMContentLoaded, റെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഇവന്റുകൾക്കായി കാത്തിരിക്കുന്നു, കൂടാതെ ആദ്യത്തെ രണ്ട് ഇവന്റുകൾ പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകളിൽ ലോഡ് ഇവന്റ് ഉപയോഗിക്കുകയാണെങ്കിൽ അത് ഒരു ഫാൾബാക്ക് ആയി മാത്രം ഉപയോഗിക്കുന്നു. ഇനിപ്പറയുന്ന ചില സാഹചര്യങ്ങളിൽ whenReady() ഫംഗ്‌ഷൻ ഉപയോഗിക്കും:

/* whenReady() നിങ്ങളുടെ ഫംഗ്‌ഷൻ പാസ് ചെയ്യുക, ഡോക്യുമെന്റ് പാഴ്‌സിംഗ് പൂർത്തിയാക്കി പ്രവർത്തനങ്ങൾ നടത്താൻ തയ്യാറായിക്കഴിഞ്ഞാൽ അത് അതിനെ (ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റിലെ ഒരു രീതിയായി) വിളിക്കും. രജിസ്റ്റർ ചെയ്ത ഫംഗ്‌ഷനുകൾ ആദ്യത്തെ DOMContentLoaded, റെഡിസ്റ്റേറ്റ്‌ചേഞ്ച് അല്ലെങ്കിൽ ലോഡ് ഇവന്റിൽ വിളിക്കുന്നു. പ്രമാണം തയ്യാറായിക്കഴിഞ്ഞാൽ, എല്ലാ ഫംഗ്‌ഷനുകളും വിളിച്ചുകഴിഞ്ഞാൽ, എപ്പോൾ റെഡി() അതിലേക്ക് കൈമാറിയ എല്ലാ ഫംഗ്ഷനുകളേയും ഉടൻ വിളിക്കും. */ var whenReady = (function() ( // whenReady() function var funcs = ; ഹാൻഡ്‌ലർ ഫംഗ്‌ഷനെ // ഇവന്റ് ഹാൻഡ്‌ലർ എന്ന് വിളിക്കുന്നു, ഡോക്യുമെന്റ് // ഓപ്പറേഷൻസ് ഫംഗ്‌ഷൻ ഹാൻഡ്‌ലർ (ഇ) നിർവഹിക്കാൻ തയ്യാറായ ഉടൻ വിളിക്കും ( // ഹാൻഡ്‌ലറിനെ ഇതിനകം വിളിച്ചിട്ടുണ്ടെങ്കിൽ, (തയ്യാറാണ്) തിരികെ നൽകിയാൽ നിയന്ത്രണം തിരികെ നൽകുക; / / ഇതൊരു റെഡിസ്റ്റേറ്റ്‌ചേഞ്ച് ഇവന്റാണെങ്കിൽ, സംസ്ഥാനത്തിന് ഒരു മൂല്യം ലഭിച്ചിട്ടുണ്ടെങ്കിൽ, // "complete" എന്നതിൽ നിന്ന് മികച്ചതാണ്, അതായത് (e.type==="readystatechange" && document.readyState !== " പൂർണ്ണം") മടങ്ങുക; // രജിസ്റ്റർ ചെയ്ത എല്ലാ ഫംഗ്‌ഷനുകളും വിളിക്കുക. // വിളിക്കുന്ന ഫംഗ്‌ഷനുകളിലൊന്ന് // അധിക ഫംഗ്‌ഷനുകൾ രജിസ്റ്റർ ചെയ്യുന്ന സാഹചര്യത്തിൽ, // funcs.length പ്രോപ്പർട്ടിയുടെ ഓരോ മൂല്യവും ഇവിടെ ഒരിക്കൽ പരിശോധിച്ചുവെന്നത് ശ്രദ്ധിക്കുക. (var i = 0; ഐ

മൗസ് ഇവന്റുകൾ

മൗസുമായി ബന്ധപ്പെട്ട് ധാരാളം സംഭവങ്ങളുണ്ട്. അവയെല്ലാം ചുവടെയുള്ള പട്ടികയിൽ പട്ടികപ്പെടുത്തിയിരിക്കുന്നു. മൗസെന്ററും മൗസ്‌ലീവ് ബബിളും ഒഴികെയുള്ള എല്ലാ മൗസ് ഇവന്റുകളും. ലിങ്കുകളിലും ഫോം സമർപ്പിക്കാനുള്ള ബട്ടണുകളിലും സംഭവിക്കുന്ന ക്ലിക്ക് ഇവന്റുകൾ ഡിഫോൾട്ട് പ്രവർത്തനങ്ങളുള്ളവയാണ്, അത് റദ്ദാക്കാവുന്നതാണ്. സന്ദർഭ മെനു ഇവന്റ് റദ്ദാക്കാനും സന്ദർഭ മെനു ദൃശ്യമാകുന്നത് തടയാനും സൈദ്ധാന്തികമായി സാധ്യമാണ്, എന്നാൽ ചില ബ്രൗസറുകൾക്ക് ഈ ഇവന്റ് റദ്ദാക്കാൻ കഴിയാത്ത ക്രമീകരണങ്ങളുണ്ട്.

JavaScript മൗസ് ഇവന്റുകൾ വിവരണം ടൈപ്പ് ചെയ്യുക

ക്ലിക്ക് ചെയ്യുക	ഉപയോക്താവ് ഒരു മൗസ് ബട്ടൺ അമർത്തി റിലീസ് ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ ഒരു ഘടകം സജീവമാക്കുമ്പോൾ ഉയർന്ന തലത്തിലുള്ള ഇവന്റ്.
സന്ദർഭ മെനു	സന്ദർഭ മെനു പ്രദർശിപ്പിക്കുന്നതിന് മുമ്പ് ഉയർത്തിയ റദ്ദാക്കാവുന്ന ഇവന്റ്. നിലവിലെ ബ്രൗസറുകൾ വലത്-ക്ലിക്കിൽ ഒരു സന്ദർഭ മെനു പ്രദർശിപ്പിക്കുന്നു, അതിനാൽ ഈ ഇവന്റ് ഒരു ക്ലിക്ക് ഇവന്റായും ഉപയോഗിക്കാം.
dblclick	ഉപയോക്താവ് ഇരട്ട-ക്ലിക്കുചെയ്യുമ്പോൾ ഫയർ ചെയ്യുന്നു.
മൗസ്ഡൗൺ	ഉപയോക്താവ് ഒരു മൗസ് ബട്ടൺ അമർത്തുമ്പോൾ ഫയർ ചെയ്യുന്നു.
മൗസ്അപ്പ്	ഉപയോക്താവ് മൗസ് ബട്ടൺ റിലീസ് ചെയ്യുമ്പോൾ ഫയർ ചെയ്യുന്നു.
മൗസ് നീക്കുക	ഉപയോക്താവ് മൗസ് പോയിന്റർ നീക്കുമ്പോൾ ഫയർ ചെയ്യുന്നു.
mouseover	മൗസ് പോയിന്റർ ഒരു മൂലകത്തിന് മുകളിൽ വയ്ക്കുമ്പോൾ തീപിടിക്കുന്നു. ബന്ധപ്പെട്ട ടാർഗെറ്റ് പ്രോപ്പർട്ടി (അല്ലെങ്കിൽ ഐഇയിലെ എലമെന്റിൽ നിന്ന്) മൗസ് പോയിന്റർ നീക്കിയ ഘടകത്തെ നിർണ്ണയിക്കുന്നു.
മൗസ്ഔട്ട്	മൗസ് പോയിന്റർ മൂലകത്തിൽ നിന്ന് പുറത്തുപോകുമ്പോൾ തീപിടിക്കുന്നു. ബന്ധപ്പെട്ട ടാർഗെറ്റ് (അല്ലെങ്കിൽ ഐഇയിലെ എലമെന്റ്) പ്രോപ്പർട്ടി മൗസ് പോയിന്റർ നീക്കിയ ഘടകത്തെ വ്യക്തമാക്കുന്നു.
മൗസെന്റർ	മൗസ് ഓവറിന് സമാനമാണ്, പക്ഷേ പോപ്പ് അപ്പ് ചെയ്യുന്നില്ല. ആദ്യം IE-ൽ അവതരിപ്പിക്കുകയും HTML5-ൽ സ്റ്റാൻഡേർഡ് ചെയ്യുകയും ചെയ്‌തു, എന്നാൽ എല്ലാ ബ്രൗസറുകളും ഇതുവരെ പിന്തുണച്ചിട്ടില്ല.
മൗസ് ലീവ്	മൗസ്ഔട്ടിന് സമാനമാണ്, പക്ഷേ പോപ്പ് അപ്പ് ചെയ്യുന്നില്ല. ആദ്യം IE-ൽ അവതരിപ്പിക്കുകയും HTML5-ൽ സ്റ്റാൻഡേർഡ് ചെയ്യുകയും ചെയ്‌തു, എന്നാൽ എല്ലാ ബ്രൗസറുകളും ഇതുവരെ പിന്തുണച്ചിട്ടില്ല.

മൗസ് ഇവന്റ് ഹാൻഡ്‌ലറുകൾക്ക് കൈമാറിയ ഒബ്‌ജക്റ്റിന് ജാലകവുമായി ബന്ധപ്പെട്ട പോയിന്ററിന്റെ കോർഡിനേറ്റുകൾ വ്യക്തമാക്കുന്ന ക്ലൈന്റ്എക്സ്, ക്ലയന്റ് വൈ പ്രോപ്പർട്ടികൾ ഉണ്ട്. അവയെ ഡോക്യുമെന്റ് കോർഡിനേറ്റുകളാക്കി മാറ്റുന്നതിന്, വിൻഡോയുടെ സ്ക്രോൾ ബാറുകളുടെ സ്ഥാനങ്ങൾ അവയിലേക്ക് ചേർക്കേണ്ടതുണ്ട്.

പ്രോപ്പർട്ടികൾ altKey, ctrlKey, മെറ്റാകീഒപ്പം shiftKeyഇവന്റ് സമയത്ത് അമർത്തിപ്പിടിക്കുന്ന വിവിധ മോഡിഫയർ കീകളുടെ അവസ്ഥകൾ നിർണ്ണയിക്കുക: അവയുടെ സഹായത്തോടെ, Shift കീ അമർത്തിയുള്ള ഒരു ക്ലിക്കിൽ നിന്ന് നിങ്ങൾക്ക് ഒരു ലളിതമായ ക്ലിക്ക് വേർതിരിച്ചറിയാൻ കഴിയും, ഉദാഹരണത്തിന്.

ഇവന്റ് സമയത്ത് ഏത് മൗസ് ബട്ടണാണ് അമർത്തിപ്പിടിച്ചതെന്ന് ബട്ടൺ പ്രോപ്പർട്ടി നിർണ്ണയിക്കുന്നു. എന്നിരുന്നാലും, വ്യത്യസ്ത ബ്രൗസറുകൾ ഈ പ്രോപ്പർട്ടിയിലേക്ക് വ്യത്യസ്ത മൂല്യങ്ങൾ എഴുതുന്നു, അതിനാൽ പോർട്ടബിൾ രീതിയിൽ ഉപയോഗിക്കാൻ പ്രയാസമാണ്.

ചില ബ്രൗസറുകൾ ഇടത് ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ മാത്രമേ ക്ലിക്ക് ഇവന്റ് ഫയർ ചെയ്യുകയുള്ളൂ. അതിനാൽ, നിങ്ങൾക്ക് മറ്റ് ബട്ടണുകളിൽ നിന്നുള്ള ക്ലിക്കുകൾ കൈകാര്യം ചെയ്യണമെങ്കിൽ, നിങ്ങൾ മൗസ്ഡൗൺ, മൗസ്അപ്പ് ഇവന്റുകൾ ഉപയോഗിക്കണം. സന്ദർഭ മെനു ഇവന്റ് സാധാരണയായി ഒരു വലത്-ക്ലിക്ക് നടത്തിയതായി സൂചന നൽകുന്നു, എന്നാൽ മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, സന്ദർഭ മെനു ദൃശ്യമാകുന്നത് തടയാൻ ഈ ഇവന്റ് ഹാൻഡ്‌ലറുകൾക്ക് എല്ലായ്പ്പോഴും സാധ്യമല്ല.

ചുവടെയുള്ള ഉദാഹരണം ഡ്രാഗ്() ഫംഗ്‌ഷൻ കാണിക്കുന്നു, ഇത് ഒരു മൗസ്ഡൗൺ ഇവന്റ് ഹാൻഡ്‌ലറിൽ നിന്ന് വിളിക്കുമ്പോൾ, മൗസ് ഉപയോഗിച്ച് പൂർണ്ണമായും സ്ഥാനമുള്ള പ്രമാണ ഘടകങ്ങൾ വലിച്ചിടാൻ ഉപയോക്താവിനെ അനുവദിക്കുന്നു. ഡ്രാഗ്() ഫംഗ്‌ഷൻ DOM, IE ഇവന്റ് മോഡലുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നു.

ഡ്രാഗ്() ഫംഗ്‌ഷൻ രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു. ആദ്യത്തേത് വലിച്ചിടുന്ന ഘടകം. ഇത് മൗസ്ഡൗൺ ഇവന്റ് നടന്ന ഘടകവും അത് ഉൾക്കൊള്ളുന്ന ഘടകവുമാകാം (ഉദാഹരണത്തിന്, ഒരു വിൻഡോയുടെ ടൈറ്റിൽ ബാർ പോലെ തോന്നിക്കുന്ന ഒരു ഘടകത്തിലേക്ക് മൗസ് വലിച്ചിടാനും ഒരു വിൻഡോ പോലെ തോന്നിക്കുന്ന അടങ്ങിയിരിക്കുന്ന ഘടകം വലിച്ചിടാനും നിങ്ങൾക്ക് ഉപയോക്താവിനെ അനുവദിക്കാം) . എന്നിരുന്നാലും, ഏത് സാഹചര്യത്തിലും, ഇത് CSS പൊസിഷൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് പൂർണ്ണമായും സ്ഥാപിച്ചിട്ടുള്ള ഒരു ഡോക്യുമെന്റ് ഘടകമായിരിക്കണം. രണ്ടാമത്തെ വാദം മൗസ്ഡൗൺ ഇവന്റിനൊപ്പം ലഭിച്ച ഇവന്റ് ഒബ്‌ജക്റ്റാണ്:

/* ഡ്രാഗ്() - പൂർണ്ണമായും സ്ഥാനമുള്ള HTML ഘടകങ്ങൾ വലിച്ചിടുന്നു. ഈ ഫംഗ്‌ഷൻ onmousedown ഇവന്റ് ഹാൻഡ്‌ലറിൽ നിന്ന് വിളിക്കേണ്ടതാണ്. തുടർന്നുള്ള മൗസ്മൂവ് ഇവന്റുകൾ നിർദ്ദിഷ്ട ഘടകത്തെ നീക്കാൻ ഇടയാക്കും. മൗസ്അപ്പ് ഇവന്റ് ചലനത്തെ പൂർത്തിയാക്കും. ഈ നടപ്പാക്കൽ സ്റ്റാൻഡേർഡ്, ഐഇ ഇവന്റ് മോഡലുകളിൽ പ്രവർത്തിക്കുന്നു. getScrollOffsets() ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു. Arguments: elementToDrag: മൗസ്‌ഡൗൺ ഇവന്റ് ലഭിച്ച ഘടകം അല്ലെങ്കിൽ അടങ്ങിയിരിക്കുന്ന ഘടകം. ഈ ഘടകത്തിന് കേവല സ്ഥാനനിർണ്ണയം ഉണ്ടായിരിക്കണം. ഉപയോക്താവ് മൗസ് പോയിന്റർ നീക്കുമ്പോൾ അതിന്റെ style.left, style.top പ്രോപ്പർട്ടികളുടെ മൂല്യങ്ങൾ മാറും. ഇവന്റ്: മൗസ്ഡൗൺ ഇവന്റ് ഹാൻഡ്‌ലറിന് ലഭിച്ച ഇവന്റ് ഒബ്‌ജക്റ്റ്. */ ഫംഗ്‌ഷൻ ഡ്രാഗ് (elementToDrag, ഇവന്റ്) ( // മൗസ് പോയിന്ററിന്റെ പ്രാരംഭ കോർഡിനേറ്റുകളെ ഡോക്യുമെന്റ് കോർഡിനേറ്റുകളായി പരിവർത്തനം ചെയ്യുക var സ്ക്രോൾ = getScrollOffsets(); // സഹായ പ്രവർത്തനം var startX = event.clientX + scroll.x; var startY = സംഭവം. clientY + scroll.y; // എന്ന മൂലകത്തിന്റെ യഥാർത്ഥ കോർഡിനേറ്റുകൾ (പ്രമാണത്തിന്റെ ആരംഭവുമായി ബന്ധപ്പെട്ടത്) // നീക്കപ്പെടും. എലമെന്റ്ToDrag പൂർണ്ണമായും സ്ഥാനം പിടിച്ചിരിക്കുന്നതിനാൽ, // അതിന്റെ ഓഫ്സെറ്റ് പാരന്റ് പ്രോപ്പർട്ടി ബോഡിയെ പരാമർശിക്കുന്നതായി കരുതപ്പെടുന്നു പ്രമാണത്തിന്റെ var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // മൗസ്ഡൗൺ ഇവന്റ് പോയിന്റും മൂലകത്തിന്റെ മുകളിൽ ഇടത് കോണും തമ്മിലുള്ള ദൂരം കണ്ടെത്തുക. // മൗസ് നീക്കുമ്പോൾ ഈ ദൂരം കണക്കിലെടുക്കും പോയിന്റർ. var deltaX = startX - origX; var deltaY = startY - origY; // (document.addEventListener) ( // സ്റ്റാൻഡേർഡ് ഇവന്റ് മോഡൽ // ഇൻറർസെപ്‌റ്റിംഗ് ഹാൻഡ്‌ലറുകൾ രജിസ്‌റ്റർ ചെയ്‌താൽ മൗസ്‌ഡൗൺ ഇവന്റിനെ പിന്തുടരുന്ന ഹാൻഡ്‌ലറുകൾ മൗസ്‌മോവ്, മൗസ്അപ്പ് ഇവന്റുകൾ രജിസ്റ്റർ ചെയ്യുക ഡോക്യുമെന്റ് ഡോക്യുമെന്റ്.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); ) അല്ലെങ്കിൽ (document.attachEvent) (// IE5-8 നായുള്ള IE ഇവന്റ് മോഡൽ // IE ഇവന്റ് മോഡലിൽ, ഘടകത്തിന്റെ setCapture() രീതി വിളിച്ച് ഇവന്റുകൾ ക്യാപ്‌ചർ ചെയ്യുന്നു. elementToDrag.setCapture(); elementToDrag.attachEvent( "onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // മൗസ് ഇവന്റ് ക്യാപ്‌ചറിന്റെ നഷ്ടം ഒരു മൗസ്അപ്പ് ഇവന്റ് എലമെന്റ്ToDrag.attachEvent("onlosecapture", upHandler); ) // ഈ ഇവന്റ് കൈകാര്യം ചെയ്യുകയും (event .stopPropagation) event.stopPropagation(); // സ്റ്റാൻഡേർഡ് മോഡൽ else event.cancelBubble = true; // IE // ഡിഫോൾട്ട് പ്രവർത്തനങ്ങൾ പ്രവർത്തിക്കുന്നതിൽ നിന്ന് തടയുക. എങ്കിൽ (event.preventDefault) event.preventDefault(); // സ്റ്റാൻഡേർഡ് മോഡൽ else event.returnValue = false; // IE /* ഒരു ഘടകം വലിച്ചിടുമ്പോൾ സംഭവിക്കുന്ന മൗസ് മൂവ് ഇവന്റുകൾ ഈ ഹാൻഡ്‌ലർ തടസ്സപ്പെടുത്തുന്നു. മൂലകത്തെ ചലിപ്പിക്കുന്നതിന് ഇത് ഉത്തരവാദിയാണ്. */ function moveHandler(e) ( if (!e) e = window.event; // IE Event Model // സ്ക്രോൾബാർ സ്ഥാനങ്ങൾ // കൂടാതെ പ്രാരംഭ ക്ലിക്കുമായി ബന്ധപ്പെട്ട ഓഫ്‌സെറ്റുകളും കണക്കിലെടുത്ത് ഘടകം മൗസ് പോയിന്റർ സ്ഥാനത്തേക്ക് നീക്കുക. var സ്ക്രോൾ = getScrollOffsets( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px" ; // ഇവന്റിന്റെ കൂടുതൽ പ്രചരണം നിർത്തലാക്കുക. */ ഫംഗ്‌ഷൻ upHandler(e) ( if (!e) e = window.event; // IE ഇവന്റ് മോഡൽ // തടസ്സപ്പെടുത്തുന്ന ഇവന്റ് ഹാൻഡ്‌ലറുകൾ നീക്കം ചെയ്യുക. എങ്കിൽ (document.removeEventListener) ( // DOM Event Model document.removeEventListener("mouseup" , upHandler, true); document.removeEventListener("mousemove", moveHandler, true); ) else if (document.detachEvent) ( // IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementTovent.detach "onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); ) // കൂടാതെ ഇവന്റിന്റെ കൂടുതൽ പ്രചരണം നിർത്തുക. എങ്കിൽ (e.stopPropagation) e.stopPropagation(); // സ്റ്റാൻഡേർഡ് model else e.cancelBubble = true; // IE ) // ഒബ്‌ജക്റ്റ് ഫംഗ്‌ഷന്റെ x, y പ്രോപ്പർട്ടികൾ ആയി സ്ക്രോൾ ബാറുകളുടെ നിലവിലെ സ്ഥാനങ്ങൾ നൽകുന്നു getScrollOffsets(w) ( // നിർദ്ദിഷ്ട വിൻഡോ അല്ലെങ്കിൽ നിലവിലുള്ളത് ഉപയോഗിക്കുക // ഒരു ആർഗ്യുമെന്റ് ഇല്ലാതെ ഫംഗ്ഷൻ വിളിക്കുകയാണെങ്കിൽ w = w | .pageYOffset); // സ്റ്റാൻഡേർഡ് മോഡിൽ IE (മറ്റ് ബ്രൗസറുകൾക്കും) var d = w.document; എങ്കിൽ (document.compatMode == "CSSICompat") റിട്ടേൺ (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // അനുയോജ്യത മോഡിലുള്ള ബ്രൗസറുകൾക്ക് റിട്ടേൺ (x: d.body.scrollLeft, y: d.body.scrollTop ); )

ഒരു HTML ഫയലിൽ ഡ്രാഗ്() ഫംഗ്‌ഷൻ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഇനിപ്പറയുന്ന സ്‌നിപ്പെറ്റ് കാണിക്കുന്നു:

എന്നെ വലിച്ചിടൂ

ഇതൊരു പരീക്ഷണമാണ്. പരിശോധിക്കുക, പരിശോധിക്കുക, പരിശോധിക്കുക.

ഇവിടെ ഏറ്റവും പ്രധാനപ്പെട്ട കാര്യം നെസ്റ്റഡ് എലമെന്റിലെ onmousedown ആട്രിബ്യൂട്ടാണ്. ഇത് this.parentNode പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക. ഇതിനർത്ഥം മുഴുവൻ കണ്ടെയ്നർ മൂലകവും നീങ്ങും എന്നാണ്.

ടെക്സ്റ്റ് ഇൻപുട്ട് ഇവന്റുകൾ

മൂന്ന് ലെഗസി കീബോർഡ് ഇൻപുട്ട് ഇവന്റുകൾ ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നു. കീഡൗൺ, കീഅപ്പ് ഇവന്റുകൾ താഴ്ന്ന തലത്തിലുള്ള ഇവന്റുകളാണ്, അവ അടുത്ത വിഭാഗത്തിൽ ചർച്ചചെയ്യും. എന്നിരുന്നാലും, കീപ്രസ് ഇവന്റ് ഒരു ഉയർന്ന തലത്തിലുള്ള ഇവന്റാണ്, അത് അച്ചടിക്കാവുന്ന ഒരു പ്രതീകം നൽകിയതായി റിപ്പോർട്ട് ചെയ്യുന്നു.

DOM ലെവൽ 3 ഇവന്റുകൾ ഡ്രാഫ്റ്റ് സ്പെസിഫിക്കേഷൻ, ടെക്സ്റ്റ് ഇൻപുട്ടിന്റെ പ്രതികരണമായി, അത് എങ്ങനെയാണ് നൽകിയത് എന്നത് പരിഗണിക്കാതെ, കൂടുതൽ പൊതുവായ ടെക്സ്റ്റ്ഇൻപുട്ട് ഇവന്റിനെ നിർവചിക്കുന്നു.

നിർദ്ദിഷ്ട ടെക്സ്റ്റ്ഇൻപുട്ട് ഇവന്റും നിലവിൽ നടപ്പിലാക്കിയ ടെക്സ്റ്റ്ഇൻപുട്ട് ഇവന്റും ഉപയോഗിച്ച്, നൽകിയ ടെക്സ്റ്റ് സംഭരിക്കുന്ന ഒരു ഡാറ്റ പ്രോപ്പർട്ടി ഉള്ള ഒരു ലളിതമായ ഇവന്റ് ഒബ്ജക്റ്റ് കടന്നുപോകുന്നു. (ഇൻപുട്ട് മെത്തേഡ് എന്ന സ്‌പെസിഫിക്കേഷൻ നിർദ്ദേശിച്ച മറ്റൊരു പ്രോപ്പർട്ടി, ഇൻപുട്ടിന്റെ ഉറവിടം വ്യക്തമാക്കണം, പക്ഷേ ഇതുവരെ നടപ്പിലാക്കിയിട്ടില്ല.) കീബോർഡ് ഇൻപുട്ടിനായി, ഡാറ്റ പ്രോപ്പർട്ടി സാധാരണയായി ഒരു പ്രതീകം ഉൾക്കൊള്ളും, എന്നാൽ മറ്റ് ഉറവിടങ്ങളിൽ നിന്നുള്ള ഇൻപുട്ടിന് അതിൽ നിരവധി പ്രതീകങ്ങൾ അടങ്ങിയിരിക്കാം. .

കീപ്രസ് ഇവന്റിനൊപ്പം പാസായ ഇവന്റ് ഒബ്‌ജക്റ്റിന് കൂടുതൽ സങ്കീർണ്ണമായ ഒരു ഓർഗനൈസേഷനുണ്ട്. കീപ്രസ് ഇവന്റ് ഒരു പ്രതീകത്തിന്റെ ഇൻപുട്ടിനെ പ്രതിനിധീകരിക്കുന്നു. ഈ പ്രതീകം ഇവന്റ് ഒബ്‌ജക്റ്റിൽ ഒരു സംഖ്യാ യൂണികോഡ് കോഡ് പോയിന്റ് മൂല്യമായി അടങ്ങിയിരിക്കുന്നു, ഇത് ഒരു സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുന്നതിന്, നിങ്ങൾ String.fromCharCode() രീതി ഉപയോഗിക്കണം. മിക്ക ബ്രൗസറുകളിലും, നൽകിയ പ്രതീകത്തിന്റെ കോഡ് പോയിന്റ് ഇവന്റ് ഒബ്‌ജക്റ്റിന്റെ കീകോഡ് പ്രോപ്പർട്ടിയിലാണ് സംഭരിച്ചിരിക്കുന്നത്. എന്നിരുന്നാലും, ചരിത്രപരമായ കാരണങ്ങളാൽ, പകരം ഫയർഫോക്സ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു ചാർകോഡ്.

മിക്ക ബ്രൗസറുകളിലും, പ്രിന്റ് ചെയ്യാവുന്ന ഒരു പ്രതീകം നൽകുമ്പോൾ മാത്രമേ കീപ്രസ് ഇവന്റ് പ്രവർത്തനക്ഷമമാകൂ. എന്നിരുന്നാലും, ഫയർഫോക്സിൽ, അച്ചടിക്കാത്ത പ്രതീകങ്ങൾക്കായി കീപ്രസ് ഇവന്റും ഉയർത്തുന്നു. ഈ രണ്ട് കേസുകളും തമ്മിൽ വേർതിരിച്ചറിയാൻ (പ്രിന്റ് ചെയ്യാനാകാത്ത പ്രതീകങ്ങൾ അവഗണിക്കുക), ഇവന്റ് ഒബ്‌ജക്റ്റിന്റെ ചാർകോഡ് പ്രോപ്പർട്ടി നിലവിലുണ്ടോ എന്നും അതിൽ മൂല്യം 0 അടങ്ങിയിട്ടുണ്ടോ എന്നും നിങ്ങൾക്ക് പരിശോധിക്കാം.

ഒരു പ്രതീകം നൽകുന്നത് തടയാൻ ടെക്സ്റ്റ് ഇൻപുട്ട്, ടെക്സ്റ്റ് ഇൻപുട്ട്, കീ അമർത്തൽ ഇവന്റുകൾ റദ്ദാക്കാവുന്നതാണ്. അതായത്, ഇൻപുട്ട് ഫിൽട്ടർ ചെയ്യാൻ ഈ ഇവന്റുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, സംഖ്യാ ഡാറ്റാ എൻട്രിക്കായി ഉദ്ദേശിച്ചിട്ടുള്ള ഒരു ഫീൽഡിൽ അക്ഷരമാല അക്ഷരങ്ങൾ പ്രവേശിക്കുന്നത് നിങ്ങൾക്ക് തടയാം.

താഴെയുള്ള ഉദാഹരണം ഇത്തരത്തിലുള്ള ഫിൽട്ടറിംഗ് നടപ്പിലാക്കുന്ന ഒരു JavaScript മൊഡ്യൂൾ കാണിക്കുന്നു. ഒരു അധിക (നിലവാരമില്ലാത്ത) ഡാറ്റ-അനുവദനീയമായ-ചാർസ് ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങൾക്കായി ഇത് തിരയുന്നു. കണ്ടെത്തിയ എല്ലാ ഘടകങ്ങൾക്കുമായി ടെക്‌സ്‌റ്റ്‌ഇൻപുട്ട്, ടെക്‌സ്‌റ്റ്ഇൻപുട്ട്, കീപ്രസ് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ എന്നിവ രജിസ്റ്റർ ചെയ്യുന്നു കൂടാതെ ഡാറ്റ-അനുവദനീയമായ ചാർസ് ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയിട്ടുള്ള റെഗുലർ എക്‌സ്‌പ്രഷൻ പ്രതീകങ്ങളിലേക്ക് ഇൻപുട്ട് പരിമിതപ്പെടുത്തുന്നു:

/* ഘടകങ്ങൾക്കുള്ള ഇൻപുട്ട് ഫിൽട്ടറിംഗ് "ഡാറ്റ-അനുവദനീയമായ-ചാർസ്" ആട്രിബ്യൂട്ട് ഉള്ള എല്ലാ ഘടകങ്ങളും ഈ മൊഡ്യൂൾ ഡോക്യുമെന്റിൽ കണ്ടെത്തുന്നു. ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയിരിക്കുന്ന പ്രതീകങ്ങൾ മാത്രം നൽകുന്നതിന് ഇൻപുട്ടിന് അനുവദിച്ചിരിക്കുന്ന പ്രതീകങ്ങളുടെ കൂട്ടത്തെ നിയന്ത്രിക്കുന്നതിന് ഈ ഘടകങ്ങൾക്കായി കീപ്രസ്, ടെക്സ്റ്റ്ഇൻപുട്ട്, ടെക്സ്റ്റ്ഇൻപുട്ട് ഇവന്റ് ഹാൻഡ്ലറുകൾ എന്നിവ രജിസ്റ്റർ ചെയ്യുന്നു. ഒരു ഘടകത്തിന് "data-messageid" ആട്രിബ്യൂട്ട് ഉണ്ടെങ്കിൽ, ആ ആട്രിബ്യൂട്ടിന്റെ മൂല്യം മറ്റൊരു പ്രമാണ ഘടകത്തിന്റെ ഐഡിയായി വ്യാഖ്യാനിക്കപ്പെടുന്നു. ഉപയോക്താവ് ഒരു അസാധുവായ പ്രതീകം നൽകിയാൽ, നിർദ്ദിഷ്ട ഐഡിയുള്ള ഘടകം ദൃശ്യമാകും. ഉപയോക്താവ് ഒരു സാധുവായ പ്രതീകം നൽകിയാൽ, സന്ദേശ ഘടകം മറച്ചിരിക്കും. ഈ സന്ദേശ ഘടകം ഉപയോക്താവിന്റെ ഇൻപുട്ട് നിരസിക്കപ്പെട്ടതിന്റെ വിശദീകരണം പ്രദർശിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. അതിന്റെ ഡിസൈൻ CSS ഉപയോഗിച്ച് നടപ്പിലാക്കണം, അങ്ങനെ അത് തുടക്കത്തിൽ അദൃശ്യമാണ്. */ whenReady(function () ( // പ്രമാണം ലോഡുചെയ്യുമ്പോൾ ഈ ഫംഗ്‌ഷൻ വിളിക്കുക // എല്ലാ ഘടകങ്ങളും കണ്ടെത്തുക var inputelts = document.getElementsByTagName("ഇൻപുട്ട്"); // അവയിലൂടെ ലൂപ്പ് ചെയ്യുക (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"; } });

ഈ മൊഡ്യൂൾ ഉപയോഗിച്ചുള്ള ഒരു സാമ്പിൾ HTML മാർക്ക്അപ്പ് ചുവടെ:

ദയവായി ഫോം പൂരിപ്പിക്കുക.

ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ പേര് അക്ഷരങ്ങൾ മാത്രം
ഫോൺ നമ്പറുകൾ മാത്രം
ഇമെയിൽ തെറ്റായ ഇമെയിൽ

ചുവടെയുള്ള ചിത്രം ഈ ഫോമിന്റെ ഉപയോഗം കാണിക്കുന്നു. ഇവിടെ, പേര് നൽകിയ ശേഷം, ഞാൻ ഒരു നമ്പർ ചേർത്തു, അത് യാന്ത്രികമായി തടയുകയും ഒരു മുന്നറിയിപ്പ് സന്ദേശം പ്രത്യക്ഷപ്പെടുകയും ചെയ്തു:

ഇൻപുട്ട് ഫോക്കസ് ഉള്ള ഡോക്യുമെന്റ് എലമെന്റിലേക്ക് പുതിയ ടെക്‌സ്‌റ്റ് ചേർക്കുന്നതിന് തൊട്ടുമുമ്പ് കീപ്രസ്, ടെക്‌സ്‌റ്റ്‌ഇൻപുട്ട് ഇവന്റുകൾ ഫയർ ചെയ്യപ്പെടും, അതിനാൽ ഈ ഇവന്റുകളുടെ ഹാൻഡ്‌ലർമാർക്ക് ഇവന്റ് റദ്ദാക്കുന്നതിലൂടെ ടെക്‌സ്‌റ്റ് ചേർക്കുന്നത് തടയാനാകും.

ബ്രൗസറുകൾ ഒരു ഇൻപുട്ട് ഇവന്റും നടപ്പിലാക്കുന്നു, അത് ഒരു ഘടകത്തിലേക്ക് വാചകം ചേർക്കുമ്പോൾ അത് ഫയർ ചെയ്യപ്പെടും. ഈ ഇവന്റ് റദ്ദാക്കാൻ കഴിയില്ല, കൂടാതെ അതിന്റെ അനുബന്ധ ഇവന്റ് ഒബ്‌ജക്റ്റിൽ ചേർത്ത വാചകത്തെക്കുറിച്ചുള്ള വിവരങ്ങൾ അടങ്ങിയിട്ടില്ല - മൂലകത്തിന്റെ വാചക ഉള്ളടക്കം മാറിയെന്ന് ഇത് അറിയിക്കുന്നു. ഉദാഹരണത്തിന്, വലിയക്ഷരങ്ങൾ മാത്രമേ നൽകിയിട്ടുള്ളൂവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ചുവടെ കാണിച്ചിരിക്കുന്നതുപോലെ നിങ്ങൾക്ക് ഒരു ഇൻപുട്ട് ഇവന്റ് ഹാൻഡ്‌ലർ നിർവചിക്കാം:

ഇൻപുട്ട് ഇവന്റ് HTML5 സ്പെസിഫിക്കേഷനിൽ സ്റ്റാൻഡേർഡ് ചെയ്തിരിക്കുന്നു കൂടാതെ IE ഒഴികെയുള്ള എല്ലാ ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു. ഒരു ഇഷ്‌ടാനുസൃത ഇവന്റ് ഉപയോഗിച്ച് ഒരു ടെക്‌സ്‌റ്റ് ഇൻപുട്ട് എലമെന്റിന്റെ മൂല്യ പ്രോപ്പർട്ടിയിലെ മാറ്റം കണ്ടെത്തുന്നതിലൂടെ IE-യിൽ സമാനമായ ഒരു പ്രഭാവം നേടാനാകും. സ്വത്ത് മാറ്റം.

കീബോർഡ് ഇവന്റുകൾ

ഉപയോക്താവ് കീബോർഡിൽ ഒരു കീ അമർത്തുകയോ റിലീസ് ചെയ്യുകയോ ചെയ്യുമ്പോൾ കീഡൗൺ, കീഅപ്പ് ഇവന്റുകൾ ഉയർത്തുന്നു. മോഡിഫയർ കീകൾ, ഫംഗ്‌ഷൻ കീകൾ, ആൽഫാന്യൂമെറിക് കീകൾ എന്നിവയ്‌ക്കായി അവ സൃഷ്‌ടിക്കപ്പെട്ടവയാണ്. യാന്ത്രിക-ആവർത്തന മോഡ് പ്രവർത്തനക്ഷമമാക്കുന്നതിന് ഉപയോക്താവ് ദീർഘനേരം ഒരു കീ അമർത്തിപ്പിടിച്ചാൽ, കീഅപ്പ് ഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ് നിരവധി കീഡൗൺ ഇവന്റുകൾ സൃഷ്ടിക്കപ്പെടും.

ഈ ഇവന്റുകൾക്ക് അനുയോജ്യമായ ഇവന്റ് ഒബ്‌ജക്റ്റിന് കീ അമർത്തിയ കീയെ തിരിച്ചറിയുന്ന ഒരു സംഖ്യാ മൂല്യമുള്ള ഒരു കീകോഡ് പ്രോപ്പർട്ടി ഉണ്ട്. അച്ചടിക്കാവുന്ന പ്രതീകങ്ങൾ സൃഷ്ടിക്കുന്ന കീകൾക്കായി, പൊതുവെ കീകോഡ് പ്രോപ്പർട്ടിയിൽ കീയിൽ ചിത്രീകരിച്ചിരിക്കുന്ന അടിസ്ഥാന പ്രതീകത്തിന് അനുയോജ്യമായ യൂണികോഡ് കോഡ് പോയിന്റ് അടങ്ങിയിരിക്കുന്നു. ഷിഫ്റ്റ് കീയുടെ അവസ്ഥ പരിഗണിക്കാതെ, അക്ഷര കീകൾ എല്ലായ്പ്പോഴും വലിയക്ഷരങ്ങൾക്കുള്ള കീകോഡ് മൂല്യങ്ങൾ സൃഷ്ടിക്കുന്നു, കാരണം അവ കീകളിൽ ചിത്രീകരിച്ചിരിക്കുന്ന പ്രതീകങ്ങളാണ്.

അതുപോലെ, വിരാമചിഹ്നങ്ങൾ നൽകുന്നതിന് നിങ്ങൾ Shift കീ അമർത്തിപ്പിടിച്ചാലും, സംഖ്യാ കീകൾ എല്ലായ്പ്പോഴും കീകളിൽ ചിത്രീകരിച്ചിരിക്കുന്ന സംഖ്യാ പ്രതീകങ്ങളുമായി പൊരുത്തപ്പെടുന്ന കീകോഡ് മൂല്യങ്ങൾ സൃഷ്ടിക്കുന്നു. അച്ചടിക്കാവുന്ന പ്രതീകങ്ങളുമായി പൊരുത്തപ്പെടാത്ത കീകൾക്ക്, കീകോഡ് പ്രോപ്പർട്ടിക്ക് മറ്റ് ചില മൂല്യങ്ങൾ ഉണ്ടായിരിക്കും. ഈ കീകോഡ് പ്രോപ്പർട്ടി മൂല്യങ്ങൾ ഒരിക്കലും സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല. എന്നിരുന്നാലും, പോർട്ടബിലിറ്റി കൈവരിക്കാൻ കഴിയാത്തത്ര ബ്രൗസറുകൾക്കിടയിൽ അവ വ്യത്യാസപ്പെട്ടില്ല.

മൗസ് ഇവന്റ് ഒബ്‌ജക്‌റ്റുകൾ പോലെ, കീബോർഡ് ഇവന്റ് ഒബ്‌ജക്‌റ്റുകൾക്കും altKey , ctrlKey , metaKey , ShiftKey പ്രോപ്പർട്ടികൾ ഉണ്ട്, ഇവന്റ് സംഭവിക്കുമ്പോൾ അനുബന്ധ മോഡിഫയർ കീ അമർത്തിപ്പിടിച്ചിരുന്നെങ്കിൽ അത് true ആയി വിലയിരുത്തുന്നു.

കീഡൗൺ, കീഅപ്പ് ഇവന്റുകൾ, കീകോഡ് പ്രോപ്പർട്ടി എന്നിവ ഒരു പതിറ്റാണ്ടിലേറെയായി ഉപയോഗത്തിലുണ്ടെങ്കിലും അവ ഒരിക്കലും സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല. DOM ലെവൽ 3 ഇവന്റ് ഡ്രാഫ്റ്റ് കീഡൗൺ, കീഅപ്പ് ഇവന്റ് തരങ്ങളെ സ്റ്റാൻഡേർഡ് ചെയ്യുന്നു, എന്നാൽ കീകോഡ് പ്രോപ്പർട്ടി സ്റ്റാൻഡേർഡ് ചെയ്യുന്നില്ല. പകരം, ഇത് ഒരു പുതിയ പ്രോപ്പർട്ടി, കീ നിർവചിക്കുന്നു, അതിൽ കീയുടെ പേര് ഒരു സ്ട്രിംഗ് ആയി അടങ്ങിയിരിക്കണം. ഒരു കീ അച്ചടിക്കാവുന്ന പ്രതീകവുമായി പൊരുത്തപ്പെടുന്നെങ്കിൽ, കീ പ്രോപ്പർട്ടിയിൽ ആ പ്രിന്റ് ചെയ്യാവുന്ന പ്രതീകം ഉണ്ടായിരിക്കണം. ഫംഗ്‌ഷൻ കീകൾക്കായി, കീ പ്രോപ്പർട്ടിയിൽ F2, ഹോം അല്ലെങ്കിൽ ലെഫ്റ്റ് പോലുള്ള മൂല്യങ്ങൾ അടങ്ങിയിരിക്കണം.

ഇത് എഴുതുന്ന സമയത്ത്, DOM ലെവൽ 3 ഇവന്റ് സ്റ്റാൻഡേർഡ് നിർവ്വചിച്ച പ്രധാന പ്രോപ്പർട്ടി ഇതുവരെ ഒരു ബ്രൗസറിലും നടപ്പിലാക്കിയിട്ടില്ല. എന്നിരുന്നാലും, വെബ്‌കിറ്റ് അധിഷ്‌ഠിത ബ്രൗസറുകൾ, സഫാരി, ക്രോം എന്നിവ ഈ ഇവന്റുകളുടെ ഒബ്‌ജക്റ്റുകളിൽ ഒരു പ്രോപ്പർട്ടി നിർവചിക്കുന്നു: കീ ഐഡന്റിഫയർ. കീ പ്രോപ്പർട്ടി പോലെ ഫംഗ്‌ഷൻ കീകൾക്കായി, കീ ഐഡന്റിഫയർ പ്രോപ്പർട്ടിയിൽ ഒരു സംഖ്യയല്ല, മറിച്ച് Shift അല്ലെങ്കിൽ Enter പോലുള്ള കീയുടെ പേരുള്ള ഒരു സ്ട്രിംഗ് അടങ്ങിയിരിക്കുന്നു. പ്രിന്റ് ചെയ്യാവുന്ന പ്രതീകങ്ങളുമായി ബന്ധപ്പെട്ട കീകൾക്കായി, ഈ പ്രോപ്പർട്ടിയിൽ പ്രതീകത്തിന്റെ യൂണികോഡ് കോഡ് പോയിന്റിന്റെ കുറച്ച് ഉപയോഗയോഗ്യമായ സ്ട്രിംഗ് പ്രാതിനിധ്യം അടങ്ങിയിരിക്കുന്നു. ഉദാഹരണത്തിന്, A കീ U+0041 എന്ന മൂല്യവുമായി പൊരുത്തപ്പെടുന്നു.

താഴെയുള്ള ഉദാഹരണം, കീ കോമ്പിനേഷനുകൾ അമർത്തിയാൽ പ്രതികരണമായി വിളിക്കപ്പെടുന്ന JavaScript ഫംഗ്‌ഷനുകളായ PageUp, Alt_Z, ctrl+alt+shift+F5 എന്നിവ പോലുള്ള കീ കോമ്പിനേഷൻ ഐഡന്റിഫയറുകൾ മാപ്പ് ചെയ്യുന്ന ഒരു കീമാപ്പ് ക്ലാസ് നിർവചിക്കുന്നു. കീ ബൈൻഡിംഗ് നിർവചനങ്ങൾ ഒരു JavaScript ഒബ്‌ജക്റ്റിന്റെ രൂപത്തിൽ കീമാപ്പ്() കൺസ്‌ട്രക്‌റ്ററിലേക്ക് കൈമാറുന്നു, അതിന്റെ പ്രോപ്പർട്ടി നാമങ്ങൾ കീ കോമ്പിനേഷൻ ഐഡന്റിഫയറുകളുമായി പൊരുത്തപ്പെടുന്നു, കൂടാതെ അതിന്റെ പ്രോപ്പർട്ടി മൂല്യങ്ങളിൽ ഹാൻഡ്‌ലർ ഫംഗ്‌ഷനുകളെക്കുറിച്ചുള്ള റഫറൻസുകൾ അടങ്ങിയിരിക്കുന്നു. ബൈൻഡിംഗുകൾ ചേർക്കുന്നതും നീക്കംചെയ്യുന്നതും ബൈൻഡ് (), അൺബൈൻഡ് () രീതികൾ ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

ഇൻസ്റ്റോൾ() രീതി ഉപയോഗിച്ച് കീമാപ്പ് ഒബ്‌ജക്റ്റ് ഒരു HTML എലമെന്റിലേക്ക് (സാധാരണയായി ഒരു ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റ്) ഇൻസ്റ്റോൾ ചെയ്യുന്നു. ഒരു കീമാപ്പ് ഒബ്‌ജക്റ്റ് സജ്ജീകരിക്കുമ്പോൾ, ഈ ഘടകത്തിൽ ഒരു കീഡൗൺ ഇവന്റ് ഹാൻഡ്‌ലർ രജിസ്റ്റർ ചെയ്യപ്പെടും. ഓരോ തവണയും ഒരു കീ അമർത്തുമ്പോൾ, ആ കോമ്പിനേഷനുമായി ബന്ധപ്പെട്ട ഒരു ഫംഗ്‌ഷൻ ഉണ്ടോ എന്ന് ഹാൻഡ്‌ലർ പരിശോധിക്കുന്നു. ഫംഗ്ഷൻ നിലവിലുണ്ടെങ്കിൽ, അതിനെ വിളിക്കുന്നു.

കീഡൗൺ ഇവന്റ് ഹാൻഡ്‌ലർ, DOM ലെവൽ 3 ഇവന്റ് സ്റ്റാൻഡേർഡ് നിർവചിച്ചിരിക്കുന്ന കീ പ്രോപ്പർട്ടി നിലവിലുണ്ടെങ്കിൽ അത് ഉപയോഗിക്കുന്നു. അല്ലെങ്കിൽ വെബ്‌കിറ്റ് കീ ഐഡന്റിഫയർ പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ ഇത് ശ്രമിക്കുന്നു. ഒരു ഫാൾബാക്ക് എന്ന നിലയിൽ, ഹാൻഡ്‌ലർ നിലവാരമില്ലാത്ത കീകോഡ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു:

// ഫംഗ്ഷൻ കൺസ്ട്രക്റ്റർ ഫംഗ്‌ഷൻ കീമാപ്പ് (ബൈൻഡിംഗുകൾ) ( this.map = (); // മാപ്പിംഗ് ഐഡന്റിഫയർ->ഹാൻഡ്‌ലർ (ബൈൻഡിംഗുകൾ) നിർവ്വചിക്കുക ( // പ്രാരംഭ ബൈൻഡിംഗ് മാപ്പ് അതിലേക്ക് പകർത്തുക (ബൈൻഡിംഗുകളിലെ പേര്) this.bind( പേര്, ബൈൻഡിംഗ്സ്); // നിർദ്ദിഷ്‌ട കീ ഐഡിയുടെ ബൈൻഡിംഗ് നീക്കം ചെയ്യുന്നു Keymap.prototype.unbind = ഫംഗ്‌ഷൻ(കീ) (ഇത്.മാപ്പ് ഇല്ലാതാക്കുക; ); // ഈ കീമാപ്പ് ഒബ്‌ജക്റ്റ് നിർദ്ദിഷ്ട HTML ഘടകത്തിലേക്ക് ഇൻസ്റ്റാൾ ചെയ്യുന്നു Keymap.prototype.install = ഫംഗ്‌ഷൻ(ഘടകം) ( var കീമാപ്പ് = ഇത്; // ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്‌ഷൻ ഫംഗ്‌ഷൻ ഹാൻഡ്‌ലർ (ഇവന്റ്) നിർവചിക്കുക (റിട്ടേൺ keymap.dispatch(event, element); ) // (element.addEventListener) എലെമെന്റ്.addEventListener ("കീഡൌൺ", ഹാൻഡ്‌ലർ, തെറ്റ്) ആണെങ്കിൽ അത് സജ്ജമാക്കുക; // ഈ രീതി കീബോർഡ് ഇവന്റ് കൈകാര്യം ചെയ്യൽ നിയോഗിക്കുന്നു, ബൈൻഡിംഗുകളെ ആശ്രയിക്കുന്നു Keymap.prototype.dispatch = ഫംഗ്‌ഷൻ (ഇവന്റ്, ഘടകം) ( // തുടക്കത്തിൽ മോഡിഫയർ കീ പേരുകളോ കീ നാമമോ var മോഡിഫയറുകളോ ഇല്ല = ""; var കീനാമം = null; / / // ചെറിയക്ഷരങ്ങളിൽ നിന്ന് കാനോനിക്കൽ രൂപത്തിൽ മോഡിഫയർ സ്ട്രിംഗുകൾ നിർമ്മിക്കുക, അവയെ അക്ഷരമാലാക്രമത്തിൽ ക്രമീകരിച്ചുകൊണ്ട് മോഡിഫയറുകൾ += "meta_"; എങ്കിൽ (event.shiftKey) മോഡിഫയറുകൾ += "shift_"; // DOM ലെവൽ 3 സ്റ്റാൻഡേർഡ് നിർവചിച്ചിരിക്കുന്ന കീ പ്രോപ്പർട്ടി // നടപ്പിലാക്കിയാൽ കീ പേര് എളുപ്പത്തിൽ ലഭിക്കും: if (event.key ) keyname = event.key; // Safari, Chrome എന്നിവയിൽ ഫംഗ്‌ഷൻ കീ പേരുകൾ ലഭിക്കുന്നതിന്, നിങ്ങൾക്ക് // കീ ഐഡന്റിഫയർ പ്രോപ്പർട്ടി ഉപയോഗിക്കാവുന്നതാണ്. ) കീനാമം = ഇവന്റ് കീ ഐഡന്റിഫയർ; // കീ പേര് നിർണ്ണയിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, ഇവന്റ് അവഗണിക്കുക // തുടർന്ന് നിയന്ത്രണം തിരികെ നൽകുക. എങ്കിൽ (! കീനാമം) തിരികെ; // കാനോനിക്കൽ കീ ഐഡന്റിഫയറിൽ മോഡിഫയർ പേരുകൾ // കൂടാതെ ചെറിയക്ഷര കീ നാമം var keyid = മോഡിഫയറുകൾ + keyname.toLowerCase(); // നൽകിയിരിക്കുന്ന കീ ഐഡി var ഹാൻഡ്‌ലറിന് ഒരു ബൈൻഡിംഗ് ഉണ്ടോ എന്ന് പരിശോധിക്കുക = this.map; എങ്കിൽ (ഹാൻഡ്‌ലർ) ( // നൽകിയിരിക്കുന്ന കീയ്‌ക്ക് വേണ്ടിയാണ് ഹാൻഡ്‌ലർ എങ്കിൽ, അതിനെ വിളിക്കുക // ഹാൻഡ്‌ലർ ഫംഗ്‌ഷൻ വിളിക്കുക var retval = Handler.call(ഘടകം, ഇവന്റ്, കീയിഡ്); // ഹാൻഡ്‌ലർ തെറ്റായി നൽകിയാൽ, സ്ഥിരസ്ഥിതി റദ്ദാക്കുക / / കൂടാതെ ബബ്ലിംഗ് ഇവന്റുകൾ നിർത്തലാക്കുക (retval === false) എങ്കിൽ ((event.stopPropagation) event.stopPropagation(); // DOM model else. event.cancelBubble = true; // IE model if (event.preventDefault) event.preventDefault (); / / DOM else event.returnValue = തെറ്റ്; // IE ) // ഹാൻഡ്‌ലറിൽ നിന്ന് ലഭിച്ച മൂല്യം തിരികെ നൽകുക;) ); // കീ ഐഡന്റിഫയറിനെ കാനോനിക്കൽ രൂപത്തിലേക്ക് പരിവർത്തനം ചെയ്യുന്നതിനുള്ള സഹായ പ്രവർത്തനം. //മെറ്റാ-സി ഐഡന്റിഫയർ മാക്കുകളിൽ "കമാൻഡ്-സി" ആയും മറ്റെല്ലാവരിലും "Ctrl-C" ആയും മാറ്റാൻ "മെറ്റാ" ഐഡന്റിഫയറിനെ "ctrl" ആക്കി മാറ്റേണ്ടതുണ്ട്. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // ചെറിയക്ഷരത്തിന് var വാക്കുകൾ = keyid.split(/\s+|[\-+_]/); // മോഡിഫയറുകൾ തിരഞ്ഞെടുക്കുക var കീനാമം = വാക്കുകൾ . pop(); // കീനാമം ആണ് അവസാന വാക്ക് കീനാമം = Keymap.aliases || കീനാമം; // ഇതൊരു അപരനാമമാണോ? words.sort(); // സോർട്ട് മോഡിഫയറുകൾ word.push(keyname); // നോർമലൈസ് ചെയ്തവ തിരികെ വയ്ക്കുക പേര് റിട്ടേൺ വാക്കുകൾ .join("_"); // എല്ലാം ഒരുമിച്ച് ലയിപ്പിക്കുക ) Keymap.aliases = ( // മാപ്പ് പൊതുവായ കീ അപരനാമങ്ങൾ അവരുടെ // "ഔദ്യോഗിക" പേരുകൾ DOM ലെവൽ 3-ൽ ഉപയോഗിച്ചിരിക്കുന്നു, കൂടാതെ പേരുകൾക്ക് മാപ്പ് കീകോഡുകൾ // താഴെ. പേരും മൂല്യവും "എസ്‌കേപ്പ്":"എസ്‌സി", "റിട്ടേൺ":"എന്റർ", "ഇല്ലാതാക്കുക":"ഡെൽ", "ctrl":"നിയന്ത്രണം", "സ്‌പേസ്":"സ്‌പേസ്‌ബാർ ചെറിയക്ഷരങ്ങൾ മാത്രം ഉൾക്കൊള്ളണം. ", "ins":"തിരുകുക" ); // കീഡൗൺ ഇവന്റ് ഒബ്‌ജക്റ്റിന്റെ പഴയ കീകോഡ് പ്രോപ്പർട്ടി സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല // എന്നാൽ ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ മിക്ക ബ്രൗസറുകളിലും ഒഎസുകളിലും വിജയകരമായി ഉപയോഗിക്കാനാകും. Keymap.keyCodeToKeyName = ( // വാക്കുകളോ അമ്പുകളോ ഉള്ള കീകൾ 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"താൽക്കാലികമായി നിർത്തുക", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 34:"PageDown", 35:"End", 36:"Home", 37: "ഇടത്", 38:"മുകളിലേക്ക്", 39:"വലത്", 40:"താഴേക്ക്", 45:"തിരുകുക", 46:"ഡെൽ", // പ്രധാന കീബോർഡിലെ നമ്പർ കീകൾ (അധികമായതിൽ അല്ല) 48 :"0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // ലെറ്റർ കീകൾ. // വലിയ അക്ഷരങ്ങളും ചെറിയ അക്ഷരങ്ങളും തമ്മിൽ യാതൊരു വ്യത്യാസവുമില്ല എന്നത് ശ്രദ്ധിക്കുക 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", // സെക്കന്ററി കീബോർഡിലെ നമ്പർ കീകളും വിരാമചിഹ്നങ്ങളുള്ള കീകളും. // (ഓപ്പറയിൽ പിന്തുണയില്ല.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103 :"7" ,104:"8", 105:"9",106:"ഗുണിക്കുക", 107:"ചേർക്കുക", 109:"കുറയ്ക്കുക", 110:"ദശാംശം", 111:"വിഭജിക്കുക", // പ്രവർത്തനം കീകൾ 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", // വിരാമചിഹ്നങ്ങളുള്ള കീകൾ മാർക്ക്, ആവശ്യമില്ലാത്ത ഇൻപുട്ടിനായി // Shift കീ അമർത്തിപ്പിടിക്കുക. // ഹൈഫൻ പോർട്ടബിൾ രീതിയിൽ ഉപയോഗിക്കാൻ കഴിയില്ല: FF റിട്ടേൺസ് // സബ്‌ട്രാക്റ്റ് കീ 59:";", 61:"=", 186:";", 187:"=", // Firefox, Opera റിട്ടേൺസ് 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """ );

കീമാപ്പ് ഒബ്ജക്റ്റ് ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ:

Window.onload = ഫംഗ്‌ഷൻ() ( var കീമാപ്പ് = പുതിയ കീമാപ്പ്; // ഒരു പുതിയ കീമാപ്പ് ഒബ്‌ജക്റ്റ് കീമാപ്പ് സൃഷ്‌ടിക്കുക.bind("ctrl+a", // കോമ്പിനേഷൻ Ctrl+A ഫംഗ്‌ഷൻ(ഇവന്റ്, കീയിഡ്) (അലേർട്ട്("നിങ്ങൾ അമർത്തി: " + keyid) )); // മറ്റൊരു ബൈൻഡിംഗ് Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( അലർട്ട്("നിങ്ങൾ അമർത്തി: " + keyid) )); keymap.install(document. ബോഡി); // മുഴുവൻ പ്രമാണത്തിനും കീമാപ്പ് ഒബ്ജക്റ്റ് സജ്ജമാക്കുക );

നിങ്ങൾ പ്രോഗ്രാമിംഗ് ചെയ്യുന്ന സിസ്റ്റത്തിൽ സംഭവിക്കുന്ന പ്രവർത്തനങ്ങളോ സംഭവങ്ങളോ ആണ് ഇവന്റുകൾ, അത് സിസ്റ്റം നിങ്ങളോട് പറയുന്നു, അതിനാൽ നിങ്ങൾക്ക് വേണമെങ്കിൽ ഏതെങ്കിലും വിധത്തിൽ അവയോട് പ്രതികരിക്കാനാകും. ഉദാഹരണത്തിന്, ഉപയോക്താവ് ഒരു വെബ്‌പേജിലെ ഒരു ബട്ടണിൽ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, ഒരു വിവര ബോക്സ് പ്രദർശിപ്പിച്ചുകൊണ്ട് ആ പ്രവർത്തനത്തോട് പ്രതികരിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഈ ലേഖനത്തിൽ, ഇവന്റുകളെ ചുറ്റിപ്പറ്റിയുള്ള ചില പ്രധാന ആശയങ്ങൾ ഞങ്ങൾ ചർച്ചചെയ്യുന്നു, അവ ബ്രൗസറുകളിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നോക്കുക. ഇതൊരു സമഗ്രമായ പഠനമായിരിക്കില്ല; ഈ ഘട്ടത്തിൽ നിങ്ങൾ അറിയേണ്ട കാര്യങ്ങൾ മാത്രം.

മുൻവ്യവസ്ഥകൾ: ലക്ഷ്യം:

അടിസ്ഥാന കമ്പ്യൂട്ടർ സാക്ഷരത, HTML, CSS എന്നിവയുടെ അടിസ്ഥാന ധാരണ, JavaScript ആദ്യ ഘട്ടങ്ങൾ.

ഇവന്റുകളുടെ അടിസ്ഥാന സിദ്ധാന്തം മനസ്സിലാക്കാൻ, അവ ബ്രൗസറുകളിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നു, വ്യത്യസ്ത പ്രോഗ്രാമിംഗ് പരിതസ്ഥിതികളിൽ ഇവന്റുകൾ എങ്ങനെ വ്യത്യാസപ്പെട്ടേക്കാം.

ഭാഗ്യകരമായ സംഭവങ്ങളുടെ ഒരു പരമ്പര

മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, ഇവന്റുകൾ നിങ്ങൾ പ്രോഗ്രാമിംഗ് ചെയ്യുന്ന സിസ്റ്റത്തിൽ സംഭവിക്കുന്ന പ്രവർത്തനങ്ങളോ സംഭവങ്ങളോ ആണ് - ഒരു ഇവന്റ് സംഭവിക്കുമ്പോൾ സിസ്റ്റം ഏതെങ്കിലും തരത്തിലുള്ള ഒരു സിഗ്നൽ ഉൽപ്പാദിപ്പിക്കുന്നു (അല്ലെങ്കിൽ "തീ"), കൂടാതെ ചില തരത്തിലുള്ള പ്രവർത്തനങ്ങൾ നടത്താൻ കഴിയുന്ന ഒരു സംവിധാനവും നൽകുന്നു. ഇവന്റ് സംഭവിക്കുമ്പോൾ സ്വയമേവ എടുക്കും (അതായത്, ചില കോഡ് പ്രവർത്തിക്കുന്നു). ഉദാഹരണത്തിന് ഒരു വിമാനത്താവളത്തിൽ, ഒരു വിമാനം പറന്നുയരാൻ റൺവേ വ്യക്തമായിരിക്കുമ്പോൾ, ഒരു സിഗ്നൽ പൈലറ്റിനെ അറിയിക്കുന്നു, അതിന്റെ ഫലമായി അവർ വിമാനം പൈലറ്റ് ചെയ്യാൻ തുടങ്ങുന്നു.

വെബിന്റെ കാര്യത്തിൽ, ഇവന്റുകൾ ബ്രൗസർ വിൻഡോയ്ക്കുള്ളിൽ ഫയർ ചെയ്യപ്പെടുന്നു, അതിൽ അടങ്ങിയിരിക്കുന്ന ഒരു പ്രത്യേക ഇനത്തിലേക്ക് അറ്റാച്ചുചെയ്യാൻ പ്രവണത കാണിക്കുന്നു - ഇത് ഒരൊറ്റ ഘടകം, ഘടകങ്ങളുടെ കൂട്ടം, നിലവിലെ ടാബിൽ ലോഡുചെയ്‌ത HTML പ്രമാണം അല്ലെങ്കിൽ മുഴുവൻ ബ്രൗസർ വിൻഡോ. സംഭവിക്കാവുന്ന നിരവധി വ്യത്യസ്ത തരത്തിലുള്ള ഇവന്റുകൾ ഉണ്ട്, ഉദാഹരണത്തിന്:

• ഉപയോക്താവ് ഒരു നിശ്ചിത ഘടകത്തിന് മുകളിൽ മൗസിൽ ക്ലിക്ക് ചെയ്യുകയോ ഒരു നിശ്ചിത ഘടകത്തിന് മുകളിൽ കഴ്‌സർ ഹോവർ ചെയ്യുകയോ ചെയ്യുന്നു.
• ഉപയോക്താവ് കീബോർഡിൽ ഒരു കീ അമർത്തുന്നു.
• ഉപയോക്താവ് ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുകയോ അടയ്ക്കുകയോ ചെയ്യുന്നു.
• ഒരു ഫോം സമർപ്പിക്കുന്നു.
• ഒരു വീഡിയോ പ്ലേ ചെയ്യുന്നു, അല്ലെങ്കിൽ താൽക്കാലികമായി നിർത്തി, അല്ലെങ്കിൽ പ്ലേ പൂർത്തിയാക്കുന്നു.
• ഒരു പിശക് സംഭവിക്കുന്നു.

നിങ്ങൾക്ക് ഇതിൽ നിന്ന് (എംഡിഎൻ ഇവന്റ് റഫറൻസിൽ നിന്ന്) പ്രതികരിക്കാൻ കഴിയുന്ന ധാരാളം ഇവന്റുകൾ ഉണ്ടെന്ന് ശേഖരിക്കാനാകും.

ലഭ്യമായ ഓരോ ഇവന്റിനും ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ഉണ്ട്, അത് കോഡിന്റെ ഒരു ബ്ലോക്കാണ് (സാധാരണയായി ഒരു പ്രോഗ്രാമർ എന്ന നിലയിൽ നിങ്ങൾ സൃഷ്ടിക്കുന്ന ഒരു JavaScript ഫംഗ്‌ഷൻ) അത് ഇവന്റ് ഫയർ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കും. ഒരു ഇവന്റ് ഫയറിംഗിന്റെ പ്രതികരണമായി പ്രവർത്തിക്കാൻ അത്തരം ഒരു ബ്ലോക്ക് കോഡ് നിർവ്വചിക്കുമ്പോൾ, ഞങ്ങൾ ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ രജിസ്റ്റർ ചെയ്യുകയാണെന്ന് പറയുന്നു. ഇവന്റ് കൈകാര്യം ചെയ്യുന്നവരെ ചിലപ്പോൾ ഇവന്റ് ശ്രോതാക്കൾ എന്ന് വിളിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക - അവ നമ്മുടെ ആവശ്യങ്ങൾക്കായി പരസ്പരം മാറ്റാവുന്നവയാണ്, കർശനമായി പറഞ്ഞാൽ, അവർ ഒരുമിച്ച് പ്രവർത്തിക്കുന്നു. ശ്രോതാവ് ഇവന്റ് സംഭവിക്കുന്നത് ശ്രദ്ധിക്കുന്നു, അത് സംഭവിക്കുന്നതിനോട് പ്രതികരിക്കുന്ന കോഡാണ് ഹാൻഡ്‌ലർ.

ശ്രദ്ധിക്കുക: വെബ് ഇവന്റുകൾ പ്രധാന JavaScript ഭാഷയുടെ ഭാഗമല്ല - അവ ബ്രൗസറിൽ നിർമ്മിച്ച API-കളുടെ ഭാഗമായി നിർവചിച്ചിരിക്കുന്നു.

ഒരു ലളിതമായ ഉദാഹരണം

ഞങ്ങൾ ഇവിടെ എന്താണ് ഉദ്ദേശിക്കുന്നതെന്ന് വിശദീകരിക്കാൻ ഒരു ലളിതമായ ഉദാഹരണം നോക്കാം. ഈ കോഴ്‌സിലെ പല ഉദാഹരണങ്ങളിലും നിങ്ങൾ ഇതിനകം തന്നെ ഇവന്റുകളും ഇവന്റ് ഹാൻഡ്‌ലറുകളും ഉപയോഗിച്ചിരിക്കുന്നത് കണ്ടിട്ടുണ്ട്, എന്നാൽ നമ്മുടെ അറിവ് ഉറപ്പിക്കാൻ നമുക്ക് വീണ്ടും നോക്കാം. ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഞങ്ങൾക്ക് ഒരു സിംഗിൾ , അമർത്തുമ്പോൾ, പശ്ചാത്തലം ക്രമരഹിതമായ നിറത്തിലേക്ക് മാറ്റുന്നു:

നിറം മാറ്റുക

ബട്ടൺ (മാർജിൻ: 10px );

JavaScript ഇതുപോലെ കാണപ്പെടുന്നു:

കോൺസ്റ്റ് btn = document.querySelector("ബട്ടൺ"); ഫംഗ്‌ഷൻ റാൻഡം(നമ്പർ) (റിട്ടേൺ Math.floor(Math.random() * (number+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + ")"; document.body.style.backgroundColor = rndCol; )

ഈ കോഡിൽ, Document.querySelector() ഫംഗ്‌ഷൻ ഉപയോഗിച്ച് ഞങ്ങൾ btn എന്ന സ്ഥിരാങ്കത്തിനുള്ളിൽ ബട്ടണിലേക്കുള്ള ഒരു റഫറൻസ് സംഭരിക്കുന്നു. റാൻഡം നമ്പർ നൽകുന്ന ഒരു ഫംഗ്‌ഷനും ഞങ്ങൾ നിർവ്വചിക്കുന്നു. കോഡിന്റെ മൂന്നാം ഭാഗം ഇവന്റ് ഹാൻഡ്‌ലറാണ്. btn സ്ഥിരാങ്കം ഒരു ഘടകത്തിലേക്ക് ചൂണ്ടിക്കാണിക്കുന്നു, ഈ തരത്തിലുള്ള ഒബ്‌ജക്റ്റിന് അതിൽ തീപിടിക്കാൻ കഴിയുന്ന നിരവധി ഇവന്റുകൾ ഉണ്ട്, അതിനാൽ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ലഭ്യമാണ്. റാൻഡം RGB വർണ്ണം സൃഷ്ടിക്കുകയും അതിന് തുല്യമായ പശ്ചാത്തല വർണ്ണം സജ്ജീകരിക്കുകയും ചെയ്യുന്ന കോഡ് അടങ്ങുന്ന ഒരു അജ്ഞാത ഫംഗ്‌ഷന് തുല്യമായി ഓൺക്ലിക്ക് ഇവന്റ് ഹാൻഡ്‌ലർ പ്രോപ്പർട്ടി സജ്ജീകരിക്കുന്നതിലൂടെ ഞങ്ങൾ ക്ലിക്ക് ഇവന്റ് ഫയറിങ്ങിനായി ശ്രദ്ധിക്കുന്നു.

ക്ലിക്ക് ഇവന്റ് മൂലകത്തിൽ വെടിയുതിർക്കുമ്പോഴെല്ലാം, അതായത്, ഒരു ഉപയോക്താവ് അതിൽ ക്ലിക്കുചെയ്യുമ്പോഴെല്ലാം ഈ കോഡ് പ്രവർത്തിക്കുന്നു.

ഉദാഹരണ ഔട്ട്പുട്ട് ഇപ്രകാരമാണ്:

ഇത് വെബ് പേജുകൾ മാത്രമല്ല

ഈ അവസരത്തിൽ എടുത്തുപറയേണ്ട മറ്റൊരു കാര്യം, ഇവന്റുകൾ ജാവാസ്ക്രിപ്റ്റിന് മാത്രമുള്ളതല്ല എന്നതാണ് - മിക്ക പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കും ഏതെങ്കിലും തരത്തിലുള്ള ഇവന്റ് മാതൃകയുണ്ട്, കൂടാതെ മോഡൽ പ്രവർത്തിക്കുന്ന രീതി പലപ്പോഴും ജാവാസ്ക്രിപ്റ്റിന്റെ രീതിയിൽ നിന്ന് വ്യത്യസ്തമാണ്. വാസ്തവത്തിൽ, ജാവാസ്ക്രിപ്റ്റിലെ ഇവന്റ് മോഡൽ മറ്റ് പരിതസ്ഥിതികളിൽ ഉപയോഗിക്കുന്നതിനാൽ വെബ് പേജുകൾക്ക് JavaScript-നുള്ള ഇവന്റ് മോഡലിൽ നിന്ന് വ്യത്യസ്തമാണ്.

ഇൻലൈൻ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ - ഇവ ഉപയോഗിക്കരുത്

നിങ്ങളുടെ കോഡിൽ ഇതുപോലുള്ള ഒരു പാറ്റേണും നിങ്ങൾ കണ്ടേക്കാം:

bgChange() എന്ന പ്രവർത്തനം അമർത്തുക ( const rndCol = "rgb(" + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + ")"; document.body.style.backgroundColor = rndCol;)

വെബിൽ കണ്ടെത്തിയ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ രജിസ്റ്റർ ചെയ്യുന്നതിനുള്ള ആദ്യ രീതി, മുകളിൽ കാണിച്ചിരിക്കുന്നതുപോലുള്ള ഇവന്റ് ഹാൻഡ്‌ലർ HTML ആട്രിബ്യൂട്ടുകൾ (അല്ലെങ്കിൽ ഇൻലൈൻ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ) ഉൾക്കൊള്ളുന്നു - ആട്രിബ്യൂട്ട് മൂല്യം ഇവന്റ് സംഭവിക്കുമ്പോൾ നിങ്ങൾ പ്രവർത്തിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന JavaScript കോഡാണ്. മുകളിലെ ഉദാഹരണം, അതേ പേജിലെ ഒരു ഘടകത്തിനുള്ളിൽ നിർവചിച്ചിരിക്കുന്ന ഒരു ഫംഗ്‌ഷൻ ആവശ്യപ്പെടുന്നു, എന്നാൽ നിങ്ങൾക്ക് ആട്രിബ്യൂട്ടിനുള്ളിൽ നേരിട്ട് JavaScript ചേർക്കാനും കഴിയും, ഉദാഹരണത്തിന്:

എന്നെ അമർത്തുക

ഇവന്റ് ഹാൻഡ്‌ലർ പ്രോപ്പർട്ടികൾക്കായി നിങ്ങൾക്ക് HTML ആട്രിബ്യൂട്ട് തത്തുല്യമായവ കണ്ടെത്താനാകും; എന്നിരുന്നാലും, നിങ്ങൾ ഇവ ഉപയോഗിക്കരുത് - അവ മോശം ശീലമായി കണക്കാക്കപ്പെടുന്നു. നിങ്ങൾ വളരെ വേഗത്തിൽ എന്തെങ്കിലും ചെയ്യുന്നുണ്ടെങ്കിൽ ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് എളുപ്പമാണെന്ന് തോന്നിയേക്കാം, പക്ഷേ അവ വളരെ വേഗത്തിൽ നിയന്ത്രിക്കാനാകാത്തതും ഫലപ്രദമല്ലാത്തതുമായിത്തീരുന്നു.

ഒരു തുടക്കത്തിന്, നിങ്ങളുടെ HTML ഉം JavaScript ഉം ഇടകലർത്തുന്നത് നല്ല ആശയമല്ല, കാരണം അത് പാഴ്‌സ് ചെയ്യാൻ പ്രയാസമാണ് - നിങ്ങളുടെ JavaScript എല്ലാം ഒരിടത്ത് സൂക്ഷിക്കുന്നതാണ് നല്ലത്; ഇത് ഒരു പ്രത്യേക ഫയലിലാണെങ്കിൽ നിങ്ങൾക്ക് അത് ഒന്നിലധികം HTML പ്രമാണങ്ങളിൽ പ്രയോഗിക്കാവുന്നതാണ്.

ഒരൊറ്റ ഫയലിൽ പോലും, ഇൻലൈൻ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ നല്ല ആശയമല്ല. ഒരു ബട്ടൺ ശരിയാണ്, എന്നാൽ നിങ്ങൾക്ക് 100 ബട്ടണുകൾ ഉണ്ടെങ്കിൽ എന്തുചെയ്യും? നിങ്ങൾ ഫയലിലേക്ക് 100 ആട്രിബ്യൂട്ടുകൾ ചേർക്കേണ്ടതുണ്ട്; അത് വളരെ വേഗത്തിൽ ഒരു അറ്റകുറ്റപ്പണിയായി മാറും. ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച്, പേജിലെ എല്ലാ ബട്ടണുകളിലേക്കും ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്‌ഷൻ ചേർക്കാൻ നിങ്ങൾക്ക് എളുപ്പത്തിൽ പേടിസ്വപ്നം കാണാൻ കഴിയും. ഈ:

കോൺസ്റ്റ് ബട്ടണുകൾ = document.querySelectorAll("ബട്ടൺ"); വേണ്ടി (ഞാൻ = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

ശ്രദ്ധിക്കുക: നിങ്ങളുടെ ഉള്ളടക്കത്തിൽ നിന്ന് പ്രോഗ്രാമിംഗ് ലോജിക് വേർതിരിക്കുന്നത് നിങ്ങളുടെ സൈറ്റിനെ സെർച്ച് എഞ്ചിനുകൾക്ക് കൂടുതൽ സൗഹൃദമാക്കുന്നു.

addEventListener() and removeEventListener()

ഇവന്റ് മെക്കാനിസത്തിന്റെ ഏറ്റവും പുതിയ തരം ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റ് മോഡൽ (DOM) ലെവൽ 2 ഇവന്റ് സ്‌പെസിഫിക്കേഷനിൽ നിർവചിച്ചിരിക്കുന്നു, ഇത് ബ്രൗസറുകൾക്ക് ഒരു പുതിയ ഫംഗ്‌ഷൻ നൽകുന്നു - addEventListener() . ഇവന്റ് ഹാൻഡ്‌ലർ പ്രോപ്പർട്ടികൾക്ക് സമാനമായ രീതിയിൽ ഇത് പ്രവർത്തിക്കുന്നു, പക്ഷേ വാക്യഘടന വ്യത്യസ്തമാണ്. ഞങ്ങളുടെ ക്രമരഹിതമായ വർണ്ണ ഉദാഹരണം ഇതുപോലെ വീണ്ടും എഴുതാം:

കോൺസ്റ്റ് btn = document.querySelector("ബട്ടൺ"); ഫംഗ്ഷൻ bgChange() ( const rndCol = "rgb(" + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("ക്ലിക്ക്", bgChange);

addEventListener() ഫംഗ്‌ഷനിൽ, ഞങ്ങൾ രണ്ട് പാരാമീറ്ററുകൾ വ്യക്തമാക്കുന്നു - ഈ ഹാൻഡ്‌ലർ രജിസ്റ്റർ ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്ന ഇവന്റിന്റെ പേരും അതിനുള്ള പ്രതികരണമായി ഞങ്ങൾ പ്രവർത്തിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ഹാൻഡ്‌ലർ ഫംഗ്‌ഷൻ ഉൾക്കൊള്ളുന്ന കോഡും. addEventListener() ഫംഗ്‌ഷനിൽ എല്ലാ കോഡുകളും ഇതുപോലെ ഒരു അജ്ഞാത ഫംഗ്‌ഷനിൽ ഇടുന്നത് തികച്ചും ഉചിതമാണെന്ന കാര്യം ശ്രദ്ധിക്കുക:

Btn.addEventListener("ക്ലിക്ക്", ഫംഗ്‌ഷൻ() ( var rndCol = "rgb(" + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + ")"; document.body .style.backgroundColor = rndCol;));

നേരത്തെ ചർച്ച ചെയ്ത പഴയ സംവിധാനങ്ങളെ അപേക്ഷിച്ച് ഈ സംവിധാനത്തിന് ചില ഗുണങ്ങളുണ്ട്. ഒരു തുടക്കത്തിനായി, ഒരു കൗണ്ടർപാർട്ട് ഫംഗ്‌ഷൻ ഉണ്ട്, removeEventListener() , അത് മുമ്പ് ചേർത്ത ശ്രോതാവിനെ നീക്കംചെയ്യുന്നു. ഉദാഹരണത്തിന്, ഇത് ഈ വിഭാഗത്തിലെ ആദ്യ കോഡ് ബ്ലോക്കിലെ ലിസണർ സെറ്റ് നീക്കം ചെയ്യും:

Btn.removeEventListener("ക്ലിക്ക്", bgChange);

ലളിതവും ചെറുതുമായ പ്രോഗ്രാമുകൾക്ക് ഇത് പ്രാധാന്യമർഹിക്കുന്നില്ല, എന്നാൽ വലുതും സങ്കീർണ്ണവുമായ പ്രോഗ്രാമുകൾക്ക് പഴയ ഉപയോഗിക്കാത്ത ഇവന്റ് ഹാൻഡ്‌ലറുകൾ വൃത്തിയാക്കുന്നതിനുള്ള കാര്യക്ഷമത മെച്ചപ്പെടുത്താൻ കഴിയും. കൂടാതെ, ഉദാഹരണത്തിന്, വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ വ്യത്യസ്ത പ്രവർത്തനങ്ങൾ ചെയ്യുന്ന ഒരേ ബട്ടൺ ഉണ്ടായിരിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു - ഉചിതമായ രീതിയിൽ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ആണ് നിങ്ങൾ ചെയ്യേണ്ടത്.

രണ്ടാമതായി, ഒരേ ശ്രോതാവിനായി നിങ്ങൾക്ക് ഒന്നിലധികം ഹാൻഡ്‌ലറുകൾ രജിസ്റ്റർ ചെയ്യാനും കഴിയും. ഇനിപ്പറയുന്ന രണ്ട് ഹാൻഡ്‌ലറുകൾ രണ്ടും പ്രയോഗിക്കില്ല:

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

രണ്ടാമത്തെ വരി ആദ്യ വരിയിൽ സജ്ജമാക്കിയ ഓൺക്ലിക്കിന്റെ മൂല്യം പുനരാലേഖനം ചെയ്യുന്നു. ഇത് പ്രവർത്തിക്കും, എന്നിരുന്നാലും:

MyElement.addEventListener("ക്ലിക്ക്", ഫങ്ഷൻഎ); myElement.addEventListener("ക്ലിക്ക്", ഫങ്ഷൻബി);

ഘടകം ക്ലിക്ക് ചെയ്യുമ്പോൾ രണ്ട് ഫംഗ്ഷനുകളും ഇപ്പോൾ പ്രവർത്തിക്കും.

ഇതുകൂടാതെ, ഈ ഇവന്റ് മെക്കാനിസത്തിൽ മറ്റ് ശക്തമായ സവിശേഷതകളും ഓപ്ഷനുകളും ലഭ്യമാണ്. ഇവ ഈ ലേഖനത്തിന്റെ പരിധിക്ക് പുറത്താണ്, എന്നാൽ നിങ്ങൾക്ക് അവ വായിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, addEventListener() ഉം removeEventListener() റഫറൻസ് പേജുകളും നോക്കുക.

ഞാൻ എന്ത് മെക്കാനിസം ഉപയോഗിക്കണം?

മൂന്ന് മെക്കാനിസങ്ങളിൽ, നിങ്ങൾ തീർച്ചയായും HTML ഇവന്റ് ഹാൻഡ്‌ലർ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കരുത് - ഇവ കാലഹരണപ്പെട്ടതാണ്, മുകളിൽ സൂചിപ്പിച്ചതുപോലെ മോശം പ്രയോഗമാണ്.

മറ്റ് രണ്ടെണ്ണം താരതമ്യേന പരസ്പരം മാറ്റാവുന്നവയാണ്, കുറഞ്ഞത് ലളിതമായ ഉപയോഗങ്ങൾക്ക്:

• ഇവന്റ് ഹാൻഡ്‌ലർ പ്രോപ്പർട്ടികൾക്ക് ശക്തിയും ഓപ്ഷനുകളും കുറവാണ്, എന്നാൽ മികച്ച ക്രോസ്-ബ്രൗസർ അനുയോജ്യത (ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 വരെ പിന്തുണയ്ക്കുന്നു). നിങ്ങൾ പഠിക്കുമ്പോൾ ഒരുപക്ഷേ ഇവയിൽ നിന്ന് തുടങ്ങണം.
• DOM ലെവൽ 2 ഇവന്റുകൾ (addEventListener() , മുതലായവ) കൂടുതൽ ശക്തമാണ്, എന്നാൽ കൂടുതൽ സങ്കീർണ്ണമാകാം, പിന്തുണ കുറഞ്ഞവയും (ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 9 വരെ പിന്തുണയ്ക്കുന്നു). നിങ്ങൾ ഇവയിൽ പരീക്ഷണം നടത്തുകയും സാധ്യമാകുന്നിടത്ത് അവ ഉപയോഗിക്കാൻ ശ്രമിക്കുകയും വേണം.

മൂന്നാമത്തെ മെക്കാനിസത്തിന്റെ പ്രധാന ഗുണങ്ങൾ, ആവശ്യമെങ്കിൽ, removeEventListener() ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇവന്റ് ഹാൻഡ്‌ലർ കോഡ് നീക്കം ചെയ്യാം, ആവശ്യമെങ്കിൽ നിങ്ങൾക്ക് ഒരേ തരത്തിലുള്ള ഒന്നിലധികം ശ്രോതാക്കളെ ഘടകങ്ങളിലേക്ക് ചേർക്കാം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് addEventListener("click", function() (... )) ഒരു ഘടകത്തിൽ ഒന്നിലധികം തവണ വിളിക്കാം, രണ്ടാമത്തെ ആർഗ്യുമെന്റിൽ വ്യക്തമാക്കിയിട്ടുള്ള വ്യത്യസ്ത ഫംഗ്ഷനുകൾ. ഇവന്റ് ഹാൻഡ്‌ലർ പ്രോപ്പർട്ടികളിൽ ഇത് അസാധ്യമാണ്, കാരണം ഒരു പ്രോപ്പർട്ടി സജ്ജീകരിക്കാനുള്ള ഏതെങ്കിലും തുടർന്നുള്ള ശ്രമങ്ങൾ നേരത്തെയുള്ളവ തിരുത്തിയെഴുതും, ഉദാ:

Element.onclick = function1; element.onclick = function2; തുടങ്ങിയവ.

ശ്രദ്ധിക്കുക: നിങ്ങളുടെ ജോലിയിൽ Internet Explorer 8-നേക്കാൾ പഴയ ബ്രൗസറുകൾ പിന്തുണയ്ക്കാൻ നിങ്ങളോട് ആവശ്യപ്പെടുകയാണെങ്കിൽ, അത്തരം പുരാതന ബ്രൗസറുകൾ പുതിയ ബ്രൗസറുകളിൽ നിന്ന് വ്യത്യസ്ത ഇവന്റ് മോഡലുകൾ ഉപയോഗിക്കുന്നതിനാൽ നിങ്ങൾക്ക് ബുദ്ധിമുട്ടുകൾ നേരിടേണ്ടി വന്നേക്കാം. എന്നാൽ ഒരിക്കലും ഭയപ്പെടരുത്, മിക്ക JavaScript ലൈബ്രറികൾക്കും (ഉദാഹരണത്തിന് jQuery) ക്രോസ്-ബ്രൗസർ വ്യത്യാസങ്ങൾ ഒഴിവാക്കുന്ന ബിൽറ്റ്-ഇൻ ഫംഗ്ഷനുകൾ ഉണ്ട്. നിങ്ങളുടെ പഠന യാത്രയുടെ ഈ ഘട്ടത്തിൽ ഇതിനെക്കുറിച്ച് വളരെയധികം വിഷമിക്കേണ്ട.

മറ്റ് ഇവന്റ് ആശയങ്ങൾ

ഈ വിഭാഗത്തിൽ, ഇവന്റുകൾക്ക് പ്രസക്തമായ ചില വിപുലമായ ആശയങ്ങൾ ഞങ്ങൾ സംക്ഷിപ്തമായി ഉൾക്കൊള്ളുന്നു. ഈ ഘട്ടത്തിൽ ഈ ആശയങ്ങൾ പൂർണ്ണമായി മനസ്സിലാക്കേണ്ടത് പ്രധാനമല്ല, എന്നാൽ കാലാകാലങ്ങളിൽ നിങ്ങൾ കാണാനിടയുള്ള ചില കോഡ് പാറ്റേണുകൾ വിശദീകരിക്കാൻ അവ സഹായിച്ചേക്കാം.

ഇവന്റ് വസ്തുക്കൾ

ചിലപ്പോൾ ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്‌ഷനിൽ, ഇവന്റ് , evt , അല്ലെങ്കിൽ ലളിതമായി e പോലുള്ള ഒരു പേരിനൊപ്പം വ്യക്തമാക്കിയ ഒരു പാരാമീറ്റർ നിങ്ങൾ കണ്ടേക്കാം. ഇതിനെ ഇവന്റ് ഒബ്‌ജക്റ്റ് എന്ന് വിളിക്കുന്നു, കൂടാതെ അധിക സവിശേഷതകളും വിവരങ്ങളും നൽകുന്നതിന് ഇത് ഇവന്റ് ഹാൻഡ്‌ലർമാർക്ക് സ്വയമേവ കൈമാറും. ഉദാഹരണത്തിന്, നമ്മുടെ ക്രമരഹിതമായ വർണ്ണ ഉദാഹരണം വീണ്ടും ചെറുതായി മാറ്റിയെഴുതാം:

ഫംഗ്ഷൻ bgChange(e) ( const rndCol = "rgb(" + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + "," + ക്രമരഹിതം(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); ) btn.addEventListener("ക്ലിക്ക്", bgChange);

ഫംഗ്‌ഷനിലും ഫംഗ്‌ഷനിലും ഞങ്ങൾ ഒരു ഇവന്റ് ഒബ്‌ജക്റ്റ് ഉൾപ്പെടുത്തുന്നത് ഇവിടെ നിങ്ങൾക്ക് കാണാൻ കഴിയും, ഒപ്പം ഫംഗ്‌ഷനിൽ e.target-ൽ ഒരു പശ്ചാത്തല വർണ്ണ ശൈലി സജ്ജീകരിക്കുന്നു - അതാണ് ബട്ടൺ. ഇവന്റ് ഒബ്‌ജക്‌റ്റിന്റെ ടാർഗെറ്റ് പ്രോപ്പർട്ടി എല്ലായ്പ്പോഴും ഇവന്റ് സംഭവിച്ച ഘടകത്തിന്റെ ഒരു റഫറൻസാണ്. അതിനാൽ ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ ബട്ടണിൽ ഒരു റാൻഡം പശ്ചാത്തല വർണ്ണം സജ്ജമാക്കുകയാണ്, പേജിലല്ല.

കുറിപ്പ്: ഇവന്റ് ഒബ്‌ജക്റ്റിനായി നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് പേരും ഉപയോഗിക്കാം - ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്‌ഷനിൽ റഫറൻസ് ചെയ്യാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന ഒരു പേര് നിങ്ങൾ തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്. e/evt/event എന്നത് ഡവലപ്പർമാരാണ് ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്നത്, കാരണം അവ ഹ്രസ്വവും ഓർമ്മിക്കാൻ എളുപ്പവുമാണ്. സ്ഥിരത പുലർത്തുന്നത് എല്ലായ്പ്പോഴും നല്ലതാണ് - നിങ്ങളുമായും സാധ്യമെങ്കിൽ മറ്റുള്ളവരുമായും.

ഒന്നിലധികം ഘടകങ്ങളിൽ ഒരേ ഇവന്റ് ഹാൻഡ്‌ലർ സജ്ജീകരിക്കാനും അവയിൽ ഒരു ഇവന്റ് സംഭവിക്കുമ്പോൾ അവയ്‌ക്കെല്ലാം എന്തെങ്കിലും ചെയ്യാനും നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ e.target അവിശ്വസനീയമാംവിധം ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് 16 ടൈലുകളുടെ ഒരു സെറ്റ് ഉണ്ടായിരിക്കാം, അവ ക്ലിക്ക് ചെയ്യുമ്പോൾ അപ്രത്യക്ഷമാകും. കൂടുതൽ ബുദ്ധിമുട്ടുള്ള രീതിയിൽ അത് തിരഞ്ഞെടുക്കുന്നതിന് പകരം e.Target ആയി അപ്രത്യക്ഷമാകുന്ന കാര്യം എപ്പോഴും സജ്ജീകരിക്കാൻ കഴിയുന്നത് ഉപയോഗപ്രദമാണ്. ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ (പൂർണ്ണ സോഴ്‌സ് കോഡിനായി ഉപയോഗപ്രദമായ-eventtarget.html കാണുക; അത് ഇവിടെ തത്സമയം പ്രവർത്തിക്കുന്നത് കാണുക), ഞങ്ങൾ JavaScript ഉപയോഗിച്ച് 16 ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നു. തുടർന്ന് ഞങ്ങൾ document.querySelectorAll() ഉപയോഗിച്ച് അവയെല്ലാം തിരഞ്ഞെടുക്കുന്നു, തുടർന്ന് ഓരോന്നിനും ലൂപ്പ് ചെയ്യുന്നു, ഓരോന്നിനും ഒരു ഓൺക്ലിക്ക് ഹാൻഡ്‌ലർ ചേർക്കുന്നു, അങ്ങനെ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഓരോന്നിനും ക്രമരഹിതമായ നിറം ബാധകമാകും:

Const divs = document.querySelectorAll("div"); വേണ്ടി (ഞാൻ = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

ഔട്ട്പുട്ട് ഇപ്രകാരമാണ് (അതിൽ ക്ലിക്ക് ചെയ്യാൻ ശ്രമിക്കുക - ആസ്വദിക്കൂ):

മറച്ച ഉദാഹരണം ഉപയോഗപ്രദമായ ഇവന്റ് ടാർഗെറ്റ് ഉദാഹരണം div (ഉയരം: 100px; വീതി: 25%; ഫ്ലോട്ട്: ഇടത്; ) എന്നതിന് (ഞാൻ = 1; i അനുവദിക്കുക

മുകളിലെ ഉദാഹരണത്തിൽ, ഒരു ഫീൽഡിന് ഫോക്കസ് ലഭിക്കുകയും ഉപയോക്താവ് അടുത്ത ഫീൽഡ് പൂരിപ്പിക്കുകയും ചെയ്‌ത ശേഷം (ഉദാഹരണത്തിന്, TAB അല്ലെങ്കിൽ ഒരു സാധാരണ ക്ലിക്ക് ഉപയോഗിച്ച്), ഘടകം JS-ൽ എഴുതിയിരിക്കുന്ന ചെക്ക്‌നെയിം ഫംഗ്‌ഷനെ വിളിക്കും.
ആധുനിക വികസനത്തിൽ ഉപയോഗിക്കുന്നതിന് സ്റ്റാൻഡേർഡ് HTML ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ശുപാർശ ചെയ്യുന്നില്ല, പ്രധാനമായും പ്രവർത്തനക്ഷമത മാർക്ക്അപ്പുമായി കലർന്നതാണ്, ഇത് കോഡിന്റെ പ്രവർത്തനത്തെയും ഡീബഗ്ഗിംഗിനെയും സങ്കീർണ്ണമാക്കുന്നു.

2. DOM-ലെ സ്റ്റാൻഡേർഡ് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ

ഈ സാങ്കേതികത JS ഉം മാർക്ക്അപ്പും വേർതിരിക്കുന്നു, എന്നാൽ അതേ പരിമിതിയുണ്ട് - ഇവന്റുകൾക്ക് ഒരു ഫംഗ്ഷൻ മാത്രമേ നൽകാനാകൂ. DOM-ലെ തുല്യമായ HTML ഇവന്റ് ഹാൻഡ്‌ലർ എൻട്രി ഇതായിരിക്കും:

var ഉപയോക്തൃനാമം = document.getElementbyId("ഉപയോക്തൃനാമം"); username.onblur = checkName;

ഉപയോക്തൃനാമം. onblur = checkName ;

ജാവാസ്ക്രിപ്റ്റ്. വേഗത്തിലുള്ള തുടക്കം

ഒരു വെബ് ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്‌ടിക്കാം എന്നതിന്റെ ഹാൻഡ്-ഓൺ ഉദാഹരണത്തിലൂടെ JavaScript-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസിലാക്കുക.

മുമ്പത്തെ ഉദാഹരണത്തിലെന്നപോലെ, ഫോം എലമെന്റിന് ഫോക്കസ് നഷ്ടപ്പെട്ടതിന് ശേഷം ചെക്ക് നെയിം ഫംഗ്ഷൻ പ്രവർത്തിക്കുന്നു.

3. ഇവന്റ് ശ്രോതാക്കൾ

ഒന്നിലധികം ഇവന്റുകളും ഫംഗ്‌ഷനുകളും ചെയിൻ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ചേർക്കുന്നതിനുള്ള ഒരു ആധുനിക രീതി:

var ഉപയോക്തൃനാമം = document.getElementbyId("ഉപയോക്തൃനാമം"); username.addEventListener("blur", checkName, false);

var ഉപയോക്തൃനാമം = പ്രമാണം. getElementbyId("ഉപയോക്തൃനാമം"); ഉപയോക്തൃനാമം. addEventListener ("blur" , checkName , false );

ഇവന്റ് ക്യാപ്‌ചർ ചെയ്യണമോ എന്ന് അവസാനത്തെ ബൂളിയൻ മൂല്യം സൂചിപ്പിക്കുന്നു. സാധാരണയായി തെറ്റായി സജ്ജീകരിച്ചിരിക്കുന്നു. ലളിതമായ സ്ക്രിപ്റ്റുകളിൽ, ഒരു ഇവന്റ് പലപ്പോഴും ഒരു അജ്ഞാത ഫംഗ്ഷൻ ആയി എഴുതപ്പെടുന്നു:

var ഉപയോക്തൃനാമം = document.getElementbyId("ഉപയോക്തൃനാമം"); username.addEventListener("blur", function() ( // ഇവന്റ് ട്രിഗർ ചെയ്യുന്നതിനുള്ള പ്രവർത്തനങ്ങൾ ))

എല്ലാ സംഭവങ്ങളും തുല്യമല്ല എല്ലാ സംഭവങ്ങളെയും ഒരുപോലെ പരിഗണിക്കാൻ കഴിയില്ലെന്ന് മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്. സ്ക്രോൾ, വലുപ്പം മാറ്റൽ ഇവന്റുകൾ പലപ്പോഴും ഫയർ ചെയ്യപ്പെടുന്നു, അതിനാലാണ് സ്ക്രിപ്റ്റിന്റെ വേഗത കുറയ്ക്കാതിരിക്കാൻ നിങ്ങൾ അവരുമായി വളരെ ശ്രദ്ധയോടെ പ്രവർത്തിക്കേണ്ടത്. ഇൻപുട്ട് പോലെയുള്ള നിരുപദ്രവകരമായ സംഭവങ്ങൾക്കും ഇത് ബാധകമാണ്. റേഞ്ച് സ്ലൈഡറിൽ ഇടയ്ക്കിടെ ട്രിഗർ ചെയ്യപ്പെടുന്ന ഇൻപുട്ട് ഇവന്റിനോട് നിരന്തരം പ്രതികരിക്കാൻ ശ്രമിച്ചാൽ സ്ക്രിപ്റ്റിന്റെ പ്രകടനത്തിന് വലിയ തിരിച്ചടിയുണ്ടായേക്കാം. എല്ലാ ഇവന്റുകളും ട്രാക്ക് ചെയ്യപ്പെടുന്നില്ല മ്യൂട്ടേഷൻ നിരീക്ഷകർക്ക് നിലവിൽ ഒരു പേജിലെ എല്ലാ ഘടകങ്ങളിലെയും എല്ലാ മാറ്റങ്ങളും ട്രാക്ക് ചെയ്യാൻ കഴിയുന്നില്ല. ഉദാഹരണത്തിന്, ഒരു മൂലകത്തിന്റെ ഉയരത്തിലെ മാറ്റങ്ങൾ ട്രാക്കുചെയ്യാൻ ഒരു മാർഗവുമില്ല (പ്രതികരണാത്മക രൂപകൽപ്പനയിലുള്ള ഒരു കണ്ടെയ്‌നർ ചുരുങ്ങുമ്പോൾ, അതിനുള്ളിലെ ടെക്‌സ്‌റ്റ് പുനഃക്രമീകരിക്കുകയും ഘടകങ്ങൾ നീളമുള്ളതായിത്തീരുകയും ചെയ്യുന്നു). എന്നിരുന്നാലും, മാറ്റങ്ങൾ ട്രാക്കുചെയ്യാനുള്ള വഴികളുണ്ട്, അടുത്ത ലേഖനത്തിൽ ഞാൻ ഇതിനെക്കുറിച്ച് സംസാരിക്കും. ശരിയായ ഘടകങ്ങളിലേക്ക് ഇവന്റുകൾ അറ്റാച്ചുചെയ്യുക ലിങ്കുകൾ ഉൾപ്പെടെ നിരവധി ഘടകങ്ങൾക്ക് onclick ഇവന്റ് ബാധകമാണ്. ഒരു പൊതു നിയമമുണ്ട് - ലിങ്കുകളിലേക്ക് JS കോഡ് അറ്റാച്ചുചെയ്യാൻ ശുപാർശ ചെയ്യുന്നില്ല. ലിങ്കിൽ ക്ലിക്കുചെയ്യുന്നതിലൂടെ, ഉപയോക്താവിനെ സൈറ്റിന്റെ മറ്റൊരു ഏരിയയിലേക്കോ ഒരു ആങ്കറിലേക്കോ കൊണ്ടുപോകണം. നിങ്ങൾക്ക് ഒരേ പേജിൽ എന്തെങ്കിലും മാറ്റാൻ കഴിയുന്ന ഒരു യുഐ ഘടകം ആവശ്യമുണ്ടെങ്കിൽ, ഒരു ബട്ടൺ നിങ്ങൾക്ക് അനുയോജ്യമാണ്. നിങ്ങൾക്ക് ബട്ടണിലേക്ക് എളുപ്പത്തിൽ JavaScript ചേർക്കാൻ കഴിയും. നിങ്ങൾക്ക് CSS ഉപയോഗിച്ച് ചെയ്യാൻ കഴിയുമ്പോൾ JavaScript ഉപയോഗിക്കരുത് CSS-നെ അപേക്ഷിച്ച്, JavaScript വേഗത കുറഞ്ഞതും വിശ്വസനീയമല്ലാത്തതുമാണ്. അടിസ്ഥാനപരമായി, സാധ്യമാകുന്നിടത്തെല്ലാം സങ്കീർണ്ണമായ സ്ക്രിപ്റ്റുകൾക്ക് പകരമായി CSS ഉപയോഗിക്കണം. എന്നിരുന്നാലും, CSS എല്ലാം ചെയ്യുന്നില്ല. ഇത് : ഹോവർ (പല കേസുകളിലും ടച്ച് ഇവന്റുകൾ മാറ്റിസ്ഥാപിക്കുന്നു) ഉപയോഗിച്ച് ഒരു നല്ല ജോലി ചെയ്യുന്നു, കൂടാതെ ചില സന്ദർഭങ്ങളിൽ ക്ലിക്ക് ഇവന്റിനെ മാറ്റിസ്ഥാപിക്കാനും കഴിയും: ടാർഗെറ്റ്. പേജ് ലോഡുചെയ്‌തതിനുശേഷം CSS ആനിമേഷൻ സ്വയമേവ സമാരംഭിക്കും, കൂടാതെ റേഡിയോ ബട്ടണുകൾ പോലുള്ള ഘടകങ്ങൾക്കായി പ്രവർത്തനക്ഷമമാക്കാൻ കഴിയുന്ന പ്രത്യേക CSS അവസ്ഥകളും ഉണ്ട്. എന്നിരുന്നാലും, കൂടുതൽ സങ്കീർണ്ണമായ എന്തും സാധാരണയായി ജാവാസ്ക്രിപ്റ്റിന് വിട്ടുകൊടുക്കുന്നതാണ് നല്ലത്.