जावास्क्रिप्ट में addEventListener () विधि को कैसे लागू करें?

AddEventListener () एक इनबिल्ट जावास्क्रिप्ट फंक्शन है जो ईवेंट को सुनने के लिए लेता है और जब वर्णित ईवेंट को निकाल दिया जाता है तो उसे कॉल किया जाता है।

एक घटना का एक महत्वपूर्ण हिस्सा है .A वेब पेज होने वाली घटना के अनुसार प्रतिक्रिया करता है। कुछ ईवेंट उपयोगकर्ता द्वारा जनरेट किए जाते हैं और कुछ API द्वारा बनाए जाते हैं। इस लेख में, हम देखेंगे कि कैसे ईवेंट होते हैं और कैसे विधि, addEventListener को जावास्क्रिप्ट में निम्न अनुक्रम में उपयोग किया जाता है:

इवेंट श्रोता क्या है?

ईवेंट श्रोता जावास्क्रिप्ट में एक ऐसी प्रक्रिया है जो किसी घटना के होने की प्रतीक्षा करता है। एक का सरल उदाहरण प्रतिस्पर्धा एक उपयोगकर्ता है जो माउस को क्लिक करता है या कीबोर्ड पर एक कुंजी दबाता है।





addEventListener () इनबिल्ट है जावास्क्रिप्ट समारोह जो सुनने के लिए घटना लेता है, और जब भी वर्णित घटना को निकाल दिया जाता है, तब बुलाया जाने वाला दूसरा तर्क। मौजूदा ईवेंट हैंडलर को ओवरराइट किए बिना किसी भी ईवेंट हैंडलर्स को किसी एक तत्व में जोड़ा जा सकता है।

addEventListener () जावास्क्रिप्ट में

कुछ के विशेषताएं ईवेंट श्रोता विधि में शामिल हैं:



  • addEventListener () विधि एक संलग्न करता है आयोजन प्रबंधकर्ता निर्दिष्ट तत्व के लिए।
  • यह विधि किसी ईवेंट हैंडलर को बिना किसी तत्व के संलग्न करती है ओवरराइटिंग मौजूदा घटना संचालकों।
  • आप जोड़ सकते हो कई घटना संचालकों एक तत्व के लिए।
  • आप कई ईवेंट हैंडलर जोड़ सकते हैं इसी प्रकार का एक को तत्व , यानी दो 'क्लिक' ईवेंट।
  • इवेंट श्रोताओं को किसी भी जोड़ा जा सकता है JUDGMENT HTML तत्व ही नहीं वस्तु। यानी विंडो ऑब्जेक्ट।
  • AddEventListener () विधि इसे बनाती है आसान कैसे नियंत्रित करने के लिए घटना की प्रतिक्रिया बुदबुदाना

AddEventListener () पद्धति का उपयोग करते समय, जावास्क्रिप्ट को इससे अलग किया जाता है बेहतर पठनीयता के लिए मार्कअप, और जब आप HTML मार्कअप को नियंत्रित नहीं करते तब भी आप इवेंट श्रोताओं को जोड़ने की अनुमति देते हैं।

इसके अलावा, आप आसानी से एक ईवेंट श्रोता को हटा सकते हैं removeEventListener () विधि

बड़े डेटा एनालिटिक्स में प्रयुक्त उपकरण

वाक्य - विन्यास:



target.addEventListener (प्रकार, श्रोता [, विकल्प]) target.addEventListener (प्रकार, श्रोता [, useCapture]) target.addEventListener (प्रकार, श्रोता [, useCapture, wantUntrusted])

पैरामीटर मान

व्यास विवरण

प्रतिस्पर्धा

आवश्यक है। एक स्ट्रिंग जो घटना का नाम निर्दिष्ट करती है।

नोट: 'पर' उपसर्ग का उपयोग न करें। उदाहरण के लिए, 'ऑनक्लिक' के बजाय 'क्लिक' का उपयोग करें।

सभी HTML DOM इवेंट की सूची के लिए, हमारे संपूर्ण HTML DOM इवेंट ऑब्जेक्ट संदर्भ देखें।

समारोह

आवश्यक है। जब ईवेंट आता है, तो फ़ंक्शन को निर्दिष्ट करता है।

जब ईवेंट होता है, तो ईवेंट ऑब्जेक्ट को पहले पैरामीटर के रूप में फ़ंक्शन में पास किया जाता है। घटना का प्रकार वस्तु निर्दिष्ट घटना पर निर्भर करता है। उदाहरण के लिए, 'क्लिक' इवेंट माउसइवेंट ऑब्जेक्ट का है।

उपयोग करें

वैकल्पिक। एक बूलियन मान जो निर्दिष्ट करता है कि क्या घटना को कैप्चरिंग में या बबलिंग चरण में निष्पादित किया जाना चाहिए।

संभावित मान: सत्य - ईवेंट हैंडलर कैप्चरिंग फेजफ़्लेक- डिफ़ॉल्ट में निष्पादित किया जाता है। ईवेंट हैंडलर बुबलिंग चरण में निष्पादित किया जाता है


अब जब आप जानते हैं कि कोई ईवेंट श्रोता कैसे काम करता है, तो आइए जावास्क्रिप्ट में addEventListener () का एक उदाहरण देखें।

addEventListener () जावास्क्रिप्ट में: उदाहरण

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtThis उदाहरण किसी फ़ंक्शन को निष्पादित करने के लिए addEventListener () विधि का उपयोग करता है जब कोई उपयोगकर्ता बटन पर क्लिक करता है। & lt / p & gt & ltbutton id = 'myBtn' & gt; ('myBtn')। addEventListener ('क्लिक', myFunction) फंक्शन myFunction () {document.getElementById ('डेमो') कार्य करते हैं। इनर HTML = 'हैलो वर्ल्ड'} & lt / script & gt; & lt / body & lt / html और html & gt;

जावास्क्रिप्ट में addEventListener

इसके साथ, हम जावास्क्रिप्ट में इस addEventListener के अंत में आते हैं। मुझे उम्मीद है कि आप समझ गए होंगे कि इवेंट श्रोता कैसे हैं तरीका जावास्क्रिप्ट में काम करता है।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'जावास्क्रिप्ट में addEventListener' ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।