HTML DOM addEventListener() मेथड: इवेंट हैंडलर जोड़ना

addEventListener() मेथड

addEventListener() मेथड निर्दिष्ट एलिमेंट पर एक इवेंट हैंडलर (फंक्शन) जोड़ता है। यह आधुनिक, अनुशंसित तरीका है इवेंट्स संभालने का - पुराने onclick, onmouseover आदि इवेंट हैंडलर एट्रिब्यूट्स से बेहतर।

सिंटैक्स

element.addEventListener(event, function, capture)

पैरामीटर्स

• event (आवश्यक): इवेंट नाम (बिना "on" उपसर्ग) - "click", "mouseover", "keydown", "submit", आदि
• function (आवश्यक): इवेंट होने पर चलने वाला फंक्शन
• capture (वैकल्पिक): बूलियन - true = कैप्चरिंग फेज, false = बबलिंग फेज (डिफ़ॉल्ट)

उदाहरण: मल्टीपल इवेंट हैंडलर्स

<!DOCTYPE html>
<html>
<body>
  <h2>डेमो हेडिंग</h2>
  <button id="btn">क्लिक करें</button>
  <p id="output"></p>
  <script>
    var btn = document.getElementById("btn");
    
    // माउसओवर हैंडलर
    btn.addEventListener("mouseover", function() {
      document.getElementById("output").innerHTML += "बटन पर होवर! ";
    });
    
    // क्लिक हैंडलर
    btn.addEventListener("click", function() {
      document.getElementById("output").innerHTML += "!!बटन क्लिक किया!! ";
    });
  </script>
</body>
</html>

आउटपुट

बटन पर होवर करने पर "बटन पर होवर!" जुड़ता है। क्लिक करने पर "!!बटन क्लिक किया!!" जुड़ता है।

लाभ (इनलाइन हैंडलर्स पर)

• एक ही इवेंट पर एकाधिक हैंडलर्स जोड़ सकते हैं
• HTML और JavaScript का पृथक्करण (Separation of Concerns)
• कैप्चरिंग/बबलिंग फेज नियंत्रण
• नामित फंक्शन्स के साथ removeEventListener() से हटा सकते हैं
• किसी भी DOM एलिमेंट पर काम करता है (सिर्फ HTML एलिमेंट्स नहीं)

इवेंट फेज

// बबलिंग फेज (डिफ़ॉल्ट) - लक्ष्य से पैरेंट की ओर
element.addEventListener("click", handler, false);

// कैप्चरिंग फेज - पैरेंट से लक्ष्य की ओर
element.addEventListener("click", handler, true);

हटाना

// नामित फंक्शन आवश्यक
function myHandler() { ... }
element.addEventListener("click", myHandler);
element.removeEventListener("click", myHandler);

सामान्य इवेंट्स

• माउस: click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
• कीबोर्ड: keydown, keyup, keypress
• फॉर्म: submit, change, input, focus, blur
• विंडो: load, resize, scroll, hashchange
• टच: touchstart, touchmove, touchend