டைனமிக் உருவாக்கும் ஜாவாஸ்கிரிப்ட்டின் திறன் html பக்கங்கள்மூன்று தூண்களை அடிப்படையாகக் கொண்டது. அவற்றில் இரண்டு ஏற்கனவே முந்தைய கட்டுரைகளில் விவாதிக்கப்பட்டுள்ளன. மூன்றாவது நிகழ்வுகள்.

• சாளர பொருளைப் பயன்படுத்தி உலாவி சாளரங்களை நிர்வகித்தல்.
• ஒரு சாளரத்தில் உள்ள பொருட்களை நிர்வகிப்பது DOM ஆகும்.
• நிகழ்வுகளில் ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்கவும்.

ஒரு நிகழ்வு என்பது ஒரு பயனர் செயலுக்கு கணினியின் எதிர்வினை. எடுத்துக்காட்டாக, t.z உடன். ஜாவாஸ்கிரிப்ட் நிகழ்வு என்பது விசைப்பலகை பொத்தானை அழுத்துவது, மவுஸ் பொத்தான்களின் இயக்கம் மற்றும் கிளிக் செய்தல் மற்றும் உலாவி சாளரத்தை மூடுவது என கருதப்படுகிறது. t.z உடன் அனைத்து நிகழ்வுகளும் ஜாவாஸ்கிரிப்ட் ஆவணம் மற்றும் உலாவி பொருள்களால் உருவாக்கப்படுகிறது ('பயனர்' என்ற கருத்து இல்லை). எடுத்துக்காட்டாக, நீங்கள் ஒரு பத்தியைக் கிளிக் செய்யும் போது, ​​​​மவுஸ் கிளிக் நிகழ்வு ஒரு பொருளால் உருவாக்கப்படுகிறது - பத்தி.

நிகழ்வுகளுக்கு எதிர்வினையாற்றும் சில ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்க, ஒரு குறிப்பிட்ட பொருளிலிருந்து உருவாக்கப்பட்ட நிகழ்வோடு இந்தக் குறியீட்டை நீங்கள் இணைக்க வேண்டும், அதாவது. ஒரு குறிப்பிட்ட பொருளிலிருந்து ஒரு குறிப்பிட்ட நிகழ்வுடன். இந்தச் செயல் நிகழ்விற்கு சந்தா செலுத்துதல் என்று அழைக்கப்படுகிறது.

சந்தா என்பது உலாவி ஆப்ஜெக்ட் மாதிரியில் உள்ள ஒரு குறிப்பிட்ட பொருளில் இருந்து ஒரு குறிப்பிட்ட நிகழ்விற்கு ஒரு செயல்பாட்டை பிணைப்பதாகும். இந்த பொருள் இந்த நிகழ்வை உருவாக்கும் போது (உருவாக்கும்), இந்த செயல்பாடு தானாகவே வேலை செய்யும்.

• கிளிக் செய்யவும் - சுட்டி பொத்தானைக் கிளிக் செய்யவும்.
• ondblclick - சுட்டி பொத்தானை இருமுறை கிளிக் செய்யவும்.
• onmousedown - சுட்டி பொத்தான் அழுத்தப்பட்டது (கீழே நகர்த்தப்பட்டது).
• onmousemove - பொருளின் மீது சுட்டி நகரும் (பல நிகழ்வுகள் நிகழும், சுட்டி இயக்கம் 1px = 1 நிகழ்வு).
• onmouseout - சுட்டி பொருளை விட்டு வெளியேறுகிறது.
• onmouseover - விரும்பிய பொருளின் மீது சுட்டி நகரும்.
• onmouseup - மவுஸ் பொத்தான் வெளியிடப்பட்டது (மேலே உயர்த்தப்பட்டது).
• onkeydown - விசைப்பலகை பொத்தான் அழுத்தப்பட்டது (கீழே நகர்த்தப்பட்டது).
• onkeypress - விசைப்பலகை பொத்தானை அழுத்தவும்.
• onkeyup - விசைப்பலகை பொத்தான் வெளியிடப்பட்டது (மேலே உயர்த்தப்பட்டது).
• onblur - உள்ளீடு கவனம் இழப்பு (ஒளிரும் கர்சர்).
• onfocus - இந்த உறுப்பு மூலம் உள்ளீடு கவனம் பெறப்படும் தருணம்.
• onchange - உரை மாறியிருந்தால் (உதாரணமாக, உரை புலத்தில்) கவனம் இழந்த பிறகு கட்டுப்பாட்டால் உருவாக்கப்படும். விதிவிலக்கு 'தேர்ந்தெடு' பட்டியல் உறுப்பு, இதில் இந்த நிகழ்வு உடனடியாக உருவாக்கப்படும், கவனம் இழந்த பிறகு அல்ல.
• onload - சாளரத்தில் பக்கம் ஏற்றப்படும் போது உருவாக்கப்பட்டது. பக்கம் முழுமையாக ஏற்றப்பட்ட பிறகு சில ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்க வேண்டியிருக்கும் போது பொதுவாகப் பயன்படுத்தப்படும்.
• onunload - சாளரத்தில் இருந்து ஆவணம் இறக்கப்படும் முன் நிகழ்கிறது (அதாவது, இந்த ஆவணத்தை மூடும்போது அல்லது மற்றொரு ஆவணத்திற்குச் செல்லும்போது).
• onreset - படிவம் மீட்டமைக்கப்பட்டது.
• சமர்ப்பிக்கவும் - தரவு படிவம் சமர்ப்பிக்கப்பட்டது.

நிகழ்வுகளுக்கு குழுசேரவும்

• ஜாவாஸ்கிரிப்ட் வழியாக சந்தா. இந்த முறை பெரும்பாலான சந்தர்ப்பங்களில் பயன்படுத்தப்படுகிறது. முதலில், நாம் குழுசேர விரும்பும் உறுப்பின் பொருளைக் கண்டுபிடிக்க வேண்டும், எடுத்துக்காட்டாக, getElementById முறை மூலம் (தேவையான உறுப்புக்கு ஐடியைக் குறிக்கவும்).

