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

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

சில உறுப்புகளுக்கு ஒரு நிகழ்வு ஏற்பட்டால், அது "பாப் அப்" ஆகத் தொடங்குகிறது, அதாவது. ஒரு பெற்றோரில், பின்னர் ஒரு தாத்தா, பாட்டி போன்றவற்றில் ஏற்படுகிறது.

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

பின்வரும் உதாரணத்தைப் பயன்படுத்தி ஒரு நிகழ்வின் (குமிழி) தோற்றத்தை நாங்கள் நிரூபிப்போம்:

தலைப்பு

மிக முக்கியமான சில உரை

அத்தியாயம்

சில உரை

மீதமுள்ள உரை

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

document.addEventListener("DOMContentLoaded", function() (var allElements = document.getElementsByTagName("*"); (var i=0; i< allElements.length; i++) { allElements[i].addEventListener("click",function() {console.log(this.tagName);},false); }; document.addEventListener("click",function() {console.log(this);},false); window.addEventListener("click",function() {console.log(this);},false); });

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

நிகழ்வு குமிழியை எவ்வாறு குறுக்கிடுவது

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

எடுத்துக்காட்டாக, மேலே உள்ள உதாரணத்தை மாற்றுவோம், இதனால் நிகழ்வு உடலுக்கு மேலே குமிழியாகாது: document.addEventListener("DOMContentLoaded", function() (var allElements = document.getElementsByTagName("*"); (var i=0) ; நான்

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

கையாளுபவரை அழைக்கும் உறுப்பைப் பெறுதல்

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

எடுத்துக்காட்டாக, நிகழ்வு ஹேண்ட்லர் என்று அழைக்கப்படும் உறுப்பின் ஐடியை கன்சோலில் காண்பிப்போம்:

Var myP = document.getElementById("myP"); myP.addEventListener("கிளிக்", செயல்பாடு())( //நிகழ்வு ஹேண்ட்லர் என்று அழைக்கப்படும் DOM உறுப்பைப் பெறவும் - இது //அதன் ஐடியைப் பெற்று, கன்சோல் கன்சோலுக்கு வெளியிடவும்.log(this.id); ));

தற்போதைய உறுப்பைப் பெறுவதற்கு நீங்கள் தற்போதைய இலக்கு சொத்தை (event.currentTarget) பயன்படுத்தலாம்.

நிகழ்வின் நிலைகள் (கட்டங்கள்).

ஒரு நிகழ்வு வெளிப்படத் தொடங்கும் முன் (ஏறும் நிலை), அது முதலில் மேலும் 2 நிலைகளைக் கடந்து செல்கிறது:

• நிலை 1 என்பது நிகழ்வை உருவாக்கிய உறுப்புக்கு மூழ்கும் நிலை. அந்த. இந்த கட்டத்தில் மேலிருந்து கீழாக ஒரு இயக்கம் உள்ளது, அதாவது. இருந்து சாளர பொருள்உறுப்புக்கு. இந்த நிலை இடைமறிப்பு நிலை என்றும் அழைக்கப்படுகிறது.
• நிலை 2 என்பது இலக்கை அடைவதற்கான கட்டமாகும், அதாவது. நிகழ்வை உருவாக்கிய உறுப்பு (பொருள்).

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

மேலே உள்ள எடுத்துக்காட்டு ஸ்கிரிப்டை பின்வருமாறு மாற்றுவோம்:

Document.addEventListener("DOMContentLoaded", function() (var allElements = document.getElementsByTagName("*"); (var i=0; i

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

கவனம்: மூழ்கும் (குறுக்கீடு) கட்டத்தில், addEventListener() முறையைப் பயன்படுத்தி சேர்க்கப்பட்ட கையாளுபவர்களால் மட்டுமே நிகழ்வுகளை இடைமறிக்க முடியும். மற்ற முறைகளைப் பயன்படுத்தி ஹேண்ட்லர்கள் சேர்க்கப்பட்டன ( HTML பண்புக்கூறுஅல்லது ஜாவாஸ்கிரிப்ட் மூலம் ஆன்[நிகழ்வு] சொத்தை) குமிழிப்பு நிலையில் மட்டுமே நிகழ்வுகளை இடைமறிக்க முடியும்.

நிகழ்வை உருவாக்கிய உறுப்பைப் பெறுதல்

இலக்கு உறுப்பு பெறுவதற்காக, அதாவது. நிகழ்வை உருவாக்கிய உறுப்பு இலக்கு சொத்தை (event.target) பயன்படுத்த வேண்டும்.

மேலே உள்ள உதாரணத்தைக் கவனியுங்கள், இதில் ஸ்கிரிப்ட் உறுப்பின் உள்ளடக்கத்தை பின்வருவனவற்றிற்கு மாற்றுவோம்:

Document.addEventListener("DOMContentLoaded", function() ( var elementBody = document.body; elementBody.addEventListener("click",function())( console.log(this.tagName + " - ஹேண்ட்லர் என்று அழைக்கப்படும் உறுப்பு") ; கன்சோல் .log(event.currentTarget.tagName + " - ஹேண்ட்லரை அழைத்த உறுப்பு"); console.log(event.target.tagName + " - நிகழ்வை உருவாக்கிய உறுப்பு"); ),false); )) ;

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

இது அனைத்தும் ஜாவாஸ்கிரிப்ட் மற்றும் வகுப்புகளின் பயன்பாட்டுடன் தொடங்கியது.

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

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

சரி, என்ன பிரச்சனை? ஒரு எளிய உதாரணத்தைப் பார்ப்போம்:

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

HTML உடன் ஆரம்பிக்கலாம்:

• எழுதுகோல்
• பேனா
• அழிப்பான்

இது போன்ற நிலையான ஜாவாஸ்கிரிப்ட் நிகழ்வு ஹேண்ட்லரை நான் பயன்படுத்தலாம்:

(var i = 0; i< buttons.length; i++) { var button = buttons[i]; button.addEventListener("click", function() { if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active"); }); }
நன்றாக இருக்கிறது... ஆனால் அது வேலை செய்யாது. மூலம் குறைந்தபட்சம், நாம் எதிர்பார்க்கும் விதத்தில் இல்லை.

மூடல் வெற்றி கொஞ்சம் செயல்பாட்டு ஜாவாஸ்கிரிப்ட் தெரிந்தவர்களுக்கு, பிரச்சனை தெளிவாக உள்ளது.

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

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

ஒவ்வொரு செயல்பாட்டிற்கும் ஒரு தனி சூழல் நமக்குத் தேவை:

Var பொத்தான்கள் = document.querySelectorAll(".toolbar பட்டன்"); var createToolbarButtonHandler = செயல்பாடு(பொத்தான்) (திரும்ப செயல்பாடு() ( if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active"); );); (var i = 0; i< buttons.length; i++) { buttons[i].addEventListener("click", createToolBarButtonHandler(buttons[i])); }
மிகவும் சிறப்பாக! மற்றும் மிக முக்கியமாக, அது சரியாக வேலை செய்கிறது. நிகழ்வு ஹேண்ட்லரை வழங்கும் க்ரியேட் டூல்பார் பட்டன்ஹேண்டில் செயல்பாட்டை நாங்கள் உருவாக்கியுள்ளோம். ஒவ்வொரு பொத்தானுக்கும் எங்கள் சொந்த ஹேண்ட்லரை இணைக்கிறோம்.

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

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

ஆனால் இது போன்ற ஏதாவது இருந்தால்:

• ஃபூ
• மதுக்கூடம்
// ...மற்றொரு 997 கூறுகள்...
• baz

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

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

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

Var toolbarButtonHandler = செயல்பாடு(e) (var button = e.currentTarget; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active" ); ); (var i = 0; i< buttons.length; i++) { button.addEventListener("click", toolbarButtonHandler); }
நன்று! பல முறை பயன்படுத்தப்படும் ஒரு செயல்பாட்டிற்கு அனைத்தையும் எளிமைப்படுத்தியது மட்டுமல்லாமல், தேவையற்ற ஜெனரேட்டர் செயல்பாட்டை அகற்றுவதன் மூலம் எங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாக மாற்றியுள்ளோம்.

எனினும், நாம் இன்னும் சிறப்பாக செய்ய முடியும்.

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

ஒருவேளை வேறு அணுகுமுறை இருக்கிறதா?

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

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

இடைமறிப்பு கட்டம்

இலக்கு உறுப்பு மீது நிகழ்வு நிகழ்கிறது

ஏற்றம் கட்டம்

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

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

இதோ எங்கள் HTML டெம்ப்ளேட்:

• பொத்தான் ஏ
• பொத்தான் பி
• பொத்தான் சி

பயனர் A பொத்தானைக் கிளிக் செய்யும் போது, ​​நிகழ்வு இவ்வாறு பயணிக்கும்:

தொடங்கு
| #ஆவணம்
| இடைமறிப்பு கட்டம்
| HTML
| உடல்
| UL
| LI#li_1
| பொத்தான் ஏ< - Событие возникает для целевого элемента
| ஏற்றம் கட்டம்
| LI#li_1
| UL
| உடல்
| HTML
v #ஆவணம்

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

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

நமது கருவிப்பட்டியை ஒரு உறுதியான உதாரணமாக எடுத்துக் கொள்வோம்:

Ul class="toolbar">

எழுதுகோல்

பேனா

அழிப்பான்

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

Var கருவிப்பட்டி = document.querySelector(".toolbar"); கருவிப்பட்டி அகற்று("செயலில்"); );
எங்களிடம் இப்போது மிகவும் தூய்மையான குறியீடு உள்ளது, மேலும் நாங்கள் சுழல்களை அகற்றிவிட்டோம்! எவ்வாறாயினும், நாங்கள் e.currentTarget ஐ e.target உடன் மாற்றியுள்ளோம் என்பதை நினைவில் கொள்ளவும். நிகழ்வுகளை வேறு மட்டத்தில் செயலாக்குகிறோம் என்பதே காரணம்.

e.target என்பது நிகழ்வின் உண்மையான இலக்காகும், அது DOM வழியாகச் செல்லும், பின்னர் அது எங்கிருந்து குமிழியாக இருக்கும்.
e.currentTarget - நிகழ்வைக் கையாளும் தற்போதைய உறுப்பு. எங்கள் விஷயத்தில், இது ul.toolbar.

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

• எழுதுகோல்
• பேனா
• அழிப்பான்

அச்சச்சோ! இப்போது li.separator அல்லது icon ஐ க்ளிக் செய்யும் போது அதில் .active classஐ சேர்க்கிறோம். குறைந்தபட்சம், இது நல்லதல்ல. நிகழ்வுகளை வடிகட்ட நமக்கு ஒரு வழி தேவை, இதன் மூலம் நமக்குத் தேவையான உறுப்புக்கு எதிர்வினையாற்றுவோம்.

இதற்காக ஒரு சிறிய உதவி செயல்பாட்டை உருவாக்குவோம்:

Var பிரதிநிதி = செயல்பாடு (அளவுகோல், கேட்பவர்) ( திரும்ப செயல்பாடு(e) ( var el = e.target; do ( if (! criteria(el)) continue; e.desegateTarget = el; listener.apply(இது, வாதங்கள்); திரும்ப;) while((el = el.parentNode)); ); );
எங்கள் உதவியாளர் இரண்டு விஷயங்களைச் செய்கிறார். முதலில், இது ஒவ்வொரு உறுப்பு மற்றும் அதன் பெற்றோரின் மீது திரும்பத் திரும்பச் சொல்லும் மற்றும் அளவுகோல் அளவுருவில் அனுப்பப்பட்ட நிபந்தனையை அவர்கள் திருப்திப்படுத்துகிறார்களா என்பதைச் சரிபார்க்கும். உறுப்பு திருப்திகரமாக இருந்தால், உதவியாளர் delegateTarget எனப்படும் நிகழ்வுப் பொருளில் ஒரு புலத்தைச் சேர்க்கிறார், இது எங்கள் நிபந்தனைகளைப் பூர்த்தி செய்யும் உறுப்பைச் சேமிக்கிறது. பின்னர் கையாளுபவரை அழைக்கிறார். அதன்படி, எந்த உறுப்பும் நிபந்தனையை பூர்த்தி செய்யவில்லை என்றால், எந்த கையாளுபவர் அழைக்கப்படமாட்டார்.

நாம் இதை இப்படி பயன்படுத்தலாம்:

Var கருவிப்பட்டி = document.querySelector(".toolbar"); var buttonsFilter = செயல்பாடு(elem) ( elem.classList && elem.classList.contains("btn"); ); var buttonHandler = செயல்பாடு(e) ( var பட்டன் = e.delegateTarget; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active" );); toolbar.addEventListener("கிளிக்", பிரதிநிதி(பொத்தான்கள் வடிகட்டி, பொத்தான்ஹேண்ட்லர்));
மருத்துவர் கட்டளையிட்டது: அனைத்து வேலைகளையும் செய்யும் ஒரு உறுப்புடன் ஒரு நிகழ்வு கையாளுபவர் இணைக்கப்பட்டுள்ளார். ஆனால் அது நமக்குத் தேவையான உறுப்புகளுக்கு மட்டுமே செய்கிறது. DOM இலிருந்து பொருட்களைச் சேர்ப்பதற்கும் அகற்றுவதற்கும் இது சரியாகப் பதிலளிக்கிறது.

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

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

ஒரு பொருள் மிகவும் ஒருங்கிணைந்த மற்றும் செயல்பாட்டு வடிவத்தில் அளவுகோல்களை சந்திக்கிறதா என்பதை சரிபார்க்க ஒரு உதவியாளர் செயல்பாடு. விரும்பு:

Var அளவுகோல் = ( isElement: function(e) ( return e instance of HTMLElement; ), hasClass: function(cls) ( return function(e) ( return criteria.isElement(e) && e.classList.contains(cls); ) ) //மேலும் அளவுகோல்கள்);
உதவியாளரின் பகுதியளவு பயன்பாடும் பயனுள்ளதாக இருக்கும்:

Var partialDelgate = செயல்பாடு (அளவுகோல்) (திரும்ப செயல்பாடு (கையாளுபவர்) (திரும்ப டெல்கேட் (அளவுகோல், கையாளுபவர்); ) );
அசல் கட்டுரை: பிரதிநிதித்துவ ஜாவாஸ்கிரிப்ட் நிகழ்வுகளைப் புரிந்துகொள்வது
(மொழிபெயர்ப்பாளரிடமிருந்து: எனது முதல், கண்டிப்பாக தீர்ப்பளிக்கவும்.)

மகிழ்ச்சியான குறியீட்டு!

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

முன்நிபந்தனைகள்: குறிக்கோள்:

அடிப்படை கணினி கல்வியறிவு, HTML மற்றும் CSS பற்றிய அடிப்படை புரிதல், ஜாவாஸ்கிரிப்ட் முதல் படிகள்.

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

அதிர்ஷ்டமான நிகழ்வுகளின் தொடர்

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

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

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

இதிலிருந்து (மற்றும் MDN நிகழ்வுக் குறிப்பைப் பார்ப்பதன் மூலம்) நீங்கள் பதிலளிக்கக்கூடிய நிகழ்வுகள் நிறைய உள்ளன.

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

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

ஒரு எளிய உதாரணம்

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

நிறத்தை மாற்றவும்

பொத்தான் (விளிம்பு: 10px);

ஜாவாஸ்கிரிப்ட் இது போல் தெரிகிறது:

Const 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 நிறத்தை உருவாக்கும் மற்றும் பின்னணி நிறத்தை அதற்குச் சமமாக அமைக்கும் குறியீட்டைக் கொண்ட அநாமதேய செயல்பாட்டிற்குச் சமமாக onclick நிகழ்வு ஹேண்ட்லர் சொத்தை அமைப்பதன் மூலம் கிளிக் நிகழ்வு துப்பாக்கிச் சூட்டை நாங்கள் கேட்கிறோம்.

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

எடுத்துக்காட்டு வெளியீடு பின்வருமாறு:

இது வலைப்பக்கங்கள் மட்டுமல்ல

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

இன்லைன் நிகழ்வு கையாளுபவர்கள் - இவற்றைப் பயன்படுத்த வேண்டாம்

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

bgChange() செயல்பாட்டை அழுத்தவும் ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol;)

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

என்னை அழுத்தவும்

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

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

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

கான்ஸ்ட் பொத்தான்கள் = document.querySelectorAll("பொத்தான்"); க்கு (நான் = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

குறிப்பு: உங்கள் உள்ளடக்கத்திலிருந்து உங்கள் நிரலாக்க தர்க்கத்தைப் பிரிப்பது உங்கள் தளத்தை தேடுபொறிகளுக்கு மிகவும் நட்பாக மாற்றுகிறது.

addEventListener() மற்றும் removeEventListener()

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

Const btn = document.querySelector("பொத்தான்"); செயல்பாடு bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("கிளிக்", bgChange);

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

Btn.addEventListener("கிளிக்", செயல்பாடு() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol;));

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

Btn.removeEventListener("கிளிக்", bgChange);

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

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

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

இரண்டாவது வரி முதல் வரியால் அமைக்கப்பட்ட onclick மதிப்பை மேலெழுதும். இருப்பினும் இது வேலை செய்யும்:

MyElement.addEventListener("கிளிக்", செயல்பாடுA); myElement.addEventListener("கிளிக்", செயல்பாடுB);

உறுப்பு கிளிக் செய்யும் போது இரண்டு செயல்பாடுகளும் இப்போது இயங்கும்.

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

நான் என்ன பொறிமுறையைப் பயன்படுத்த வேண்டும்?

மூன்று வழிமுறைகளில், நீங்கள் கண்டிப்பாக HTML நிகழ்வு ஹேண்ட்லர் பண்புக்கூறுகளைப் பயன்படுத்தக்கூடாது - இவை காலாவதியானவை மற்றும் தவறான நடைமுறை, மேலே குறிப்பிட்டது.

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

• நிகழ்வு ஹேண்ட்லர் பண்புகள் குறைவான சக்தி மற்றும் விருப்பங்களைக் கொண்டிருக்கின்றன, ஆனால் சிறந்த குறுக்கு உலாவி இணக்கத்தன்மை (இதுவரை ஆதரிக்கப்படுகிறது இன்டர்நெட் எக்ஸ்புளோரர் 8) நீங்கள் கற்கும் போது ஒருவேளை நீங்கள் இவற்றுடன் தொடங்க வேண்டும்.
• DOM நிலை 2 நிகழ்வுகள் (addEventListener() , முதலியன) மிகவும் சக்தி வாய்ந்தவை, ஆனால் மிகவும் சிக்கலானதாக மாறலாம் மற்றும் குறைவான ஆதரவுடன் (Internet Explorer 9 வரை ஆதரிக்கப்படுகிறது). நீங்கள் இவற்றைப் பரிசோதிக்கவும், முடிந்தவரை அவற்றைப் பயன்படுத்தவும்.

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

Element.onclick = செயல்பாடு1; உறுப்பு.onclick = செயல்பாடு2; முதலியன

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

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

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

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

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

செயல்பாடு bgChange(e) ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); ) btn.addEventListener("கிளிக்", bgChange);

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

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

ஒரே நிகழ்வு ஹேண்ட்லரை பல உறுப்புகளில் அமைக்கவும், அவற்றில் ஏதேனும் ஒரு நிகழ்வு நிகழும்போது அனைத்திற்கும் ஏதாவது செய்ய வேண்டும் என்றால் e.target நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். உதாரணமாக, நீங்கள் 16 ஓடுகளின் தொகுப்பைக் கொண்டிருக்கலாம், அவை கிளிக் செய்யும் போது மறைந்துவிடும். எப்பொழுதும் ஒரு விஷயத்தை மிகவும் கடினமான முறையில் தேர்ந்தெடுப்பதை விட, e.Target ஆக மறைந்து போகும்படி அமைப்பது பயனுள்ளது. பின்வரும் எடுத்துக்காட்டில் (முழு மூலக் குறியீட்டிற்கான பயனுள்ள-eventtarget.html ஐப் பார்க்கவும்; அது இங்கே நேரடியாக இயங்குவதைப் பார்க்கவும்), ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி 16 உறுப்புகளை உருவாக்குகிறோம். ஆவணம்.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

எழுதுகோல்

பேனா

அழிப்பான்

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

Var கருவிப்பட்டி = document.querySelector(".toolbar"); கருவிப்பட்டி அகற்று("செயலில்"); );
எங்களிடம் இப்போது மிகவும் தூய்மையான குறியீடு உள்ளது, மேலும் நாங்கள் சுழல்களை அகற்றிவிட்டோம்! எவ்வாறாயினும், நாங்கள் e.currentTarget ஐ e.target உடன் மாற்றியுள்ளோம் என்பதை நினைவில் கொள்ளவும். நிகழ்வுகளை வேறு மட்டத்தில் செயலாக்குகிறோம் என்பதே காரணம்.

e.target என்பது நிகழ்வின் உண்மையான இலக்காகும், அது DOM வழியாகச் செல்லும், பின்னர் அது எங்கிருந்து குமிழியாக இருக்கும்.
e.currentTarget - நிகழ்வைக் கையாளும் தற்போதைய உறுப்பு. எங்கள் விஷயத்தில், இது ul.toolbar.

மேம்படுத்தப்பட்ட பாப்-அப் நிகழ்வுகள் தற்போது ul.toolbar வழியாக பாப்-அப் செய்யும் ஒவ்வொரு உறுப்பின் மீதும் கிளிக் செய்வதை நாங்கள் கையாளுகிறோம், ஆனால் எங்கள் சரிபார்ப்பு நிலை மிகவும் எளிமையானது. க்ளிக் செய்ய வடிவமைக்கப்படாத ஐகான்கள் மற்றும் உறுப்புகளை உள்ளடக்கிய மிகவும் சிக்கலான DOM இருந்தால் என்ன நடக்கும்?

• எழுதுகோல்
• பேனா
• அழிப்பான்

அச்சச்சோ! இப்போது li.separator அல்லது icon ஐ க்ளிக் செய்யும் போது அதில் .active classஐ சேர்க்கிறோம். குறைந்தபட்சம், இது நல்லதல்ல. நிகழ்வுகளை வடிகட்ட நமக்கு ஒரு வழி தேவை, இதன் மூலம் நமக்குத் தேவையான உறுப்புக்கு எதிர்வினையாற்றுவோம்.

இதற்காக ஒரு சிறிய உதவி செயல்பாட்டை உருவாக்குவோம்:

Var பிரதிநிதி = செயல்பாடு (அளவுகோல், கேட்பவர்) ( திரும்ப செயல்பாடு(e) ( var el = e.target; do ( if (! criteria(el)) continue; e.desegateTarget = el; listener.apply(இது, வாதங்கள்); திரும்ப;) while((el = el.parentNode)); ); );
எங்கள் உதவியாளர் இரண்டு விஷயங்களைச் செய்கிறார். முதலில், இது ஒவ்வொரு உறுப்பு மற்றும் அதன் பெற்றோரின் மீது திரும்பத் திரும்பச் சொல்லும் மற்றும் அளவுகோல் அளவுருவில் அனுப்பப்பட்ட நிபந்தனையை அவர்கள் திருப்திப்படுத்துகிறார்களா என்பதைச் சரிபார்க்கும். உறுப்பு திருப்திகரமாக இருந்தால், உதவியாளர் delegateTarget எனப்படும் நிகழ்வுப் பொருளில் ஒரு புலத்தைச் சேர்க்கிறார், இது எங்கள் நிபந்தனைகளைப் பூர்த்தி செய்யும் உறுப்பைச் சேமிக்கிறது. பின்னர் கையாளுபவரை அழைக்கிறார். அதன்படி, எந்த உறுப்பும் நிபந்தனையை பூர்த்தி செய்யவில்லை என்றால், எந்த கையாளுபவர் அழைக்கப்படமாட்டார்.

நாம் இதை இப்படி பயன்படுத்தலாம்:

Var கருவிப்பட்டி = document.querySelector(".toolbar"); var buttonsFilter = செயல்பாடு(elem) ( elem.classList && elem.classList.contains("btn"); ); var buttonHandler = செயல்பாடு(e) ( var பட்டன் = e.delegateTarget; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active" );); toolbar.addEventListener("கிளிக்", பிரதிநிதி(பொத்தான்கள் வடிகட்டி, பொத்தான்ஹேண்ட்லர்));
மருத்துவர் கட்டளையிட்டது: அனைத்து வேலைகளையும் செய்யும் ஒரு உறுப்புடன் ஒரு நிகழ்வு கையாளுபவர் இணைக்கப்பட்டுள்ளார். ஆனால் அது நமக்குத் தேவையான உறுப்புகளுக்கு மட்டுமே செய்கிறது. DOM இலிருந்து பொருட்களைச் சேர்ப்பதற்கும் அகற்றுவதற்கும் இது சரியாகப் பதிலளிக்கிறது.

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

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

ஒரு பொருள் மிகவும் ஒருங்கிணைந்த மற்றும் செயல்பாட்டு வடிவத்தில் அளவுகோல்களை சந்திக்கிறதா என்பதை சரிபார்க்க ஒரு உதவியாளர் செயல்பாடு. விரும்பு:

Var அளவுகோல் = ( isElement: function(e) ( return e instance of HTMLElement; ), hasClass: function(cls) ( return function(e) ( return criteria.isElement(e) && e.classList.contains(cls); ) ) //மேலும் அளவுகோல்கள்);
உதவியாளரின் பகுதியளவு பயன்பாடும் பயனுள்ளதாக இருக்கும்:

Var partialDelgate = செயல்பாடு (அளவுகோல்) (திரும்ப செயல்பாடு (கையாளுபவர்) (திரும்ப டெல்கேட் (அளவுகோல், கையாளுபவர்); ) );
அசல் கட்டுரை: பிரதிநிதித்துவ ஜாவாஸ்கிரிப்ட் நிகழ்வுகளைப் புரிந்துகொள்வது
(மொழிபெயர்ப்பாளரிடமிருந்து: எனது முதல், கண்டிப்பாக தீர்ப்பளிக்கவும்.)

மகிழ்ச்சியான குறியீட்டு!

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

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

நீங்கள் ஒரு துணைக் குறியைக் கிளிக் செய்தால் அல்லது:

EM ஐக் கிளிக் செய்தால், DIV இல் கையாளுபவர் வேலை செய்யும்

நீங்கள் பார்க்க முடியும் என, நீங்கள் உள்ளமைக்கப்பட்ட em உறுப்பு மீது கிளிக் செய்யும் போது, ​​div இல் கையாளுபவர் தூண்டப்படுகிறது. இது ஏன் நடக்கிறது? படித்து தெரிந்து கொள்ளுங்கள்.

ஏற்றம்

எனவே ஏற்றத்தின் அடிப்படைக் கொள்கை:

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

எடுத்துக்காட்டாக, 3 உள்ளமை கூறுகள் FORM > DIV > P, ஒவ்வொன்றிலும் ஒரு நிகழ்வுக் கையாளுமையுடன் உள்ளன என்று வைத்துக்கொள்வோம்:

உடல் * (விளிம்பு: 10px; கரை: 1px திட நீலம்; ) படிவம் DIV

உள் உறுப்பு மீது கிளிக் செய்வதை குமிழ் உறுதி செய்கிறது

கிளிக் ஹேண்ட்லரை முதலில் அழைப்பார் (நிச்சயமாக ஒன்று இருந்தால்).

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

இலக்கு உறுப்பு event.target ஐ அணுகுகிறது

இந்த அல்லது அந்த நிகழ்வை எந்த உறுப்பு மூலம் பிடித்தோம் என்பதைக் கண்டறிய, Event.target முறை உள்ளது. (நிகழ்வு பொருளைப் பற்றி படிக்கவும்).

• event.target என்பது நிகழ்வின் உண்மையான மூல உறுப்பு ஆகும்.
• இது எப்பொழுதும் தற்போதைய உறுப்பாகும்.

எடுத்துக்காட்டாக, உங்களிடம் ஒரே ஒரு form.onclick ஹேண்ட்லர் நிறுவப்பட்டிருந்தால், அது படிவத்தில் உள்ள அனைத்து கிளிக்குகளையும் "பிடிக்கும்". மேலும், கிளிக் உள்ளே எங்கு இருந்தாலும், அது இன்னும் உறுப்புக்கு பாப் அப் செய்யும், அதில் ஹேண்ட்லர் வேலை செய்யும்.

இதில்:

• இது (=event.currentTarget) எப்பொழுதும் படிவமாகவே இருக்கும், ஏனெனில் கையாளுபவர் அதில் பணிபுரிந்தார்.
• event.target ஆனது படிவத்தில் உள்ள ஒரு குறிப்பிட்ட உறுப்புக்கான இணைப்பைக் கொண்டிருக்கும், அதில் கிளிக் செய்ததில் மிகவும் உள்ளமைக்கப்பட்டது.

கொள்கையளவில், படிவத்தை கிளிக் செய்து, படிவத்தில் கூடுதல் கூறுகள் இல்லை என்றால், இது event.target உடன் ஒத்துப்போகும்.

ஏறுவதை நிறுத்துதல்

பொதுவாக, நிகழ்வு குமிழ் நேராக மேலே சென்று ரூட் விண்டோ ஆப்ஜெக்ட்டை அடைகிறது.

ஆனால் சில இடைநிலை உறுப்புகளில் ஏற்றத்தை நிறுத்த முடியும்.

பிரச்சாரத்தை நிறுத்த, நீங்கள் event.stopPropagation() முறையை அழைக்க வேண்டும்.

ஒரு எடுத்துக்காட்டைப் பார்ப்போம்: ஒரு பொத்தானைக் கிளிக் செய்தால், body.onclick ஹேண்ட்லர் வேலை செய்யாது:

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

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

எனவே, stopPropagation நிகழ்வை மேலும் பரப்புவதைத் தடுக்கும், ஆனால் அனைத்து கையாளுபவர்களும் உறுப்பில் வேலை செய்வார்கள், ஆனால் அடுத்த உறுப்பு மீது அல்ல.

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

டைவ்

தரநிலையில், நிகழ்வுகளின் "ஏறும்" கூடுதலாக, ஒரு "டைவ்" உள்ளது.

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

எனவே, நிகழ்வின் 3 நிலைகள் உள்ளன:

நிகழ்வு மேலிருந்து கீழாக வருகிறது. இந்த நிலை "இடைமறுப்பு நிலை" என்று அழைக்கப்படுகிறது.

நிகழ்வு ஒரு குறிப்பிட்ட உறுப்பை அடைந்தது. இது "இலக்கு நிலை".

எல்லாவற்றிற்கும் பிறகு, நிகழ்வு வெளிவரத் தொடங்குகிறது. இது "ஏறும் நிலை".

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

எனவே, நீங்கள் TD ஐக் கிளிக் செய்யும் போது, ​​நிகழ்வு பெற்றோரின் சங்கிலியில் பயணிக்கும், முதலில் உறுப்பு வரை ("மூழ்குகிறது"), பின்னர் மேலே ("பாப் அப்"), அதற்கேற்ப ஹேண்ட்லர்களைப் பயன்படுத்தி.

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

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

இடைமறிப்பு கட்டத்தில் ஒரு நிகழ்வைப் பிடிக்க, நீங்கள் இதைப் பயன்படுத்த வேண்டும்:

• வாதம் உண்மைதான், பின் வரும் வழியில் நிகழ்வு இடைமறிக்கப்படும்.
• வாதம் தவறானது, பின்னர் நிகழ்வு குமிழிக்கும் போது பிடிக்கப்படும்.

எடுத்துக்காட்டுகள்

எடுத்துக்காட்டில்,

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

கையாளுபவர்கள் மேல்-கீழ் வரிசையில் செயல்படுவார்கள்: படிவம் → DIV → P.

JS குறியீடு இங்கே:

Var elems = document.querySelectorAll("form,div,p"); // (var i = 0; i. க்கான இடைமறிப்பு கட்டத்தில் ஒவ்வொரு உறுப்புக்கும் ஒரு கையாளுபவரை இணைக்கவும்< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }

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

Var elems = document.querySelectorAll("form,div,p"); (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

உள் உறுப்பு மீது கிளிக் செய்யவும்

நிகழ்வுகளின் வரிசையைப் பார்க்க:
இது படிவம் → DIV → P → P → DIV → FORM ஆக இருக்க வேண்டும். உறுப்பு என்பதை கவனிக்கவும்

இரண்டு நிலைகளிலும் பங்கேற்கும்.

முடிவுகள்

• ஒரு நிகழ்வு நிகழும்போது, ​​நிகழ்வு நிகழ்ந்த உறுப்பு நிகழ்வு.இலக்கு எனக் குறிக்கப்படும்.
• நிகழ்வு முதலில் ஆவண மூலத்திலிருந்து Event.target க்கு நகர்கிறது, வழியில் கையாளுபவர்களை அழைக்கிறது, addEventListener (…., true) வழியாக வழங்கப்படுகிறது.
• நிகழ்வானது, Event.target இலிருந்து ஆவணத்தின் ஆரம்பம் வரை நகர்கிறது, அது addEventListener (...., false) வழியாக வழங்கப்படும் ஹேண்ட்லர்களை அழைக்கிறது.

ஒவ்வொரு கையாளும் நிகழ்வு பண்புகளுக்கான அணுகல் இருக்கும்:

• நிகழ்வு. இலக்கு நிகழ்வு உண்மையில் நிகழ்ந்த ஆழமான உறுப்பு ஆகும்.
• event.currentTarget (=இது) - சுய-கையாளுபவர் தற்போது தூண்டப்பட்ட உறுப்பு (நிகழ்வு "அடைந்தது").
• event.eventPhase - நிகழ்வு கையாளுபவர் எந்த கட்டத்தில் தூண்டப்பட்டார் (டைவ் = 1, ஏறுதல் = 3).

Event.stopPropagation() முறையை அழைப்பதன் மூலம் பிரச்சாரத்தை நிறுத்தலாம், ஆனால் இது பரிந்துரைக்கப்படவில்லை, ஏனெனில் உங்களுக்கு மிகவும் எதிர்பாராத நோக்கங்களுக்காக நிகழ்வு தேவைப்படலாம்.