JavaScript addEventListener() मेथड प्रदान करता है जो निर्दिष्ट एलिमेंट से इवेंट हैंडलर को जोड़ता है। यह मेथड मौजूदा इवेंट हैंडलर्स को ओवरराइट किए बिना किसी एलिमेंट से इवेंट हैंडलर जोड़ता है। एक समय में किसी एलिमेंट में कई इवेंट हैंडलर्स जोड़ना संभव है।
addEventListener() मेथड यह नियंत्रित करना आसान बनाता है कि इवेंट बबलिंग पर कैसे प्रतिक्रिया करता है। हम mouseover, click आदि जैसे कई इवेंट्स लागू कर सकते हैं।
उदाहरण
निम्न उदाहरण में, mouseover इवेंट असाइन किया गया है। इसलिए जब हम बटन पर माउस रखते हैं, तो हमें आउटपुट में अनुरोधित टेक्स्ट प्राप्त होता है।
<html> <body> <p>This example uses the addEventListener() method to attach a mouseover event to a button.</p> <input type = "button" id="myBtn" value = "listener"> <p id="listener"></p> <script> document.getElementById("myBtn").addEventListener("mouseover", displayText); function displayText() { document.getElementById("listener").innerHTML = document.write("Tutorix is the best e-learning platform"); } </script> </body> </html>
जब हम उपरोक्त कोड को निष्पादित करते हैं तो हमें स्क्रीन पर निम्न प्रदर्शित होगा।
जब हम "listener" बटन पर mouseover करते हैं, तो निम्न आउटपुट निष्पादित होता है।
आउटपुट