செயல்பாடு myFunc () ( //ஒரு எளிய செயல்பாட்டு எச்சரிக்கையை உருவாக்கியது ("ஹலோ"); ) function pageInit () (var p= document. getElementById ("1"); p. onclick= myFunc; ) சாளர நிகழ்வு. onload=pageInit; //பக்கம் ஏற்றப்படும் போது நிகழ்வு சுடப்படும்< p id= 1 >பத்தி 1 //பத்திக்கான ஐடியை அமைக்கவும்

• மூலம் குழுசேரவும் html குறியீடு. இந்த முறையின் தீமை என்னவென்றால், html குறியீடு ஜாவாஸ்கிரிப்ட் குறியீட்டுடன் அடைக்கப்பட்டுள்ளது; கூடுதலாக, பல வரம்புகள் உள்ளன, மற்றும் சிக்கலான சந்தர்ப்பங்களில் அதை பயன்படுத்த சிரமமாக உள்ளது.

< script type= "text/javascript" >செயல்பாடு myFunc () ( //ஒரு எளிய செயல்பாட்டு எச்சரிக்கையை உருவாக்கியது ("ஹலோ"); )< p onclick= "myFunc()" >பத்தி 2 // செயல்பாடு நிகழ்வு செயலாக்க மாதிரி என்று அழைக்கப்படுகிறது

ஒரு உறுப்பில் ஒரு நிகழ்வு நிகழும்போது, ​​பக்கத்தின் மேல் பகுதி வரை ('உடல்' வரை, ஆவணத்தின் முக்கிய பகுதி என்பதால்) அதன் அனைத்து மூல உறுப்புகளிலும் இதே போன்ற நிகழ்வுகள் நிகழ வேண்டும். எனவே, பக்கத்தில் ஏற்படும் எந்த நிகழ்வும் உடலில் நிகழ்கிறது.

அப்படியானால், இதுபோன்ற நிகழ்வுகள் எந்த வரிசையில் நிகழும் என்ற கேள்வி எழுகிறது. நவீன உலாவிகளில், நிகழ்வு கையாளுதல் மாதிரி 'குமிழி மாதிரி' என்று அழைக்கப்படுகிறது. அதன் சாராம்சம்: முதலில், கிளிக் செய்யப்பட்ட உறுப்பில் ஒரு நிகழ்வு நிகழ்கிறது, பின்னர் அதன் பெற்றோரிடம், மற்றும் மிகவும் மேலே - 'உடல்' வரை.

உறுப்பு --> உறுப்பு 2 --> ஆவணம் --> சாளரம்

நிகழ்வு அளவுருக்கள் (நிகழ்வு பொருள்)

பல பண்புகளைக் கொண்ட ஒரு நிகழ்வு பொருள் உள்ளது. இந்த பண்புகளைப் படிப்பதன் மூலம், நிகழ்வுகள் பற்றிய தகவல்களைப் பெறலாம். தகவலைப் பெற, நீங்கள் முதலில் பொருளைப் பெற வேண்டும்.

இந்த பொருளின் முக்கிய பண்புகள்:

• x, y - நிகழ்வு நிகழும் தருணத்தில் சுட்டி ஒருங்கிணைக்கிறது.
• clientX, clientY - அதே.
• offsetX, offsetY - அதே விஷயம், ஆனால் இது மவுஸ் ஆஃப்செட் தொடர்புடையது தாய் உறுப்பு.
• screenX, screenY - திரை ஒருங்கிணைப்புகள்.
• பொத்தான் - எந்த மவுஸ் பொத்தான் அழுத்தப்பட்டது (0 - அழுத்தப்படவில்லை, 1 - இடது பொத்தானை அழுத்தியது, 2 - வலது பொத்தானை அழுத்தியது, 4 - நடுத்தர பொத்தானை அழுத்தியது).
• கீகோட் - அழுத்தப்பட்ட விசைப்பலகை விசையின் எண் குறியீடு.
• srcElement - நிகழ்வை உருவாக்கிய உறுப்பு.
• fromElement - சுட்டி நகர்த்திய உறுப்பு.
• toElement - சுட்டி ஓடிய பொருளின் அறிகுறி.
• CancelBubble கொடுத்தால் தரமற்ற வழி உண்மை, பின்னர் 'பாப்-அப் குமிழி' ரத்து செய்யப்படும்; அல்லது பயனர் அழுத்திய விசையின் குறியீட்டை மாற்றலாம்.

இந்தப் பாடத்தில், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி சில குறியீட்டை இயக்குவதற்கு நீங்கள் இடைமறிக்கக்கூடிய நிகழ்வுகளின் முக்கிய வகைகளைப் பார்ப்போம்.

நிகழ்வு வகைகள்

அனைத்து ஜாவாஸ்கிரிப்ட் நிகழ்வுகளும் பின்வரும் வகைகளாகப் பிரிக்கப்படலாம்: மவுஸ் நிகழ்வுகள், விசைப்பலகை நிகழ்வுகள், பிரேம்/பொருள் நிகழ்வுகள், படிவ நிகழ்வுகள், இழுவை நிகழ்வுகள், அனிமேஷன் நிகழ்வுகள், கிளிப்போர்டு நிகழ்வுகள், ஊடக நிகழ்வுகள், மாற்றம் நிகழ்வுகள், சர்வர் அனுப்பிய நிகழ்வுகள், டச் நிகழ்வுகள், அச்சு நிகழ்வுகள் (Print Events), இதர நிகழ்வுகள் (Misc Events).

கவனம்: ஜாவாஸ்கிரிப்டில் உள்ள அனைத்து நிகழ்வுகளும் சிறிய (சிறிய) எழுத்துக்களில் எழுதப்பட்டுள்ளன.

சுட்டி நிகழ்வுகள்

• mousedown - மவுஸ் பொத்தானை சில உறுப்புகளின் மீது அழுத்தும் போது நிகழ்வு ஏற்படுகிறது, ஆனால் இன்னும் வெளியிடப்படவில்லை.
• mouseup - சில உறுப்புகளின் மீது சுட்டி பொத்தான் அழுத்தப்பட்ட நிலையில் இருந்து வெளியிடப்பட்ட நிலைக்கு செல்லும் போது நிகழ்வு ஏற்படுகிறது.
• கிளிக் - பயனர் ஒரு உறுப்பு மீது கிளிக் செய்யும் போது நிகழ்வு ஏற்படுகிறது. கிளிக் நிகழ்வுகள் நிகழும் வரிசை (இடது மற்றும் நடு சுட்டி பொத்தான்களுக்கு) mousedown -> mouseup -> click .
• சூழல்மெனு - பயனர் ஒரு உறுப்பு மீது வலது கிளிக் செய்யும் போது நிகழ்வு ஏற்படுகிறது. சூழல்மெனுவுடன் தொடர்புடைய நிகழ்வுகளின் வரிசை (வலது சுட்டி பொத்தானுக்கு) மவுஸ் டவுன் -> மவுஸ்அப் -> சூழல்மெனு .
• dblclick - பயனர் ஒரு உறுப்பை இருமுறை கிளிக் செய்யும் போது நிகழ்வு ஏற்படுகிறது. dblclick உடன் தொடர்புடைய நிகழ்வுகளின் நிகழ்வுகளின் வரிசை: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
• mouseover - மவுஸ் கர்சர் ஒரு உறுப்பு அல்லது அதன் குழந்தைகளில் ஒருவருக்கு சொந்தமான பகுதிக்குள் நுழையும் போது நிகழ்வு ஏற்படுகிறது.
• mouseout - மவுஸ் கர்சர் ஒரு உறுப்பு அல்லது அதன் குழந்தைகளில் ஒருவருக்கு சொந்தமான பகுதியிலிருந்து வெளியேறும்போது நிகழ்வு ஏற்படுகிறது.
• mousemove - மவுஸ் கர்சர் உறுப்புக்கு சொந்தமான பகுதிக்குள் நகரும் போது நிகழ்வு ஏற்படுகிறது.
• mouseenter - மவுஸ் பாயிண்டர் ஒரு உறுப்புக்கு சொந்தமான பகுதியில் நுழையும் போது நிகழ்வு ஏற்படுகிறது. இந்த நிகழ்வு பெரும்பாலும் மவுஸ் லீவ் நிகழ்வோடு இணைந்து பயன்படுத்தப்படுகிறது, இது மவுஸ் பாயிண்டர் ஒரு உறுப்புக்கு சொந்தமான பகுதியை விட்டு வெளியேறும்போது நிகழ்கிறது. mouseenter நிகழ்வு மவுஸ்ஓவர் நிகழ்வைப் போலவே உள்ளது மற்றும் mouseenter நிகழ்வு குமிழியாகாமல் மட்டுமே வேறுபடுகிறது (நிகழ்வு குமிழியின் கருத்தை சிறிது நேரம் கழித்து அறிந்து கொள்வோம்).
• mouseleave - மவுஸ் பாயிண்டர் உறுப்புக்கு சொந்தமான பகுதியை விட்டு வெளியேறும்போது நிகழ்வு ஏற்படுகிறது. மவுஸ் லீவ் நிகழ்வு மவுஸ் லீவ் நிகழ்வைப் போலவே உள்ளது மற்றும் மவுஸ் லீவ் நிகழ்வு குமிழியாகாமல் மட்டுமே வேறுபடுகிறது (நிகழ்வு குமிழ்கள் பற்றிய கருத்தை சிறிது நேரம் கழித்து அறிந்து கொள்வோம்).

விசைப்பலகை நிகழ்வுகள்

நிகழ்வுகள் நிகழும் வரிசை: கீ டவுன் -> கீ பிரஸ் -> கீஅப் .

• விசைப்பலகை - ஒரு உறுப்புக்கு மேலே உள்ள விசைப்பலகையில் ஒரு விசையை அழுத்தும் போது அது இன்னும் வெளியிடப்படவில்லை.
• keyup - ஒரு உறுப்புக்கு மேலே உள்ள விசைப்பலகையில் அழுத்தப்பட்ட விசை வெளியிடப்பட்ட நிலைக்கு மாறும்போது நிகழ்வு நிகழ்கிறது.
• keypress - பயனர் ஒரு உறுப்புக்கு மேலே உள்ள விசைப்பலகையில் ஒரு விசையை அழுத்தும் போது நிகழ்வு ஏற்படுகிறது.

பொருள் மற்றும் சட்ட நிகழ்வுகள்

• முன் இறக்கம் - ஆவணம் இறக்கப்படும் முன் நிகழ்வு நிகழ்கிறது. இந்த நிகழ்வு உறுதிப்படுத்தல் உரையாடலில் கூடுதல் செய்தியைக் காண்பிக்க உங்களை அனுமதிக்கிறது, "நீங்கள் நிச்சயமாக இந்தப் பக்கத்தை விட்டு வெளியேற விரும்புகிறீர்களா?" ஒரு ஆவணத்தை மூடும் போது தோன்றும் நிலையான செய்தியைப் பொறுத்து மாறுபடலாம் வெவ்வேறு உலாவிகள். ஆனால் நீங்கள் அதை மாற்றவோ நீக்கவோ முடியாது, உங்கள் சொந்த செய்தியைச் சேர்க்க மட்டுமே இந்த முறையைப் பயன்படுத்த முடியும், இது இயல்புநிலை செய்தியுடன் காட்டப்படும்.
• பிழை - ஒரு பிழை ஏற்படும் போது நிகழ்வு தூண்டப்படுகிறது, இது வெளிப்புற கோப்பை ஏற்றும் போது நிகழ்கிறது (உதாரணமாக, ஒரு ஆவணம் அல்லது படம்).
• ஹாஷ்சேஞ்ச் - தற்போதைய URL இன் நங்கூரம் பகுதி ("#" சின்னத்துடன் தொடங்குகிறது) மாறும்போது நிகழ்வு நிகழ்கிறது.
• சுமை - ஒரு பொருளை ஏற்றுதல் முடிந்ததும் நிகழ்வு ஏற்படுகிறது. வலைப்பக்கம் முழுவதுமாக ஏற்றப்பட்ட உடனேயே ஸ்கிரிப்டை இயக்க உடல் உறுப்புகளில் ஏற்ற நிகழ்வு பெரும்பாலும் பயன்படுத்தப்படுகிறது.
• இறக்குதல் - ஒரு பக்கம் இறக்கப்படும் போது நிகழ்வு நிகழ்கிறது (உதாரணமாக, உலாவி தாவல் (சாளரம்) மூடப்பட்டிருக்கும் போது).
• pageshow - பயனர் வலைப்பக்கத்திற்கு செல்லும்போது நிகழ்வு ஏற்படுகிறது, அதாவது. பக்கம் பயனருக்குக் கிடைத்த பிறகு. பேஜ்ஷோ நிகழ்வு, லோட் நிகழ்வைப் போலவே உள்ளது, தவிர, ஒவ்வொரு முறையும் பக்கம் ஏற்றப்படும் போது, ​​அது கேச் இருந்து ஏற்றப்பட்டாலும் கூட. ஒரு பக்கம் முதலில் ஏற்றப்படும் போது, ​​ஏற்ற நிகழ்வுக்குப் பிறகு, பேஜ்ஷோ நிகழ்வு உடனடியாக எரிகிறது.
• pagehide - பயனர் பக்கத்தை விட்டு வெளியேறும்போது நிகழ்வு நிகழ்கிறது (அன்லோட் நிகழ்வுக்கு முன் பக்க மறை நிகழ்வு நிகழ்கிறது). கூடுதலாக, இந்த நிகழ்வு, இறக்குதல் நிகழ்வைப் போலல்லாமல், பக்க கேச்சிங்கைத் தடுக்காது.
• மறுஅளவிடுதல் - உலாவி சாளரத்தின் அளவை மாற்றும் போது நிகழ்வு ஏற்படுகிறது.
• உருள் - சுருள் பட்டையைக் கொண்ட ஒரு உறுப்பின் உள்ளடக்கத்தை நீங்கள் உருட்டும் போது நிகழ்வு நிகழ்கிறது.

படிவம் மற்றும் கட்டுப்பாட்டு நிகழ்வுகள்

• கவனம் - உறுப்பு கவனம் பெறும் போது நிகழ்வு ஏற்படுகிறது. இந்த நிகழ்வு பாப் அப் ஆகாது.
• தெளிவின்மை - ஒரு பொருள் கவனம் இழக்கும் போது நிகழ்வு ஏற்படுகிறது. இந்த நிகழ்வு பாப் அப் ஆகாது.
• focusin - உறுப்பு கவனம் பெறும் போது நிகழ்வு ஏற்படுகிறது. ஃபோகஸ்இன் நிகழ்வு ஃபோகஸ் நிகழ்வைப் போன்றது, ஆனால் அது குமிழிகள் என்பதில் அதிலிருந்து வேறுபடுகிறது. எனவே, யார் கவனத்தை இழக்கிறார்கள் என்பதை நீங்கள் கண்டுபிடிக்க வேண்டியிருக்கும் போது இதைப் பயன்படுத்தலாம்: உறுப்பு அல்லது அதன் குழந்தை?
• கவனம் செலுத்துதல் - ஒரு உறுப்பு கவனத்தை இழக்கும் போது நிகழ்வு ஏற்படுகிறது. ஃபோகவுட் நிகழ்வு மங்கலான நிகழ்வைப் போன்றது, ஆனால் அது குமிழிகள் என்பதில் அதிலிருந்து வேறுபடுகிறது. எனவே, யார் கவனத்தை இழக்கிறார்கள் என்பதை நீங்கள் கண்டுபிடிக்க வேண்டியிருக்கும் போது இதைப் பயன்படுத்தலாம்: உறுப்பு அல்லது அதன் குழந்தை?
• மாற்றம் - உறுப்பு மதிப்பு மாறும்போது நிகழ்வு நிகழ்கிறது, ஆனால் உறுப்பு கவனம் இழந்த பிறகு. மாற்ற நிகழ்வுக்கு கூடுதலாக, ஜாவாஸ்கிரிப்ட் இதே போன்ற உள்ளீட்டு நிகழ்வையும் கொண்டுள்ளது, இது உறுப்புகளின் மதிப்பு மாறிய உடனேயே ஏற்படும் மாற்ற நிகழ்விலிருந்து வேறுபடுகிறது. மாற்றம் நிகழ்வு, உள்ளீட்டு நிகழ்வைப் போலல்லாமல், கீஜென் மற்றும் தேர்ந்தெடுக்கப்பட்ட கூறுகளுடன் செயல்படுகிறது. ரேடியோ பட்டன்கள் மற்றும் தேர்வுப்பெட்டிகளுக்கு, இந்த உறுப்புகளின் நிலை மாறும்போது மாற்றம் நிகழ்வு நிகழ்கிறது.
• உள்ளீடு - உள்ளீட்டு உறுப்பு அல்லது உரைப்பகுதி உறுப்புகளின் மதிப்பு மாறிய பிறகு நிகழ்வு நிகழ்கிறது.
• தவறானது - சேவையகத்திற்கு மற்ற படிவத் தரவுகளுடன் அனுப்ப வேண்டிய உள்ளீட்டு உறுப்பு தவறான தரவைக் கொண்டிருக்கும் போது நிகழ்வு நிகழ்கிறது.
• மீட்டமை - படிவம் அழிக்கப்படுவதற்கு முன் நிகழ்வு நிகழ்கிறது, இது type="reset" உடன் உள்ளீட்டு உறுப்பு மூலம் செய்யப்படுகிறது.
• தேடல் - பயனர் Enter விசையை அழுத்திய பிறகு அல்லது வகை="தேடல்" உள்ள உள்ளீட்டு உறுப்பு மீது " x " (ரத்து) பொத்தானைக் கிளிக் செய்த பிறகு நிகழ்வு நிகழ்கிறது.
• தேர்ந்தெடு - உறுப்புகளில் சில உரையைத் தேர்ந்தெடுத்த பிறகு நிகழ்வு நிகழ்கிறது. தேர்ந்தெடுக்கப்பட்ட நிகழ்வு முக்கியமாக type="text" அல்லது textarea உடன் உள்ளீட்டு உறுப்புக்காகப் பயன்படுத்தப்படுகிறது.
• சமர்ப்பிக்க - படிவம் சர்வரில் சமர்ப்பிக்கப்படுவதற்கு முன் நிகழ்வு நிகழ்கிறது.

நிகழ்வுகளை இழுக்கவும்

இழுக்கப்பட்ட பொருளுடன் தொடர்புடைய நிகழ்வுகள் (இழுக்கக்கூடிய இலக்கு, மூலப் பொருள்):

• dragstart - பயனர் ஒரு உறுப்பை இழுக்கத் தொடங்கும் போது நிகழ்வு நிகழ்கிறது;
• இழுத்தல் - பயனர் ஒரு உறுப்பை இழுக்கும்போது நிகழ்வு ஏற்படுகிறது;
• dragend - பயனர் உறுப்பை இழுத்து முடித்தவுடன் நிகழ்வு நிகழ்கிறது, அதாவது. நான் மவுஸ் கர்சரை வெளியிட்டபோது.

இழுக்கக்கூடிய இலக்கைப் பெறும் துளி இலக்குடன் தொடர்புடைய நிகழ்வுகள்:

• dragenter - இழுக்கக்கூடிய இலக்கை ஏற்றுக்கொள்ளக்கூடிய துளி இலக்கின் பகுதிக்குள் இழுக்கக்கூடிய இலக்கு நுழையும் போது நிகழ்வு நிகழ்கிறது.
• ragleave - இழுக்கப்பட்ட பொருள் (இழுக்கக்கூடிய இலக்கு) அதை ஏற்றுக்கொள்ளக்கூடிய தனிமத்தின் (டிராப் டார்கெட்) எல்லைகளை விட்டு வெளியேறும்போது நிகழ்வு ஏற்படுகிறது.
• டிராகோவர் - இழுக்கக்கூடிய இலக்கு அதை ஏற்றுக்கொள்ளக்கூடிய ஒரு உறுப்பு (இலக்கு) பகுதிக்குள் நகரும் போது நிகழ்வு ஏற்படுகிறது.
• துளி - பயனர் இழுக்கக்கூடிய பொருளை ஏற்றுக்கொள்ளக்கூடிய ஒரு உறுப்பு (டிராப் டார்கெட்) பகுதியில் வெளியிடும்போது நிகழ்வு ஏற்படுகிறது.

அனிமேஷன் நிகழ்வுகள்

CSS அனிமேஷன் இயங்கும் போது நிகழக்கூடிய மூன்று நிகழ்வுகள்:

• animationstart - CSS அனிமேஷன் தொடங்கும் போது நிகழ்கிறது.
• அசைவூட்டல் - ஒரு CSS அனிமேஷன் மீண்டும் மீண்டும் செயல்படுத்தப்படும் போது நிகழ்கிறது.
• animationend - எப்போது நிகழ்கிறது CSS அனிமேஷன்முடிந்தது.

கிளிப்போர்டு நிகழ்வுகள்

• நகல் - பயனர் ஒரு உறுப்பு உள்ளடக்கத்தை நகலெடுக்கும் போது நிகழ்வு ஏற்படுகிறது. பயனர் ஒரு உறுப்பை நகலெடுக்கும் போது நகல் நிகழ்வு நிகழ்கிறது (எடுத்துக்காட்டாக, img உறுப்புடன் உருவாக்கப்பட்ட படங்கள்). நகல் நிகழ்வு முதன்மையாக வகை="உரை" கொண்ட உள்ளீட்டு கூறுகளுக்குப் பயன்படுத்தப்படுகிறது.
• வெட்டு - பயனர் ஒரு உறுப்பு உள்ளடக்கத்தை வெட்டும்போது நிகழ்வு ஏற்படுகிறது.
• ஒட்டு - பயனர் சில உள்ளடக்கத்தை ஒரு உறுப்புக்குள் ஒட்டும்போது நிகழ்வு ஏற்படுகிறது.

நிகழ்வுகளை அச்சிடுங்கள்

• afterprint - பக்கம் அச்சிடத் தொடங்கும் போது (அதாவது, உரையாடல் பெட்டியில் உள்ள அச்சு பொத்தானைக் கிளிக் செய்த பிறகு) அல்லது அச்சு உரையாடல் பெட்டி மூடப்பட்டிருந்தால் நிகழ்வு நிகழ்கிறது.
• முன் அச்சிடுதல் - பக்கம் அச்சிடப்படுவதற்கு முன் நிகழ்வு நிகழ்கிறது, அதாவது. அச்சு உரையாடல் பெட்டியைத் திறப்பதற்கு முன்.

மாற்றம் நிகழ்வுகள்

• transitionend - CSS மாற்றம் முடிந்ததும் நிகழ்வு சுடுகிறது. குறிப்பு: ஒரு மாற்றம் முடிவதற்கு முன் அகற்றப்பட்டால் (உதாரணமாக, என்றால் CSS சொத்து transition-property அகற்றப்பட்டது), பின்னர் transitionend நிகழ்வு சுடப்படாது.

சேவையகம் அனுப்பிய நிகழ்வுகள்

• பிழை - நிகழ்வு மூலத்தில் பிழை ஏற்படும் போது நிகழ்வு ஏற்படுகிறது. தகவல் தொடர்பு உடைந்தால் பிழை பொதுவாக ஏற்படுகிறது. இது நடந்தால், EventSource ஆப்ஜெக்ட் தானாகவே சேவையகத்துடன் இணைக்க முயற்சிக்கும்.
• open - நிகழ்வு மூலத்திற்கான இணைப்பு திறந்திருக்கும் போது நிகழ்வு நிகழ்கிறது.
• செய்தி - நிகழ்வு மூலத்தின் மூலம் ஒரு செய்தியைப் பெறும்போது நிகழ்வு ஏற்படுகிறது.
  செய்தி நிகழ்வு பொருள் பின்வரும் பண்புகளை ஆதரிக்கிறது:
  • தரவு - செய்தியைக் கொண்டுள்ளது.
  • தோற்றம் - நிகழ்வைத் தூண்டிய ஆவணத்தின் URL.
  • lastEventId - கடைசியாக பெறப்பட்ட செய்தியின் அடையாளங்காட்டி (ஐடி).

ஊடக நிகழ்வுகள்

ஆடியோ/வீடியோ ஏற்றுதல் செயல்முறையின் போது, ​​நிகழ்வுகள் பின்வரும் வரிசையில் நிகழும்: loadstart -> durationchange -> loadedmetadata -> loadeddata -> முன்னேற்றம் -> canplay -> canplaythrough .

• abort - ஆடியோ/வீடியோ ஏற்றுதல் தடைபடும் போது நிகழ்வு ஏற்படுகிறது. மீடியா தரவின் பதிவிறக்கம் குறுக்கிடப்பட்டால் (ரத்துசெய்யப்பட்டது) இந்த நிகழ்வு நிகழ்கிறது, பிழை ஏற்பட்டதால் அல்ல.
• பிழை - ஆடியோ/வீடியோவை ஏற்றும்போது பிழை ஏற்படும் போது நிகழ்வு ஏற்படுகிறது.
• ஸ்தம்பித்தது - உலாவி மீடியா தரவைப் பெற முயற்சிக்கும் போது நிகழ்வு நிகழ்கிறது, ஆனால் தரவு கிடைக்கவில்லை.
• - குறிப்பிட்ட ஆடியோ/வீடியோவை உலாவி தேடத் தொடங்கும் போது நிகழ்வு நிகழ்கிறது, அதாவது. பதிவிறக்க செயல்முறை தொடங்கும் போது.
• durationchange - ஆடியோ/வீடியோவின் கால அளவு மாறும்போது நிகழ்வு ஏற்படுகிறது. ஆடியோ/வீடியோ ஏற்றப்பட்டால், கால அளவு "NaN" இலிருந்து ஆடியோ/வீடியோவின் உண்மையான காலம் வரை மாறுபடும்.
• loadedmetadata - குறிப்பிடப்பட்ட ஆடியோ/வீடியோவுக்கான மெட்டாடேட்டா ஏற்றப்படும்போது, ​​நிகழ்வானது. ஆடியோ/வீடியோ மெட்டாடேட்டாவில் பின்வருவன அடங்கும்: காலம், அளவு (வீடியோ மட்டும்) மற்றும் உரை டிராக்.
• loadeddata - ஊடகத்தின் முதல் சட்டகம் ஏற்றப்பட்ட பிறகு நிகழ்வு நிகழ்கிறது.
• முன்னேற்றம் - குறிப்பிட்ட ஆடியோ/வீடியோவை உலாவி பதிவிறக்கும் போது நிகழ்வு ஏற்படுகிறது.
• canplay - குறிப்பிட்ட ஆடியோ/வீடியோவை உலாவி இயக்கத் தொடங்கும் போது நிகழ்வு நிகழ்கிறது (அதாவது, ஆடியோ/வீடியோ ஸ்ட்ரீம் உலாவி அதை இயக்கத் தொடங்கும் அளவுக்கு இடையகப்படுத்தப்பட்டால்).
• canplaythrough - இடையகத்தை நிறுத்தாமல் குறிப்பிட்ட மீடியாவை உலாவி இயக்கும் நேரத்தில் நிகழ்வு நிகழ்கிறது.
• முடிந்தது - ஆடியோ/வீடியோ பிளேபேக் முடிந்ததும் (முடிவை அடைந்தது) நிகழ்வு நிகழும். "உங்கள் கவனத்திற்கு நன்றி", "பார்த்ததற்கு நன்றி" போன்ற செய்திகளைக் காட்ட இந்த நிகழ்வைப் பயன்படுத்தலாம்.
• இடைநிறுத்தம் - ஆடியோ/வீடியோ பிளேபேக் பயனர் அல்லது குறியீடு (நிரல்முறைப்படி) இடைநிறுத்தப்படும் போது நிகழ்வு ஏற்படுகிறது.
• பிளே - ஆடியோ/வீடியோ பிளேபேக் தொடங்கும் போது நிகழ்வு ஏற்படுகிறது. ஆடியோ/வீடியோ இடைநிறுத்தப்படாமல் இயங்கத் தொடங்கும் போது இது நிகழ்கிறது.
• விளையாடுவது - இடைநிறுத்தப்பட்ட அல்லது இடையகத்திற்காக நிறுத்தப்பட்ட பிறகு ஆடியோ/வீடியோ இயங்கும் போது நிகழ்வு நிகழ்கிறது.
• விகிதம் மாற்றம் - ஆடியோ/வீடியோ பிளேபேக் வேகம் மாறும்போது நிகழ்வு ஏற்படுகிறது.
• தேடுதல் - இயக்கப்படும் ஆடியோ/வீடியோவின் புதிய நேர நிலைக்கு பயனர் ஸ்லைடரை (மாற்றம்) நகர்த்தத் தொடங்கும் போது நிகழ்வு ஏற்படுகிறது.
• தேடப்பட்டது - ஸ்லைடரை (மாற்றம்) பயனர் இயக்கி முடித்த ஆடியோ/வீடியோவின் புதிய தற்காலிக நிலைக்கு நகர்த்தும்போது நிகழ்வு ஏற்படுகிறது. தேடப்பட்ட நிகழ்வு, தேடும் நிகழ்வுக்கு எதிரானது. தற்போதைய பின்னணி நிலையைப் பெற, ஆடியோ / வீடியோ பொருளின் தற்போதைய நேரப் பண்புகளைப் பயன்படுத்தவும்.
• timeupdate - இயக்கப்படும் ஆடியோ/வீடியோவின் நேர நிலை மாறும்போது நிகழ்வு நிகழ்கிறது.
  இந்த நிகழ்வு நிகழ்கிறது:
  • ஆடியோ/வீடியோ ஸ்ட்ரீமை இயக்கும் போது.
  • ஸ்லைடரை புதிய நேர நிலைக்கு நகர்த்தும்போது ஆடியோ/வீடியோ இயக்கப்படுகிறது.
  நேர புதுப்பிப்பு நிகழ்வு பெரும்பாலும் ஆடியோ/வீடியோ பொருளின் தற்போதைய நேர பண்புடன் இணைந்து பயன்படுத்தப்படுகிறது, இது தற்போது இயங்கும் ஆடியோ/வீடியோவின் தற்போதைய நேர நிலையை நொடிகளில் வழங்கும்.
• தொகுதி மாற்றம் - ஒவ்வொரு முறையும் விளையாடும் வீடியோ/ஆடியோ ஸ்ட்ரீமின் ஒலி அளவு மாறும்போது நிகழ்வு நிகழும்.
  இந்த நிகழ்வு எப்போது நிகழ்கிறது:
  • அளவை அதிகரிப்பது அல்லது குறைப்பது;
  • ஒலியை முடக்குதல் அல்லது முடக்குதல்.
• காத்திருப்பு - இடையகத்திற்காக வீடியோ நிறுத்தப்படும் போது நிகழ்வு நிகழ்கிறது.

பல்வேறு நிகழ்வுகள்

• மாற்று - பயனர் விவரங்கள் உறுப்பைத் திறக்கும் போது அல்லது மூடும் போது நிகழ்வு நிகழ்கிறது. விவர உறுப்பு கூடுதல் தகவலை உருவாக்க வடிவமைக்கப்பட்டுள்ளது, இது பயனர் தேவைக்கேற்ப பார்க்க அல்லது மறைக்க முடியும்.
• சக்கரம் - சுட்டி சக்கரம் ஒரு உறுப்புக்கு மேல் முன்னோக்கியோ அல்லது பின்னோக்கியோ உருட்டும் போது நிகழ்வு ஏற்படுகிறது.

பணிகள்

"விசைப்பலகையில் விசைப்பலகை (onkeypress)" நிகழ்வு சிக்கலானதா? அது இருந்தால், என்ன எளிய நிகழ்வுகளின் விளைவாக அது எழுகிறது?

எடுத்துக்காட்டாக, உங்களிடம் 2 p உறுப்புகள் உள்ளன மற்றும் பயனர் ஒரு p உறுப்புக்கு சொந்தமான பகுதியிலிருந்து மற்றொரு p உறுப்புக்கு சொந்தமான பகுதிக்கு சுட்டியை நகர்த்துகிறார். இந்த வழக்கில் என்ன நிகழ்வுகள் நிகழ்கின்றன, எந்த கூறுகள் அவற்றை உருவாக்குகின்றன?

நிகழ்வுகளின் தலைப்பு மிகவும் முக்கியமானது மற்றும் மிகவும் சுவாரஸ்யமானது. இதற்கு நன்றி, பயனர் மகிழ்ச்சியடையும் பல சுவாரஸ்யமான விஷயங்களை நீங்கள் செய்யலாம். JavaScript இல் நிகழ்வு என்பது பயனர் அல்லது உலாவியால் தூண்டப்படும் ஒரு குறிப்பிட்ட செயலாகும். எடுத்துக்காட்டாக, ஒரு நிகழ்வானது, ஒரு பொத்தானின் மீது மவுஸ் கிளிக், மவுஸ் இயக்கம், ஒரு உறுப்பில் கவனம் செலுத்துதல், உரைப் புலத்தில் மதிப்பை மாற்றுதல், உலாவி சாளரத்தின் அளவை மாற்றுதல் மற்றும் பலவாக இருக்கலாம்.

நான் அனைத்து நிகழ்வுகளையும் கொண்ட அட்டவணையை தயார் செய்துள்ளேன் (எனக்குத் தெரிந்தவை குறைந்தபட்சம்) ஜாவாஸ்கிரிப்டில். அதில், முதலில், நிகழ்வின் பெயர், இந்த நிகழ்வை உருவாக்கக்கூடிய கூறுகள் மற்றும் ஜாவாஸ்கிரிப்ட் நிகழ்வின் விளக்கத்தை நீங்கள் காணலாம்.

நிகழ்வு	ஒரு பொருள்	நிகழ்வுக்கான காரணம்
கருக்கலைப்பு	படம்	படத்தை ஏற்றுவதில் குறுக்கீடு
தெளிவின்மை		உறுப்பு கவனம் இழந்தது
மாற்றம்	FileUpload, Select, Text, Textarea	மதிப்பை மாற்றவும்
கிளிக் செய்யவும்	பகுதி, பொத்தான், தேர்வுப்பெட்டி, ஆவணம், இணைப்பு, ரேடியோ, மீட்டமை, சமர்ப்பி	ஒரு உறுப்பு மீது மவுஸ் கிளிக் செய்யவும்
DblClick	பகுதி, ஆவணம், இணைப்பு	ஒரு உறுப்பு மீது இருமுறை கிளிக் செய்யவும்
இழு போடு	ஜன்னல்	உலாவி சாளரத்திற்கு நகர்த்தவும்
கவனம்	பட்டன், தேர்வுப்பெட்டி, கோப்பு பதிவேற்றம், சட்டகம், அடுக்கு, கடவுச்சொல், ரேடியோ, மீட்டமை, தேர்ந்தெடு, சமர்ப்பி, உரை, உரை, சாளரம்	ஒரு உறுப்பு மீது கவனம் செலுத்துதல்
கீ டவுன்		விசைப்பலகையில் ஒரு விசையை அழுத்தவும்
கீ பிரஸ்	ஆவணம், படம், இணைப்பு, டெக்ஸ்டாரியா	விசைப்பலகையில் ஒரு விசையை வைத்திருத்தல்
கீஅப்	ஆவணம், படம், இணைப்பு, டெக்ஸ்டாரியா	விசைப்பலகையில் ஒரு விசையை வெளியிடுகிறது
ஏற்றவும்	ஆவணம், படம், அடுக்கு, சாளரம்
மவுஸ் டவுன்	பொத்தான், ஆவணம், இணைப்பு	மவுஸ் பொத்தானை அழுத்தியது
MouseMove	ஜன்னல்	இயக்கத்தில் சுட்டி
மவுஸ்அவுட்	பகுதி, அடுக்கு, இணைப்பு	சுட்டி உறுப்பு எல்லைகளுக்கு அப்பால் செல்கிறது
மவுஸ்ஓவர்	பகுதி, அடுக்கு, இணைப்பு	சுட்டி உறுப்புக்கு மேல் உள்ளது
மவுஸ்அப்	பொத்தான், ஆவணம், இணைப்பு	சுட்டி பொத்தான் வெளியிடப்பட்டது
நகர்வு	சட்டகம்	ஒரு உறுப்பு நகரும்
மீட்டமை	படிவம்	படிவத்தை மீட்டமைக்கவும்
அளவை மாற்றவும்	சட்டகம், ஜன்னல்	மறுஅளவிடுதல்
தேர்ந்தெடு	உரை, Textarea	உரை தேர்வு
சமர்ப்பிக்கவும்	படிவம்	தரவு பரிமாற்ற
இறக்கு	ஜன்னல்	தற்போதைய பக்கத்தை இறக்குகிறது

ஜாவாஸ்கிரிப்ட்டில் நிகழ்வுகளை எவ்வாறு பயன்படுத்துவது என்பதை இப்போது கண்டுபிடிப்போம். நிகழ்வு நடத்துபவர்கள் என்று அழைக்கப்படுபவர்கள் உள்ளனர். ஒரு குறிப்பிட்ட நிகழ்வு நிகழும்போது என்ன நடக்கும் என்பதை நிகழ்வு நடத்துபவர்கள் தீர்மானிக்கிறார்கள். JavaScript இல் நிகழ்வு கையாளுபவர்கள் பின்வரும் பொதுவான வடிவத்தைக் கொண்டுள்ளனர்:

OneEventName

அதாவது, முதலில் "on" என்ற முன்னொட்டு வரும், பின்னர் நிகழ்வின் பெயர், எடுத்துக்காட்டாக, பின்வரும் நிகழ்வு கையாளுபவர்கள்: onFocus, onClick, onSubmit மற்றும் பல. இங்கே கேள்விகள் இல்லை என்று நினைக்கிறேன். இப்போது முக்கிய கேள்வி: "ஜாவாஸ்கிரிப்டில் நிகழ்வுகளை எவ்வாறு பயன்படுத்துவது?". அவர்களின் பயன்பாட்டின் நோக்கம் மிகப்பெரியது, இப்போது நாம் ஒரு சிக்கலைப் பார்ப்போம். பக்கத்தில் மூன்று இணைப்புகள் உள்ளன. ஒவ்வொரு இணைப்புகளும் வெவ்வேறு பின்னணி நிறத்திற்கு பொறுப்பாகும் (எடுத்துக்காட்டாக, வெள்ளை, மஞ்சள் மற்றும் பச்சை). முதலில் பின்னணி வெள்ளை. ஒரு குறிப்பிட்ட இணைப்பில் உங்கள் சுட்டியை நகர்த்தும்போது, ​​பின்னணி நிறம் மாறுகிறது. நீங்கள் சுட்டியை நகர்த்தும்போது, ​​பின்னணி வண்ணம் இயல்புநிலை நிறத்திற்குத் திரும்பும். நீங்கள் இணைப்பைக் கிளிக் செய்தால், பின்னணி வண்ணம் இயல்புநிலையாகத் தக்கவைக்கப்படும்.

ஒரு (
நிறம்: நீலம்;
உரை-அலங்காரம்: அடிக்கோடு;
கர்சர்: சுட்டி;
}


var default_color = "வெள்ளை";

செயல்பாடு setTempColor(நிறம்) (
document.bgColor = நிறம்;
}

செயல்பாடு setDefaultColor(நிறம்) (
default_color = நிறம்;
}

செயல்பாடு defaultColor() (
document.bgColor = default_color;
}



வெள்ளை
மஞ்சள்
பச்சை

இந்த ஸ்கிரிப்ட் அல்லது ஜாவாஸ்கிரிப்ட் மற்றும் CSS ஆதரவுடன் ஒரு முழு HTML பக்கத்தைப் பார்ப்போம் (வேறுவிதமாகக் கூறினால், இது DHTML இன் உதாரணம்). முதலில் வழக்கமான HTML குறிச்சொற்களை வரவும், எந்த HTML பக்கமும் தொடங்கும். அடுத்து, கொடுக்கப்பட்ட பக்கத்தில் உள்ள அனைத்து இணைப்புகளும் நீல நிறமாகவும், அடிக்கோடிடப்பட்டதாகவும், அவற்றில் உள்ள மவுஸ் பாயிண்டர் "பாயிண்டர்" வடிவில் இருக்க வேண்டும் என்றும் ஒரு பாணியை உருவாக்குகிறோம். நீங்கள் கூறலாம்: "நீங்கள் ஏன் ஒரு பாணியை அமைக்க வேண்டும்? எல்லாவற்றிற்கும் மேலாக, இணைப்புகள் சரியாக இருக்கும்." அது சரி, இணைப்புகள், ஆனால் எங்களிடம் அத்தகைய இணைப்புகள் இல்லை (எல்லாவற்றிற்கும் மேலாக, குறிச்சொல்லில் href பண்புக்கூறு இல்லை), எனவே அவை இயல்பாகவே எளிய கருப்பு உரையாக இருக்கும் (இருப்பினும், நீங்கள் உரையையும் கிளிக் செய்யலாம்). எனவே, பாணி அவசியம். நீங்கள் அதை அகற்றி என்ன நடக்கிறது என்று பார்க்கலாம். இன்னும் சிறப்பாக, href பண்புக்கூறை (எந்த மதிப்புடனும், காலியாக இருந்தாலும்) சேர்த்து, ஸ்கிரிப்ட் ஏன் வேலை செய்வதை நிறுத்தியது என்பதை விளக்கவும். பின்னர் ஜாவாஸ்கிரிப்ட் தொடங்குகிறது. இயல்புநிலை நிறத்திற்கு பொறுப்பான ஒரு மாறி default_color ஐ உருவாக்குகிறோம். அடுத்து மூன்று செயல்பாடுகள் வரும்:

நிறத்தை தற்காலிகமாக மாற்றுவதற்கு setTempColor() செயல்பாடு பொறுப்பாகும்.

இயல்புநிலை நிறத்தை மாற்றுவதற்கு setDefaultColor() செயல்பாடு பொறுப்பாகும்.

defaultColor() செயல்பாடு இயல்புநிலை பின்னணி நிறத்தை அமைக்கிறது.

பின்னர் நிகழ்வு ஹேண்ட்லர்கள் வடிவில் பண்புக்கூறுகளுடன் இணைப்புகள் உள்ளன. நீங்கள் ஒரு இணைப்பின் மீது சுட்டியை நகர்த்தும்போது, ​​MouseOver நிகழ்வு நிகழ்கிறது; அதன்படி, onMouseOver நிகழ்வு கையாளுபவர் setTempColor() செயல்பாட்டை அழைத்து, அதனுடன் தொடர்புடைய அளவுருவைக் கடந்து செல்கிறார். நீங்கள் ஒரு உறுப்பிலிருந்து சுட்டியை அகற்றும்போது, ​​MouseOut நிகழ்வு உயர்த்தப்படும், பின்னர் defaultColor() செயல்பாடு அழைக்கப்படுகிறது, இது பின்னணி நிறத்தை இயல்புநிலை நிறத்திற்கு அமைக்கிறது. இறுதியாக, சுட்டி இணைப்பை (onClick handler) கிளிக் செய்யும் போது, ​​setDefaultColor() செயல்பாடு அழைக்கப்படுகிறது, இது அளவுருவில் குறிப்பிடப்பட்ட வண்ணத்தை இயல்புநிலை பின்னணி நிறத்திற்கு அமைக்கிறது. நீங்கள் பார்க்க முடியும் என, எல்லாம் மிகவும் எளிது.

ஜாவாஸ்கிரிப்டில் நிகழ்வுகளைப் பயன்படுத்துவதற்கான கொள்கை இதுதான், பின்னர் எல்லாம் உங்கள் கற்பனையைப் பொறுத்தது!

சில நிரல்களைப் பயன்படுத்துகிறது ஜாவாஸ்கிரிப்ட் நிகழ்வுபயனர் உள்ளீட்டுடன் நேரடியாக வேலை செய்யுங்கள். நிகழ்வின் தருணம் மற்றும் அத்தகைய தொடர்புகளின் வரிசையை முன்கூட்டியே கணிக்க முடியாது.

நிகழ்வு நடத்துபவர்கள்

விசையை மீண்டும் வெளியிடுவதற்கு முன்பு அழுத்தும் தருணத்தைப் பிடிக்க அதன் நிலையை தொடர்ந்து படிப்பதன் மூலம் விசை அழுத்தத்திற்கு நீங்கள் எதிர்வினையாற்றலாம்.

பழமையான இயந்திரங்களில் தரவு உள்ளீடு இப்படித்தான் செயலாக்கப்பட்டது. விசை அழுத்தத்தைக் கண்டறிந்து அதை வரிசைப்படுத்துவது மிகவும் மேம்பட்டது. நிரல் புதிய நிகழ்வுகளின் வரிசையை அவ்வப்போது சரிபார்த்து, அங்கு கண்டறிவதற்கு எதிர்வினையாற்றலாம். இந்த வழக்கில், நிரல் வரிசையை ஸ்கேன் செய்து அடிக்கடி செய்ய நினைவில் கொள்ள வேண்டும்.

ஒரு விசையை அழுத்துவதிலிருந்து நிரல் இந்த நிகழ்வைக் கண்டறியும் வரை, அது உண்மையில் கோரிக்கைகளுக்கு பதிலளிக்காது. இந்த அணுகுமுறை வாக்குப்பதிவு (கணக்கெடுப்பு) என்று அழைக்கப்படுகிறது.

பெரும்பாலான புரோகிராமர்கள் முடிந்தால் அதைத் தவிர்க்க முயற்சி செய்கிறார்கள்.

நிகழ்வுகள் நிகழும்போது அதற்கு எதிர்வினையாற்றும் திறனைக் குறியீட்டுக்கு வழங்கும் அமைப்பைச் செயல்படுத்துவதே சிறந்த வழி. குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் நிகழ்வுகளுக்கு ஹேண்ட்லர் செயல்பாடுகளை பதிவு செய்யும் திறனை வழங்குவதன் மூலம் உலாவிகள் இதை செயல்படுத்துகின்றன:

ஹேண்ட்லரை இயக்க இந்த ஆவணத்தில் கிளிக் செய்யவும்.

addEventListener("கிளிக்", செயல்பாடு() ( console.log("நீங்கள் கிளிக் செய்துள்ளீர்கள்!"); ));

addEventListener செயல்பாடு பதிவு செய்யப்பட்டுள்ளது, எனவே முதல் வாதத்தால் விவரிக்கப்பட்ட நிகழ்வு நிகழும் போதெல்லாம் அதன் இரண்டாவது வாதம் அழைக்கப்படுகிறது.

நிகழ்வுகள் மற்றும் DOM முனைகள்

ஒவ்வொரு உலாவி நிகழ்வு ஹேண்ட்லரும் ஒரு சூழலில் பதிவு செய்யப்பட்டுள்ளது. addEventListener செயல்பாடு என்று அழைக்கப்படும் போது, ​​​​இது முழு சாளரத்திற்கும் ஒரு முறையாக அழைக்கப்படுகிறது, ஏனெனில் உலாவியில் உலகளாவிய வரம்பு சமமாக உள்ளது சாளர பொருள். ஒவ்வொரு DOM உறுப்புக்கும் அதன் சொந்த addEventListener முறை உள்ளது, இது அந்த உறுப்பில் குறிப்பாக நிகழ்வுகளைக் கேட்க உங்களை அனுமதிக்கிறது:

என்னை கிளிக் செய்யவும்

இங்கு கையாள்பவர் இல்லை.

var பொத்தான் = document.querySelector("பொத்தான்"); button.addEventListener("கிளிக்", செயல்பாடு() ( console.log("பட்டன் கிளிக் செய்யப்பட்டது."); ));

IN இந்த எடுத்துக்காட்டில்கையாளுபவர் பொத்தான் முனையுடன் இணைக்கப்பட்டுள்ளது. ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகள் ஹேண்ட்லரை சுடுகின்றன, ஆனால் மீதமுள்ள ஆவணத்தில் கிளிக் செய்வதில்லை.

முனையின் ஆன்க்ளிக் பண்புக்கூறை அமைப்பதன் மூலம், அதே முடிவைப் பெறுவோம். ஆனால் ஒரு முனையில் ஒரு கிளிக் பண்புக்கூறு மட்டுமே உள்ளது, எனவே நீங்கள் ஒரு முனைக்கு ஒரு ஹேண்ட்லரை மட்டுமே பதிவு செய்ய முடியும். addEventListener முறையானது எத்தனை ஹேண்ட்லர்களையும் சேர்க்க உங்களை அனுமதிக்கிறது. இந்த வழியில் ஏற்கனவே பதிவு செய்யப்பட்ட செயலியை தற்செயலாக மாற்றுவதற்கு எதிராக நாங்கள் காப்பீடு செய்யப்படுகிறோம்.

removeEventListener முறை addEventListener போன்ற வாதங்களுடன் அழைக்கப்படுகிறது. இது கையாளுதலை நீக்குகிறது:

ஒரு முறை பொத்தான் var பொத்தான் = document.querySelector("பொத்தான்"); செயல்பாடு ஒருமுறை() ( console.log("Done."); button.removeEventListener("கிளிக்", ஒருமுறை); ) button.addEventListener("கிளிக்", ஒருமுறை);

ஹேண்ட்லர் செயல்பாட்டை ரத்து செய்ய, அதற்கு ஒரு பெயரைக் கொடுக்கிறோம் (எடுத்துக்காட்டாக, ஒரு முறை ). எனவே அதை addEventListener மற்றும் removeEventListener இரண்டிற்கும் அனுப்புவோம்.

நிகழ்வு பொருள்கள்

மேலே உள்ள உதாரணங்களில் நாங்கள் அதைக் குறிப்பிடவில்லை என்றாலும், ஜாவாஸ்கிரிப்ட் நிகழ்வு ஹேண்ட்லர்கள் செயல்பாடு ஒரு வாதமாக அனுப்பப்பட்டது: நிகழ்வு பொருள். இது நிகழ்வைப் பற்றிய கூடுதல் தகவல்களை வழங்குகிறது. எடுத்துக்காட்டாக, எந்த மவுஸ் கீ அழுத்தப்பட்டது என்பதை அறிய விரும்பினால், எந்த நிகழ்வின் பொருளின் மதிப்பை நாம் பெற வேண்டும்:

ஏதேனும் மவுஸ் கீ var பட்டன் = document.querySelector("பொத்தான்") மூலம் என்னைக் கிளிக் செய்யவும்; button.addEventListener("மவுஸ் டவுன்", செயல்பாடு(நிகழ்வு) (எனில் (நிகழ்வு ); இல்லையெனில் (event.which == 3) console.log("வலது பொத்தான்");));

ஒரு பொருளில் சேமிக்கப்படும் தகவல் நிகழ்வின் வகையைப் பொறுத்து மாறுபடும். பொருளின் வகைப் பண்பு எப்போதும் நிகழ்வை அடையாளப்படுத்தும் சரத்தைக் கொண்டிருக்கும் (உதாரணமாக, "கிளிக்" அல்லது "மவுஸ் டவுன்").

பரவுகிறது

பெற்றோர் முனைகளுக்காக பதிவுசெய்யப்பட்ட நிகழ்வு கையாளுபவர்கள் (ஜாவாஸ்கிரிப்ட் டச் நிகழ்வுகள் போன்றவை) குழந்தை உறுப்புகளில் நிகழும் நிகழ்வுகளையும் பெறுவார்கள். ஒரு பத்தியின் உள்ளே ஒரு பொத்தானைக் கிளிக் செய்தால், பத்தியின் நிகழ்வு கையாளுபவர்களும் பெறுவார்கள் நிகழ்வைக் கிளிக் செய்யவும்.

ஒரு நிகழ்வு அது நிகழ்ந்த முனையிலிருந்து, பெற்றோர் முனை மற்றும் ஆவண மூலத்திற்கு பரவுகிறது. ஒரு குறிப்பிட்ட முனையில் பதிவுசெய்யப்பட்ட அனைத்து கையாளுபவர்களும் நடவடிக்கை எடுத்த பிறகு, முழு சாளரத்திற்கும் பதிவுசெய்த கையாளுபவர்கள் நிகழ்விற்கு பதிலளிக்க முடியும்.

எந்த நேரத்திலும், நிகழ்வு நடத்துபவர் நிகழ்வை மேலும் பரப்புவதைத் தடுக்க, நிகழ்வுப் பொருளின் மீது நிறுத்தப் பரப்புதல் முறையை அழைக்கலாம். நீங்கள் மற்றொரு ஊடாடும் உறுப்புக்குள் ஒரு பொத்தானைக் கொண்டிருக்கும்போது இது பயனுள்ளதாக இருக்கும், மேலும் வெளிப்புற உறுப்புகளைக் கிளிக் செய்வதற்குக் குறிப்பிடப்பட்ட நடத்தையைத் தூண்டுவதற்கு பொத்தானைக் கிளிக் செய்ய விரும்பவில்லை.

பின்வரும் எடுத்துக்காட்டில், பொத்தான் மற்றும் பத்தி இரண்டிற்கும் "மவுஸ் டவுன்" ஹேண்ட்லர்களைப் பதிவு செய்கிறோம். நீங்கள் வலது கிளிக் செய்யும் போது (ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகள்), கையாளுபவர் stopPropagation முறையை அழைக்கிறார், இது பத்தி கையாளுதலை இயங்கவிடாமல் தடுக்கிறது. மற்றொரு மவுஸ் விசையுடன் பொத்தானைக் கிளிக் செய்தால், இரண்டு கையாளுபவர்களும் தொடங்கப்படுகின்றன:

ஒரு பத்தி மற்றும் அதில் ஒரு பொத்தான்.

var para = document.querySelector("p"); var பொத்தான் = document.querySelector("பொத்தான்"); para.addEventListener("mousedown", function() ( console.log("பத்திக்கான ஹேண்ட்லர்."); )); button.addEventListener("மவுஸ் டவுன்", செயல்பாடு(நிகழ்வு) (console.log("பொத்தானுக்கு கையாளுபவர்."); என்றால் (event.which == 3) event.stopPropagation(); ));

பெரும்பாலான நிகழ்வுப் பொருள்கள் இலக்குப் பண்புகளைக் கொண்டுள்ளன, அவை அவை நிகழ்ந்த முனையை சுட்டிக்காட்டுகின்றன. முனையிலிருந்து பரவும் சில நிகழ்வுகளைத் தற்செயலாகக் கையாளுவதைத் தவிர்க்க இந்தச் சொத்தைப் பயன்படுத்தலாம்.

ஒரு குறிப்பிட்ட வகை நிகழ்வின் நோக்கத்தை நீட்டிக்க JavaScript நிகழ்வு இலக்கையும் நீங்கள் பயன்படுத்தலாம். எடுத்துக்காட்டாக, பொத்தான்களின் நீண்ட பட்டியலைக் கொண்ட ஒரு முனை உங்களிடம் இருந்தால், வெளிப்புற முனைக்கு ஒரு கிளிக் ஹேண்ட்லரைப் பதிவுசெய்வது மிகவும் வசதியானது மற்றும் எல்லா பொத்தான்களுக்கும் ஹேண்ட்லர் நிகழ்வுகளைப் பதிவு செய்வதை விட, பொத்தான் கிளிக் செய்யப்பட்டதா என்பதைக் கண்காணிக்க இலக்கு சொத்தைப் பயன்படுத்தவும்:

A B C document.body.addEventListener("கிளிக்", செயல்பாடு(நிகழ்வு) ((event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

இயல்புநிலை செயல்கள்

பல நிகழ்வுகள் அவற்றுடன் தொடர்புடைய இயல்புநிலை செயல்களைக் கொண்டுள்ளன. நீங்கள் ஒரு இணைப்பைக் கிளிக் செய்தால், அது உங்களை இணைப்பின் இலக்கு உறுப்புக்கு அழைத்துச் செல்லும். கீழ் அம்புக்குறியைக் கிளிக் செய்தால், உலாவி பக்கத்தை கீழே உருட்டும். நீங்கள் வலது கிளிக் செய்தால், சூழல் மெனு திறக்கும்.

பெரும்பாலான நிகழ்வு வகைகளுக்கு, இயல்புநிலை செயல்கள் செய்யப்படுவதற்கு முன்பு JavaScript நிகழ்வு கையாளுபவர்கள் அழைக்கப்படுவார்கள். இயல்புநிலை நடத்தை ஏற்படுவதை நீங்கள் விரும்பவில்லை எனில், நிகழ்வுப் பொருளில் தடுக்கும் டீஃபால்ட் முறையை நீங்கள் அழைக்க வேண்டும்.

தனிப்பயன் விசைப்பலகை குறுக்குவழிகள் அல்லது சூழல் மெனுக்களை செயல்படுத்த இதைப் பயன்படுத்தவும். அல்லது, பயனர்கள் எதிர்பார்க்கும் நடத்தையை மேலெழுத. பின்தொடர முடியாத ஒரு இணைப்பு கீழே உள்ளது:

MDN var இணைப்பு = document.querySelector("a"); link.addEventListener("கிளிக்", செயல்பாடு(நிகழ்வு) (console.log("இல்லை."); event.preventDefault(); ));

இதைச் செய்ய உங்களுக்கு நல்ல காரணம் இல்லாவிட்டால் இதைச் செய்ய வேண்டாம்.

உலாவியைப் பொறுத்து, சில நிகழ்வுகள் இடைமறிக்கப்படாமல் இருக்கலாம். IN கூகிள் குரோம்எடுத்துக்காட்டாக, தற்போதைய தாவலை (Ctrl-W அல்லது Command-W) மூடுவதற்கான விசைப்பலகை குறுக்குவழியை (ஜாவாஸ்கிரிப்ட் நிகழ்வு கீகோட்) ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி செயலாக்க முடியாது.

முக்கிய நிகழ்வுகள்

பயனர் விசைப்பலகையில் ஒரு விசையை அழுத்தினால், உலாவி "கீடவுன்" நிகழ்வை இயக்குகிறது. அவர் சாவியை வெளியிடும் போது, ​​"கீஅப்" நிகழ்வு சுடுகிறது:

நீங்கள் V விசையை அழுத்தும்போது இந்தப் பக்கம் ஊதா நிறமாக மாறும்.

addEventListener("கீ டவுன்", செயல்பாடு(நிகழ்வு) ((event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("கீஅப்", செயல்பாடு(நிகழ்வு) ((event.keyCode == 86) document.body.style.background = ""; ));

பயனர் ஒரு விசையை அழுத்தி வைத்திருக்கும் போது அல்லது விசையை கீழே வைத்திருக்கும் போது இந்த நிகழ்வு சுடும். எடுத்துக்காட்டாக, அம்புக்குறி விசையை அழுத்துவதன் மூலம் விளையாட்டில் ஒரு கதாபாத்திரத்தின் வேகத்தை அதிகரிக்க விரும்பினால், விசையை வெளியிடுவதன் மூலம் அதை மீண்டும் குறைக்க விரும்பினால், ஒவ்வொரு முறையும் விசையை அழுத்தும் வேகத்தை அதிகரிக்காமல் கவனமாக இருக்க வேண்டும்.

முந்தைய உதாரணம், நிகழ்வுப் பொருளின் கீகோட் ஜாவாஸ்கிரிப்ட் பண்பைப் பயன்படுத்தியது. அதன் உதவியுடன், எந்த விசையை அழுத்தியது அல்லது வெளியிடப்பட்டது என்பது தீர்மானிக்கப்படுகிறது. ஒரு விசையின் எண் குறியீட்டை உண்மையான விசைக்கு எவ்வாறு மொழிபெயர்ப்பது என்பது எப்போதும் தெளிவாக இருக்காது.

எழுத்து மற்றும் எண் முக்கிய மதிப்புகளைப் படிக்க யூனிகோட் எழுத்துக்குறி குறியீடு பயன்படுத்தப்படுகிறது. இது விசையில் சுட்டிக்காட்டப்பட்ட எழுத்து (பெரிய எழுத்து) அல்லது எண்ணுடன் தொடர்புடையது. சரங்களுக்கான charCodeAt முறை இந்த மதிப்பைப் பெற உங்களை அனுமதிக்கிறது:

console.log("வயலட்".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

மற்ற விசைகள் குறைவான கணிக்கக்கூடிய முக்கிய குறியீடுகளுடன் தொடர்புடையவை. சிறந்த வழிஉங்களுக்குத் தேவையான குறியீட்டைத் தீர்மானிப்பது சோதனைக்குரிய விஷயம். கீபிரஸ் நிகழ்வு ஹேண்ட்லரைப் பதிவுசெய்து, அது பெறும் கீகோடுகளைப் படம்பிடித்து, விரும்பிய விசையை அழுத்துகிறது.

Shift , Ctrl , Alt போன்ற விசைகள் வழக்கமான விசைகள் போன்ற நிகழ்வுகளை உருவாக்குகின்றன. ஆனால் விசை சேர்க்கைகளைக் கண்காணிக்கும் போது, ​​விசைப்பலகை நிகழ்வுகள் மற்றும் ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகளின் பண்புகள் மூலம் அந்த விசைகள் அழுத்தப்படுகிறதா என்பதையும் நீங்கள் தீர்மானிக்கலாம்: shiftKey , ctrlKey , altKey மற்றும் metaKey :

தொடர, Ctrl-Spaceஐ அழுத்தவும்.

addEventListener("கீடவுன்", செயல்பாடு(நிகழ்வு) ((event.keyCode == 32 && event.ctrlKey) console.log("தொடர்கிறது!"); ));

"கீடவுன்" மற்றும் "கீஅப்" நிகழ்வுகள் உண்மையான விசை அழுத்தங்களைப் பற்றிய தகவல்களை வழங்குகின்றன. ஆனால் உள்ளீட்டு உரையே நமக்குத் தேவைப்பட்டால் என்ன செய்வது? கீகோடுகளிலிருந்து உரையை மீட்டெடுப்பது சிரமமாக உள்ளது. இதற்கு ஒரு நிகழ்வு உள்ளது, "கீபிரஸ்", இது "கீ டவுன்" முடிந்த உடனேயே சுடுகிறது. விசையை அழுத்தும் வரை இது "கீ டவுன்" உடன் மீண்டும் நிகழ்கிறது. ஆனால் எழுத்துக்கள் உள்ளிடப்பட்ட விசைகளுக்கு மட்டுமே.

நிகழ்வுப் பொருளில் உள்ள சார்கோட் பண்பு யூனிகோட் எழுத்துக்குறிக் குறியீடாக விளங்கக்கூடிய ஒரு குறியீட்டைக் கொண்டுள்ளது. இந்தக் குறியீட்டை ஒற்றை எழுத்துச் சரமாக மாற்ற, String.fromCharCode செயல்பாட்டைப் பயன்படுத்தலாம்.

இந்தப் பக்கத்தில் உள்ளீட்டு மையத்தை அமைத்து, எதையாவது தட்டச்சு செய்யவும்.

addEventListener("விசை அழுத்துதல்", செயல்பாடு(நிகழ்வு) ( console.log(String.fromCharCode(event.charCode)); ));

நிகழ்வு நிகழும் DOM முனையானது, விசையை அழுத்தும் போது உள்ளீடு கவனம் செலுத்திய உறுப்பைப் பொறுத்தது. வழக்கமான முனைகளில் உள்ளீடு கவனம் இருக்க முடியாது (நீங்கள் டேபிண்டெக்ஸ் பண்புக்கூறை அமைக்கும் வரை), ஆனால் இணைப்புகள், பொத்தான்கள் மற்றும் படிவ புலங்கள் போன்ற கூறுகள் முடியும்.

எந்த குறிப்பிட்ட உறுப்புக்கும் உள்ளீடு கவனம் இல்லை என்றால், முக்கிய நிகழ்வுகள் மற்றும் JavaScript டச் நிகழ்வுகளுக்கான இலக்கு முனை document.body ஆகும்.

மவுஸ் கிளிக்குகள்

மவுஸ் பட்டனை அழுத்துவதும் தொடர்ச்சியான நிகழ்வுகளைத் தூண்டும். "மவுஸ் டவுன்" மற்றும் "மவுஸ்அப்" நிகழ்வுகள் "கீ டவுன்" மற்றும் "கீஅப்" நிகழ்வுகளைப் போலவே இருக்கும். சுட்டி பொத்தானை அழுத்தி வெளியிடும்போது அவை தூண்டப்படுகின்றன. இந்த நிகழ்வுகள் DOM முனைகளில் நிகழும்.

மவுஸ் பிரஸ் மற்றும் ரிலீஸ் இரண்டையும் கொண்ட பகிரப்பட்ட முனைக்கு, மவுஸ்அப் நிகழ்வுக்குப் பிறகு கிளிக் நிகழ்வு நீக்கப்படும். எடுத்துக்காட்டாக, நீங்கள் ஒரு பொருளின் மீது மவுஸ் பொத்தானை அழுத்தி, பின்னர் கர்சரை மற்றொரு உருப்படிக்கு நகர்த்தி, பொத்தானை விடுவித்தால், இந்த இரண்டு உருப்படிகளையும் கொண்ட உறுப்பு மீது கிளிக் நிகழ்வு ஏற்படும்.

இரண்டு கிளிக்குகள் ஒன்றுக்கொன்று நெருக்கமாக ஏற்பட்டால், "dblclick" (இரட்டை கிளிக்) நிகழ்வும் நீக்கப்படும். இரண்டாவது கிளிக் செய்த பிறகு இது தோன்றும். மவுஸ் நிகழ்வு நடந்த இடத்தைப் பற்றிய சரியான தகவலைப் பெற, ஆவணத்தின் மேல் இடது மூலையில் தொடர்புடைய நிகழ்வின் ஆயத்தொலைவுகளை (பிக்சல்களில்) கொண்டிருக்கும் pageX மற்றும் pageY பண்புகளின் மதிப்பை நீங்கள் பெற வேண்டும்.

ஒரு பழமையான வரைதல் திட்டத்தின் செயல்படுத்தல் கீழே உள்ளது. ஒவ்வொரு முறையும் நீங்கள் ஆவணத்தில் (கர்சரின் கீழ்) சுட்டியைக் கிளிக் செய்தால், ஒரு புள்ளி சேர்க்கப்படும்:

உடல் (உயரம்: 200px; பின்னணி: பழுப்பு; ) .dot (உயரம்: 8px; அகலம்: 8px; எல்லை-ஆரம்: 4px; /* வட்டமான மூலைகள் */ பின்னணி: நீலம்; நிலை: முழுமையானது; ) addEventListener("கிளிக்", செயல்பாடு (நிகழ்வு) (var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (நிகழ்வு .pageY - 4) + "px"; document.body.appendChild(dot); ));

கிளையன்ட்எக்ஸ் மற்றும் கிளையன்ட்ஒய் பண்புகள் பேஜ்எக்ஸ் மற்றும் பேஜ்ஒய் போன்றது, ஆனால் அவை ஆவணத்தின் புலப்படும் பகுதியுடன் தொடர்புடையவை. getBoundingClientRect செயல்பாட்டின் மூலம் வழங்கப்படும் ஆயத்தொலைவுகளுடன் மவுஸ் ஆயத்தொகுப்புகளை ஒப்பிட்டுப் பார்க்க அவற்றைப் பயன்படுத்தலாம்.

சுட்டி இயக்கம்

ஒவ்வொரு முறையும் மவுஸ் நகரும் போது, ​​ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகளின் தொகுப்பிலிருந்து "மவுஸ்மூவ்" நிகழ்வு சுடப்படுகிறது. சுட்டியின் நிலையை கண்காணிக்க இதைப் பயன்படுத்தலாம். சுட்டி மூலம் உறுப்புகளை இழுக்கும் திறனை செயல்படுத்தும் போது இது பயன்படுத்தப்படுகிறது.

பின்வரும் எடுத்துக்காட்டில், நிரல் ஒரு பேனலைக் காட்டுகிறது மற்றும் நிகழ்வு ஹேண்ட்லர்களை அமைக்கிறது, இதனால் இழுக்கப்படும்போது, ​​​​பேனல் குறுகலாக அல்லது அகலமாக மாறும்:

பேனலின் அகலத்தை மாற்ற அதன் விளிம்பை இழுக்கவும்:

var lastX; // மவுஸ் var rect = document.querySelector ("div") இன் கடைசி X நிலையைக் கண்காணிக்கிறது; rect.addEventListener("மவுஸ் டவுன்", செயல்பாடு(நிகழ்வு) (எனில் (நிகழ்வு ); function buttonPressed(event) ((event.buttons == null) நிகழ்வை திருப்பியனுப்பினால்.இது != 0; இல்லையெனில் நிகழ்வு.பொத்தான்கள் "மவுஸ்மூவ்", நகர்த்தப்பட்டது); ) வேறு (var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = நிகழ்வு .pageX;))

"மவுஸ்மூவ்" ஹேண்ட்லர் முழு சாளரத்திற்கும் பதிவு செய்யப்பட்டுள்ளது என்பதை நினைவில் கொள்க. அளவை மாற்றும்போது பேனலுக்கு வெளியே மவுஸ் நகர்ந்தாலும், பேனலின் அகலத்தைப் புதுப்பித்து, மவுஸ் கீ வெளியிடப்படும்போது JavaScript டச் நிகழ்வுகளை நிறுத்துவோம்.

பயனர் மவுஸ் பொத்தானை வெளியிடும்போது பேனலின் அளவை மாற்றுவதை நிறுத்த வேண்டும். துரதிர்ஷ்டவசமாக, எல்லா உலாவிகளும் மவுஸ் மூவ் நிகழ்வுகளுக்கு எந்தப் பண்புகளை அமைக்கவில்லை. ஒரே மாதிரியான தகவலை வழங்கும் ஒரு நிலையான பொத்தான்கள் பண்பு உள்ளது, ஆனால் இது எல்லா உலாவிகளிலும் ஆதரிக்கப்படாது. அதிர்ஷ்டவசமாக, அனைத்து முக்கிய உலாவிகளும் ஒரு விஷயத்தை ஆதரிக்கின்றன: பொத்தான்கள் அல்லது எது . மேலே உள்ள எடுத்துக்காட்டில் உள்ள பட்டன் அழுத்தப்பட்ட செயல்பாடு முதலில் பொத்தான்களின் பண்பைப் பயன்படுத்த முயற்சிக்கிறது, அது கிடைக்கவில்லை என்றால், எதற்குச் செல்லும்.

மவுஸ் கர்சர் மேலே செல்லும்போது அல்லது ஒரு முனையை விட்டு வெளியேறும்போது, ​​"மவுஸ்ஓவர்" அல்லது "மவுஸ்அவுட்" நிகழ்வுகள் சுடப்படும். அவை மிதவை விளைவுகளை உருவாக்க, ஒருவித தலைப்பைக் காட்ட அல்லது ஒரு உறுப்பின் பாணியை மாற்ற பயன்படுத்தப்படலாம்.

அத்தகைய விளைவை உருவாக்க, மவுஸ்ஓவர் நிகழ்வு நிகழும்போது அதைக் காட்டத் தொடங்கி மவுஸ்அவுட் நிகழ்வுக்குப் பிறகு முடிவடைந்தால் மட்டும் போதாது. சுட்டி ஒரு முனையிலிருந்து அதன் குழந்தைகளில் ஒருவருக்கு நகரும் போது, ​​பெற்றோர் முனைக்கு "மவுஸ்அவுட்" நிகழ்வு ஏற்படுகிறது. மவுஸ் பாயிண்டர் முனையின் பரவல் வரம்பை விட்டு வெளியேறவில்லை என்றாலும்.

விஷயங்களை மோசமாக்க, இந்த ஜாவாஸ்கிரிப்ட் நிகழ்வுகள் மற்ற நிகழ்வுகளைப் போலவே பிரச்சாரம் செய்யப்படுகின்றன. கையாளுபவர் பதிவுசெய்யப்பட்ட சைல்டு நோட்களில் ஒன்றை மவுஸ் விட்டுச் செல்லும்போது, ​​"மவுஸ்அவுட்" நிகழ்வு எழுப்பப்படும்.

இந்தச் சிக்கலைச் சமாளிக்க, தொடர்புடைய இலக்கு நிகழ்வுப் பொருள் பண்புகளைப் பயன்படுத்தலாம். "மவுஸ்ஓவர்" நிகழ்வு நிகழும்போது, ​​எந்த உறுப்பு முன்பு நகர்த்தப்பட்டது என்பதைக் குறிக்கிறது. "மவுஸ்அவுட்" ஏற்பட்டால் - எந்த உறுப்புக்கு சுட்டிக்காட்டி நகர்த்தப்படுகிறது. தொடர்புடைய இலக்கு எங்கள் இலக்கு முனைக்கு வெளியே இருக்கும்போது மட்டுமே மவுஸ்ஓவர் விளைவை மாற்றுவோம்.

இந்த வழக்கில், சுட்டி அதன் வெளிப்புறத்திலிருந்து (அல்லது நேர்மாறாக) முனையின் மேல் வட்டமிடுவதால், நடத்தையை மாற்றுகிறோம்:

இந்தப் பத்தியின் மேல் உங்கள் சுட்டியைக் கொண்டு செல்லவும்.

var para = document.querySelector("p"); function isInside(node, target) ( (; node != null; node = node.parentNode) என்றால் (node ​​== target) true எனத் திரும்பினால்; ) para.addEventListener("mouseover", function(event) ( என்றால் ( !isInside (event.relatedTarget, para)) para.style.color = "சிவப்பு"; )); para.addEventListener("மவுஸ்அவுட்", செயல்பாடு(நிகழ்வு) (! isInside(event.relatedTarget, para)) para.style.color = ""; ));

isInside செயல்பாடு கொடுக்கப்பட்ட முனையின் பெற்றோர் இணைப்புகளை அல்லது அதை அடையும் வரை கண்காணிக்கும் மேல் பகுதிஆவணம் (முனை பூஜ்யமாக இருக்கும்போது). அல்லது நமக்குத் தேவையான மூல உறுப்பு காணப்படாது.

பின்வரும் எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி, CSS:ஹவர் போலி-தேர்வு கருவியைப் பயன்படுத்தி ஒரு மிதவை விளைவை உருவாக்குவது மிகவும் எளிதானது. ஆனால் ஹோவர் விளைவு என்பது இலக்கு முனையின் பாணியை மாற்றுவதை விட சிக்கலான ஒன்றை உள்ளடக்கியிருந்தால், நீங்கள் மவுஸ்ஓவர் மற்றும் மவுஸ் அவுட் நிகழ்வுகளைப் பயன்படுத்தி ஒரு தந்திரத்தைப் பயன்படுத்த வேண்டும் (ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகள்):

நிகழ்வுகளை உருட்டவும்

ஒவ்வொரு முறையும் ஒரு உறுப்பு ஸ்க்ரோல் செய்யப்படும்போது, ​​அதில் ஜாவாஸ்கிரிப்ட் ஸ்க்ரோல் நிகழ்வு சுடப்படும். உள்ளதைக் கண்காணிக்க இதைப் பயன்படுத்தலாம் இந்த நேரத்தில்பயனரால் பார்க்கப்பட்டது; காட்சிப் பகுதிக்கு வெளியே அமைந்துள்ள அனிமேஷனை முடக்க.

பின்வரும் எடுத்துக்காட்டில், ஆவணத்தின் மேல் வலது மூலையில் ஒரு முன்னேற்றப் பட்டியைக் காண்பிப்போம் மற்றும் அதைப் புதுப்பித்து, பக்கத்தின் கீழே உருட்டும்போது அது வெவ்வேறு வண்ணத் துண்டுகளால் நிரப்பப்படும்:

.progress (எல்லை: 1px திட நீலம்; அகலம்: 100px; நிலை: நிலையானது; மேல்: 10px; வலது: 10px; ) . முன்னேற்றம் > div (உயரம்: 12px; பின்னணி: நீலம்; அகலம்: 0%; ) உடல் (உயரம்: 2000px ;)

என்னை உருட்டவும்...

var bar = document.querySelector(".progress div"); addEventListener("சுருள்", செயல்பாடு() (var max = document.body.scrollHeight - innerHeight; var சதவீதம் = (pageYOffset / max) * 100; bar.style.width = சதவீதம் + "%"; ));

உறுப்பின் நிலை அல்லது நிலையான சொத்தை அமைப்பதன் மூலம், நிலையை அமைக்கும் அதே முடிவைப் பெறுகிறோம்: absolute . ஆனால் இது மற்ற ஆவணத்துடன் உறுப்புகளை உருட்டாமல் பூட்டுகிறது. இதன் விளைவாக, முன்னேற்றம் காட்டி மேல் மூலையில் நிலையானதாக இருக்கும். அதன் உள்ளே மற்றொரு உறுப்பு உள்ளது, அதன் அளவு தற்போதைய முன்னேற்றத்திற்கு ஏற்ப மாறுகிறது.

அகலத்தை அமைக்கும் போது px ஐ விட % ஐ அளவீட்டு அலகாகப் பயன்படுத்துகிறோம், இதனால் உறுப்புகளின் பரிமாணங்கள் முன்னேற்றப் பட்டியின் அளவிற்கு விகிதாசாரமாக மாறும்.

உலகளாவிய மாறி innerHeight சாளரத்தின் உயரத்தைக் கொண்டுள்ளது, ஆவணத்தின் மொத்த உருளக்கூடிய உயரத்திலிருந்து நாம் கழிக்க வேண்டும். ஆவணத்தின் அடிப்பகுதியை அடையும் போது நீங்கள் சாளரத்தை கீழே உருட்ட முடியாது. இன்னர்ஹெய்ட் இன்னர்வித்த்தையும் பயன்படுத்தலாம். pageYOffset (தற்போதைய உருள் பெட்டியின் நிலை) அனுமதிக்கப்பட்ட அதிகபட்ச ஸ்க்ரோல் பொசிஷனால் வகுத்து 100 ஆல் பெருக்கினால், முன்னேற்றப் பட்டிக்கான சதவீதத்தை நமக்குக் கிடைக்கும்.

ஜாவாஸ்கிரிப்ட் ஸ்க்ரோல் நிகழ்வில் PreventDefault என்று அழைப்பது ஸ்க்ரோலிங் செய்வதைத் தடுக்காது. ஸ்க்ரோலிங் நடந்த பிறகுதான் நிகழ்வு ஹேண்ட்லர் அழைக்கப்படுவார்.

உள்ளீடு கவனம் நிகழ்வுகள்

ஒரு உறுப்புக்கு உள்ளீடு கவனம் இருக்கும்போது, ​​உலாவி அதன் மீது "ஃபோகஸ்" நிகழ்வை இயக்குகிறது. உள்ளீடு கவனம் அகற்றப்படும் போது, ​​"மங்கலான" நிகழ்வு நீக்கப்பட்டது.

இந்த இரண்டு நிகழ்வுகளும் பரவுவதில்லை. குழந்தை உறுப்பு உள்ளீடு கவனம் செலுத்தும் போது, ​​பெற்றோர் உறுப்பு கையாளுபவருக்கு அறிவிக்கப்படாது.

பின்வரும் உதாரணம் ஒரு உதவிக்குறிப்பைக் காட்டுகிறது உரை புலம், இதில் தற்போது உள்ளீடு கவனம் உள்ளது:

பெயர்:

வயது:

var உதவி = document.querySelector("#help"); var புலங்கள் = document.querySelectorAll("உள்ளீடு"); (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

ஆவணம் காட்டப்படும் தாவல், உலாவி சாளரத்திற்கு பயனர் செல்லும்போது அல்லது வெளியேறும்போது சாளர பொருள் "கவனம்" மற்றும் "மங்கலான" நிகழ்வுகளைப் பெறுகிறது.

ஏற்ற நிகழ்வு

பக்கத்தை ஏற்றுவது முடிந்ததும், ஆவணத்தின் உடல் மற்றும் சாளரப் பொருட்களுக்கு JavaScript நிகழ்வு "லோட்" உயர்த்தப்படும். முழு ஆவணத்தையும் ஏற்ற வேண்டிய செயல்களின் துவக்கத்தை திட்டமிட இது பயன்படுகிறது. இந்தக் குறிச்சொல்லை எதிர்கொள்ளும்போது உள்ளடக்கம் உடனடியாகத் தொடங்கப்படும் என்பதை மறந்துவிடாதீர்கள். சில சமயங்களில் சீக்கிரம் ஆகிவிடும். எடுத்துக்காட்டாக, ஒரு ஸ்கிரிப்ட் ஆவணத்தின் சில பகுதிகளுக்குப் பிறகு ஏற்றப்படும் போது ஏதாவது செய்ய வேண்டும்.

மற்றும் வெளிப்புற கோப்புகளை ஏற்றும் ஸ்கிரிப்ட் குறிச்சொற்கள் "லோட்" நிகழ்வையும் கொண்டிருக்கும். அவற்றுடன் தொடர்புடைய கோப்பு பதிவிறக்கம் செய்யப்பட்டதை இது குறிக்கிறது. உள்ளீடு ஃபோகஸ் நிகழ்வுகளைப் போல, சுமை நிகழ்வுகள் பிரச்சாரம் செய்யப்படுவதில்லை.

நாம் ஒரு பக்கத்தை மூடும்போது அல்லது மற்றொரு பக்கத்திற்குச் செல்லும்போது (உதாரணமாக, இணைப்பைக் கிளிக் செய்வதன் மூலம்), "முன்பதிவு" நிகழ்வு நீக்கப்படும். ஆவணத்தை மூடிய பிறகு பயனர் தற்செயலாக அவர் பணிபுரிந்ததை இழப்பதைத் தடுக்க இது பயன்படுகிறது.

ஒரு பக்கத்தை இறக்குவதைத் தடுப்பது, ப்ரெண்ட்டிஃபால்ட் முறையைப் பயன்படுத்தி செய்யப்படுவதில்லை. அதற்கு பதிலாக, ஹேண்ட்லரிடமிருந்து ஒரு சரம் திரும்பும். இது ஒரு உரையாடல் பெட்டியில் பயன்படுத்தப்படுகிறது, இது பயனர் பக்கத்தில் இருக்க வேண்டுமா அல்லது அதை விட்டு வெளியேற வேண்டுமா என்று கேட்கும். தீங்கிழைக்கும் ஸ்கிரிப்ட் இயங்கினாலும், பயனர் பக்கத்தை விட்டு வெளியேறுவதற்கான வாய்ப்பைப் பெறுவதை இந்த வழிமுறை உறுதி செய்கிறது, இதன் நோக்கம் பார்வையாளரை பக்கத்தில் வைத்திருப்பதாகும்.

ஸ்கிரிப்ட் செயல்படுத்தல் வரிசை

பல்வேறு காரணிகள் ஸ்கிரிப்ட் செயல்படுத்தலைத் தூண்டலாம்: குறிச்சொல்லைப் படித்தல், நிகழ்வின் நிகழ்வு. requestAnimationFrame முறையானது, அடுத்த பக்கம் மீண்டும் வழங்கப்படுவதற்கு முன் ஒரு செயல்பாட்டு அழைப்பைக் குறிப்பிடுகிறது. இது ஸ்கிரிப்ட்களை இயக்குவதற்கான மற்றொரு வழியாகும்.

JavaScript தேர்ந்தெடுக்கப்பட்ட நிகழ்வுகள் மற்றும் மற்ற அனைத்தும் எந்த நேரத்திலும் சுடலாம், ஆனால் ஒரே ஆவணத்தில் ஒரே நேரத்தில் இரண்டு ஸ்கிரிப்டுகள் ஒருபோதும் சுடாது. ஒரு ஸ்கிரிப்ட் ஏற்கனவே இயங்கிக்கொண்டிருந்தால், மற்றொரு ஸ்கிரிப்ட் மூலம் திட்டமிடப்பட்ட நிகழ்வு ஹேண்ட்லர்கள் மற்றும் குறியீடு துணுக்குகள் தங்கள் முறை காத்திருக்க வேண்டும். ஸ்கிரிப்ட் நீண்ட நேரம் இயங்கும் போது ஆவணம் உறைந்து போவதற்கான காரணம் இதுதான். உலாவி கிளிக்குகள் மற்றும் பிற நிகழ்வுகளுக்கு பதிலளிக்காது, ஏனெனில் தற்போதைய ஸ்கிரிப்ட் இயங்கும் வரை நிகழ்வு கையாளுபவர்களை இயக்க முடியாது.

சில நிரலாக்க சூழல்கள் ஒரே நேரத்தில் இயங்கும் பல இழைகளை செயல்படுத்த உங்களை அனுமதிக்கின்றன. ஒரே நேரத்தில் பல பணிகளைச் செய்யும் திறனை வழங்குவதன் மூலம், நிரல் செயல்பாட்டின் வேகத்தை அதிகரிக்கலாம். ஆனால் ஒரே நேரத்தில் கணினியின் ஒரே பகுதிகளைப் பாதிக்கும் பல செயல்கள் நம்மிடம் இருக்கும்போது, ​​​​அவற்றைச் செயல்படுத்த நிரலுக்கு மிகவும் கடினமாகிறது.

நீங்கள் செயல்முறைகளை இயக்க வேண்டும் என்றால் பின்னணிபக்கத்தை உறைய வைக்காமல், இணையத் தொழிலாளர்கள் என்று அழைக்கப்படுவதை உலாவிகள் நமக்கு வழங்குகின்றன. இது ஒரு ஜாவாஸ்கிரிப்ட் சாண்ட்பாக்ஸ் ஆகும், இது முக்கிய நிரலுடன் ஆவணத்தில் இயங்குகிறது மற்றும் செய்திகளை அனுப்புதல் மற்றும் பெறுவதன் மூலம் மட்டுமே அதனுடன் தொடர்பு கொள்ள முடியும்.

code/squareworker.js எனப்படும் கோப்பில் பின்வரும் குறியீடு உள்ளது என்று வைத்துக்கொள்வோம்:

addEventListener("செய்தி", செயல்பாடு(நிகழ்வு) ( postMessage(event.data * event.data); ));

நீங்கள் ஸ்கொயர் செய்யும் எண் மிகப் பெரியது, கணக்கிடுவதற்கு நீளமானது, மேலும் நீங்கள் ஒரு பின்னணி நூலில் கணக்கீடு செய்ய வேண்டும் என்று கற்பனை செய்து பாருங்கள். இந்த குறியீடு இணைய பணியாளர்களைத் தொடங்குகிறது, சில செய்திகளை அனுப்புகிறது மற்றும் பதில்களை அச்சிடுகிறது:

var squareWorker = புதிய தொழிலாளி("code/squareworker.js"); squareWorker.addEventListener("செய்தி", செயல்பாடு(நிகழ்வு) ( console.log("பணியாளர் பதிலளித்தார்:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

postMessage செயல்பாடு பெறுநருக்கு செய்தி நிகழ்வைத் தூண்டும் செய்தியை அனுப்புகிறது. வலைத் தொழிலாளர்களை உருவாக்கிய ஸ்கிரிப்ட், Worker ஆப்ஜெக்ட் மூலம் செய்திகளை அனுப்புகிறது மற்றும் பெறுகிறது. இந்த பொருளைப் பயன்படுத்தி, சுற்றுச்சூழல் அதை உருவாக்கிய ஸ்கிரிப்டுடன் தொடர்பு கொள்கிறது, தகவலை அனுப்புகிறது மற்றும் அசல் ஸ்கிரிப்டுடன் அதன் உலகளாவிய நிலையில் கேட்கிறது.

டைமர்களை அமைத்தல்

setTimeout செயல்பாடு requestAnimationFrame போன்றது. இது பின்னர் அழைக்கப்படும் மற்றொரு செயல்பாட்டை அழைக்கிறது. ஆனால் அடுத்த முறை பக்கம் ரெண்டர் செய்யப்படும்போது செயல்பாட்டை அழைப்பதற்குப் பதிலாக, அது குறிப்பிட்ட எண்ணிக்கையிலான மில்லி விநாடிகள் காத்திருக்கிறது. அதில் ஜாவாஸ்கிரிப்ட் உதாரணம்இரண்டு வினாடிகளுக்குப் பிறகு பக்கத்தின் பின்னணி நீல நிறத்தில் இருந்து மஞ்சள் நிறமாக மாறும் நிகழ்வு:

document.body.style.background = "நீலம்"; setTimeout(function() ( document.body.style.background = "yellow"; ), 2000);

சில நேரங்களில் நாம் திட்டமிட்ட ஒரு செயல்பாட்டை ரத்து செய்ய வேண்டியிருக்கும். இது setTimeout இன் ரிட்டர்ன் மதிப்பை சேமித்து அதில் clearTimeout ஐ அழைப்பதன் மூலம் செய்யப்படுகிறது:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); 500); என்றால் (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

CancelAnimationFrame செயல்பாடு clearTimeout போலவே செயல்படுகிறது. சட்டத்தை ரத்துசெய்ய கோரிக்கைஅனிமேஷன் ஃபிரேம் வழங்கிய மதிப்பால் இது அழைக்கப்படுகிறது (இது ஏற்கனவே அழைக்கப்படவில்லை என்றால்).

இதேபோன்ற செயல்பாடுகளின் தொகுப்பு, setInterval மற்றும் clearInterval ஆகியவை ஒவ்வொரு X மில்லி விநாடிகளிலும் ஒரு செயலை மீண்டும் செய்யக்கூடிய டைமரை அமைக்கப் பயன்படுத்தப்படுகின்றன:

var உண்ணி = 0; var கடிகாரம் = setInterval(function() ( console.log("tick", ticks++); if (ticks == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

பிரித்தல்

சில நிகழ்வு வகைகளை குறுகிய காலத்திற்குள் பல முறை சுடலாம் ("மவுஸ்மூவ்" மற்றும் ஜாவாஸ்கிரிப்ட் ஸ்க்ரோல் நிகழ்வு போன்றவை). இதுபோன்ற நிகழ்வுகளைக் கையாளும் போது, ​​அது அதிக நேரம் எடுக்காது என்பதில் கவனமாக இருக்க வேண்டும், இல்லையெனில் ஆவணத்துடனான தொடர்பு மெதுவாகவும் தொந்தரவாகவும் மாறும் செயலைச் செய்ய கையாளுபவர் அதிக நேரம் எடுக்கும்.

அத்தகைய ஹேண்ட்லரில் தரமற்ற ஒன்றை நீங்கள் செய்ய வேண்டும் என்றால், அதற்கு அதிக நேரம் எடுக்காது என்பதை உறுதிப்படுத்த setTimeout ஐப் பயன்படுத்தலாம். இது பொதுவாக நிகழ்வு பிரித்தல் என்று குறிப்பிடப்படுகிறது. நசுக்குவதற்கு பல்வேறு அணுகுமுறைகள் உள்ளன.

முதல் எடுத்துக்காட்டில், பயனர் தட்டச்சு செய்யும் போது நாம் ஏதாவது செய்ய விரும்புகிறோம். ஆனால் ஒவ்வொரு விசை அழுத்த நிகழ்வுக்குப் பிறகும் இதைச் செய்ய நாங்கள் விரும்பவில்லை. பயனர் விரைவாக தட்டச்சு செய்யும் போது, ​​இடைநிறுத்தப்படும் வரை நீங்கள் காத்திருக்க வேண்டும். நிகழ்வு ஹேண்ட்லரில் செயலை உடனடியாகச் செயல்படுத்துவதற்குப் பதிலாக, நாங்கள் தாமதத்தை அமைத்துள்ளோம். முந்தைய தாமதத்தையும் (ஏதேனும் இருந்தால்) அழிக்கிறோம். நிகழ்வுகள் குறுகிய இடைவெளியில் நடந்தால் (நாம் அமைத்த தாமதத்தை விட குறைவாக), முந்தைய நிகழ்வின் தாமதம் ரத்து செய்யப்படும்:

இங்கே ஏதாவது தட்டச்சு செய்யவும்... var textarea = document.querySelector("textarea"); var நேரம் முடிந்தது; textarea.addEventListener("கீடவுன்", செயல்பாடு() ( clearTimeout(timeout); timeout = setTimeout(function() ( console.log("நீங்கள் தட்டச்சு செய்வதை நிறுத்திவிட்டீர்கள்."); 500); ));

clearTimeout க்கான வரையறுக்கப்படாத மதிப்பை அனுப்புவது அல்லது ஏற்கனவே இயங்கும் தாமதத்தில் அதை அழைப்பது எந்த விளைவையும் ஏற்படுத்தாது. இனி எப்போது அழைக்க வேண்டும் என்பதில் கவனமாக இருக்க வேண்டியதில்லை, ஒவ்வொரு நிகழ்வுக்கும் அதைச் செய்கிறோம்.

குறுகிய காலத்தில் பதில்களைப் பிரிக்க வேண்டும் என்றால் வேறு ஸ்கிரிப்டைப் பயன்படுத்தலாம். ஆனால் அதே நேரத்தில், அவை தொடர்ச்சியான நிகழ்வுகளின் போது தொடங்கப்பட வேண்டும், அதற்குப் பிறகு மட்டுமல்ல. எடுத்துக்காட்டாக, மவுஸ் மூவ் நிகழ்வுகளுக்கு (ஜாவாஸ்கிரிப்ட் மவுஸ் நிகழ்வுகள்) பதிலளிக்கும் வகையில் தற்போதைய மவுஸ் ஆயத்தொகுப்புகளை நீங்கள் அனுப்பலாம், ஆனால் ஒவ்வொரு 250 மில்லி விநாடிகளுக்கும் மட்டுமே:

செயல்பாடு displayCoords(நிகழ்வு) (document.body.textContent = "மவுஸ் " + event.pageX + ", " + event.pageY; ) இல் உள்ளது var திட்டமிடப்பட்டது = தவறானது, கடைசி நிகழ்வு; addEventListener("mousemove", செயல்பாடு(நிகழ்வு) ( lastEvent = நிகழ்வு; என்றால் (! திட்டமிடப்பட்டது) ( திட்டமிடப்பட்டது = true; setTimeout(function() (scheduled = false; displayCoords(lastEvent); ), 250); ) );

முடிவுரை

எமக்கு நேரடிக் கட்டுப்பாடு இல்லாத நிகழ்வுகளைக் கண்டறிந்து அதற்குப் பதிலளிக்க நிகழ்வுக் கையாளுபவர்கள் அனுமதிக்கின்றனர். அத்தகைய ஹேண்ட்லரை பதிவு செய்ய, addEventListener முறையைப் பயன்படுத்தவும்.

ஒவ்வொரு நிகழ்விற்கும் ஒரு குறிப்பிட்ட வகை உள்ளது ("கீடவுன்", "ஃபோகஸ்" போன்றவை) அதை அடையாளப்படுத்துகிறது. பெரும்பாலான நிகழ்வுகள் ஒரு குறிப்பிட்ட DOM உறுப்பில் எழுப்பப்பட்டு, பின்னர் உறுப்பின் பெற்றோர் முனைகளில் பரப்பப்படுகின்றன. இது இந்த உறுப்புகளுடன் தொடர்புடைய கையாளுபவர்களை செயலாக்க அனுமதிக்கிறது.

ஒரு கையாளுபவரை அழைக்கும் போது, ​​அது ஒரு நிகழ்வு பொருளுடன் அனுப்பப்படுகிறது கூடுதல் தகவல்நடவடிக்கை பற்றி. இந்த பொருளில் நிகழ்வின் மேலும் பரவலை நிறுத்துவதற்கான வழிமுறைகள் (stopPropagation) அல்லது இயல்புநிலை உலாவி நிகழ்வை செயலாக்குவதிலிருந்து தடுக்கும் முறைகளையும் கொண்டுள்ளது (preventDefault).

விசை அழுத்தங்கள் "கீடவுன்", "கீபிரஸ்" மற்றும் "கீஅப்" நிகழ்வுகளை உருவாக்குகின்றன. சுட்டியைக் கிளிக் செய்வதன் மூலம் "மவுஸ் டவுன்", "மவுஸ்அப்" மற்றும் "கிளிக்" நிகழ்வுகள் உருவாகும். சுட்டியை நகர்த்துதல் - "mousemove", "mouseenter" மற்றும் "mouseout".

"ஸ்க்ரோல்" நிகழ்வைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் ஸ்க்ரோல் நிகழ்வை வரையறுக்கலாம், மேலும் கவனத்தை மாற்றுவதை "ஃபோகஸ்" மற்றும் "ப்ளர்" ஆகியவற்றைப் பயன்படுத்தி வரையறுக்கலாம். ஆவணம் ஏற்றப்பட்டு முடிந்ததும், "சுமை" நிகழ்வு சாளரத்திற்கு உயர்த்தப்படும்.

ஜாவாஸ்கிரிப்ட் நிரலின் ஒரு பகுதி மட்டுமே ஒரே நேரத்தில் இயங்க முடியும். நிகழ்வு கையாளுபவர்கள் மற்றும் பிற திட்டமிடப்பட்ட ஸ்கிரிப்ட்கள் செயல்பாட்டினை முடிக்க வரிசையில் உள்ள மற்ற ஸ்கிரிப்ட்களுக்காக காத்திருக்க வேண்டும்.

இந்த வெளியீடு நட்பு திட்டக் குழுவால் தயாரிக்கப்பட்ட "நிகழ்வுகளைக் கையாளுதல்" என்ற கட்டுரையின் மொழிபெயர்ப்பாகும்

ஜாவாஸ்கிரிப்ட் நிகழ்வுகள்

ஜாவாஸ்கிரிப்ட், பிற பொருள் சார்ந்த மொழிகளைப் போலவே, ஆவணக் கூறுகளுடன் தொடர்புடைய பல நிகழ்வுகளை வரையறுக்கிறது. ஒரு ஸ்கிரிப்டில் இருந்து நிகழ்வுகள் நிகழ்வதற்கான எதிர்வினையை ஒழுங்கமைப்பதை கையாளுபவர்கள் சாத்தியமாக்குகின்றனர். இந்த வழக்கில், தொடர்புடைய ஹேண்ட்லர் HTML ஆவண உறுப்பின் பண்புக்கூறாக குறிப்பிடப்படுகிறது; இந்த பண்புக்கூறின் மதிப்பு ஜாவாஸ்கிரிப்ட் வெளிப்பாடு ஆகும். உதாரணத்திற்கு,

- ஒரு உறுப்பு மீது மவுஸ் கர்சரை நகர்த்துவது மற்றும் நகர்த்துவது பின்னணி நிறத்தில் மாற்றத்துடன் இருக்கும்.

- பயனர் சாளரத்தை மூடிவிட்டு ஆவணத்தை இறக்க முயற்சிக்கும்போது, ​​ஒரு செய்தி காட்டப்படும்

- நீங்கள் ஒரு படத்தை கிளிக் செய்யும் போது, ​​ஒரு குறிப்பிட்ட showPict() செயல்பாடு செயல்படுத்தப்படுகிறது

ஹேண்ட்லர்களில் பாதிக்கு கிட்டத்தட்ட எல்லா HTML உறுப்புகளும் () துணைபுரிகின்றன. சில நிகழ்வுகளை பொருத்தமான முறைகளைப் பயன்படுத்தி உருவகப்படுத்தலாம். அதன்படி நிகழ்வுகளின் பட்டியல் கீழே உள்ளது HTML விவரக்குறிப்புகள் 4.0 மற்றும் MS IE ஆல் ஆதரிக்கப்படும் சில நிகழ்வுகள். உலாவிகளின் விளக்கம் சில கூறுகளுக்கு கையாளுபவரின் பொருந்தக்கூடிய தன்மையின் அடிப்படையில் தரநிலையிலிருந்து வேறுபடலாம்

நிகழ்வு நடத்துபவர்	HTML கூறுகளை ஆதரிக்கிறது	விளக்கம்	முறை சாயல்
on Abort	ஐ.எம்.ஜி	படத்தை ஏற்றுவதில் குறுக்கீடு
தெளிவின்மை		தற்போதைய உறுப்பு கவனம் இழக்கிறது, அதாவது. மற்றொரு உறுப்புக்கு நகர்த்தவும். ஒரு உறுப்புக்கு வெளியே சுட்டியை சொடுக்கும் போது அல்லது தாவல் விசையை அழுத்தும் போது நிகழ்கிறது.	மங்கல்()
மீது மாற்றம்	உள்ளீடு, தேர்ந்தெடு, டெக்ஸ்ஏரியா	படிவ உறுப்புகளின் மதிப்புகளை மாற்றுதல். ஒரு உறுப்பு கவனம் இழந்த பிறகு நிகழ்கிறது, அதாவது. மங்கலான நிகழ்வுக்குப் பிறகு	மாற்றம்()
மீது கிளிக் செய்யவும்		ஒற்றை கிளிக் (சுட்டி பொத்தானை அழுத்தி வெளியிடப்பட்டது)	கிளிக்()
onDblClick	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	இரட்டை கிளிக்
ஒரு பிழை	IMG, ஜன்னல்	ஸ்கிரிப்ட் செயல்படுத்துவதில் பிழை ஏற்படுகிறது
மீது கவனம்	ஏ, ஏரியா, பட்டன், உள்ளீடு, லேபிள், தேர்ந்தெடு, நெடுவரிசை	ஒரு உறுப்பை மையப்படுத்துதல் (உறுப்பின் மீது கிளிக் செய்தல் அல்லது தாவல் விசையை மீண்டும் அழுத்துதல்)	கவனம் ()
கீ டவுன் மீது	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	விசைப்பலகையில் ஒரு விசை அழுத்தப்படுகிறது
onKeyPress	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	விசைப்பலகையில் ஒரு விசை அழுத்தி வெளியிடப்படுகிறது
onKeyUp	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	விசைப்பலகை விசை வெளியிடப்பட்டது
சுமை	உடல், ஃபிரேம்செட்
மவுஸ் டவுன் மீது	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	தற்போதைய உறுப்புக்குள் மவுஸ் பொத்தான் அழுத்தப்பட்டது
onMouseMove	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	தற்போதைய உறுப்புக்குள் மவுஸ் கர்சரை நகர்த்தவும்
onMouseOut	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	மவுஸ் கர்சர் தற்போதைய உறுப்புக்கு வெளியே உள்ளது
onMouseOver	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	மவுஸ் கர்சர் தற்போதைய உறுப்புக்கு மேல் உள்ளது
onMouseUp	கிட்டத்தட்ட அனைத்து HTML கூறுகளும்	தற்போதைய உறுப்புக்குள் மவுஸ் பொத்தான் வெளியிடப்பட்டது
onMove	ஜன்னல்	ஒரு சாளரத்தை நகர்த்துகிறது
மீது மீட்டமை	படிவம்	படிவத் தரவை மீட்டமைக்கவும் (பொத்தானைக் கிளிக் செய்யவும் )	மீட்டமை ()
மறுஅளவாக்கு	ஜன்னல்	ஒரு சாளரத்தின் அளவை மாற்றுதல்
onSelect	உள்ளீடு, டெக்ஸ்ரேரியா	தற்போதைய உறுப்பில் உரையைத் தேர்ந்தெடுக்கவும்
சமர்ப்பிக்கவும்	படிவம்	படிவத் தரவைச் சமர்ப்பிக்கிறது (பொத்தானைக் கிளிக் செய்யவும் )	சமர்ப்பிக்க ()
இறக்கத்தில்	உடல், ஃபிரேம்செட்	உலாவி சாளரத்தை மூடிவிட்டு ஆவணத்தை இறக்க முயற்சிக்கிறது