HTML DOM removeEventListener() मेथड

removeEventListener() मेथड क्या है?

DOM removeEventListener() मेथड किसी HTML तत्व से पहले से जुड़े इवेंट हैंडलर को हटाता है। यह addEventListener() के साथ जोड़े गए इवेंट लिसनर्स को हटाने का एकमात्र विश्वसनीय तरीका है।

सिंटैक्स

element.removeEventListener(event, function, useCapture)

पैरामीटर

event (आवश्यक): इवेंट का नाम (स्ट्रिंग), उदाहरण: "click", "mouseover", "keydown"।
function (आवश्यक): हटाने के लिए ठीक वही फंक्शन रेफरेंस जो addEventListener() में पास किया गया था।
useCapture (वैकल्पिक): बूलियन जो फेज निर्दिष्ट करता है - true कैप्चरिंग फेज के लिए, false (डिफ़ॉल्ट) बबलिंग फेज के लिए। यह addEventListener() में उपयोग किए गए मान से मेल खाना चाहिए।

उदाहरण

यह उदाहरण एक बटन पर माउसओवर इवेंट जोड़ता है, फिर उसे हटा देता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-size: 1.2rem; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .mycolor { background-color: #db133a; }
</style>
</head>
<body>
<h1>DOM removeEventListener() मेथड डेमो</h1>
<button class="btn hover-btn">मुझ पर होवर करें</button>
<button onclick="removeHandler()" class="btn">इवेंट हैंडलर हटाएं</button>
<script>
  var hoverBtn = document.querySelector('.hover-btn');

  // नामित फंक्शन (रेफरेंस संरक्षित करने के लिए आवश्यक)
  function toggleFun() {
    hoverBtn.classList.toggle("mycolor");
  }

  // इवेंट लिसनर जोड़ें
  hoverBtn.addEventListener('mouseover', toggleFun);

  // इवेंट लिसनर हटाएं
  function removeHandler() {
    hoverBtn.removeEventListener('mouseover', toggleFun);
    alert("इवेंट हैंडलर हटा दिया गया! अब होवर करने पर कुछ नहीं होगा।");
  }
</script>
</body>
</html>

आउटपुट

प्रारंभ में, पहले बटन पर होवर करने से उसका रंग बदल जाता है। "इवेंट हैंडलर हटाएं" पर क्लिक करने के बाद, होवर करने पर कोई प्रभाव नहीं पड़ता।

महत्वपूर्ण नियम

समान फंक्शन रेफरेंस: आपको सटीक वही फंक्शन रेफरेंस पास करना होगा जो addEventListener() में उपयोग किया गया था। अनाम फंक्शन काम नहीं करेंगे।
समान फेज: useCapture मान (या options ऑब्जेक्ट) addEventListener() में उपयोग किए गए मान से मेल खाना चाहिए।
कोई त्रुटि नहीं: यदि लिसनर नहीं मिलता है, तो यह चुपचाप विफल होता है (कोई त्रुटि नहीं फेंकता)।

सामान्य गलतियां

// ❌ गलत - अनाम फंक्शन, हटाया नहीं जा सकता
element.addEventListener('click', function() { ... });
element.removeEventListener('click', function() { ... }); // अलग फंक्शन!

// ✅ सही - नामित फंक्शन
function handleClick() { ... }
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick); // समान रेफरेंस

// ✅ सही - एरो फंक्शन वेरिएबल में संग्रहीत
const handleClick = () => { ... };
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

आधुनिक विकल्प: AbortController

const controller = new AbortController();
element.addEventListener('click', handler, { signal: controller.signal });
// बाद में सभी लिसनर्स एक साथ हटाने के लिए:
controller.abort();

उपयोग के मामले

कंपोनेंट अनमाउंट/क्लीनअप (React useEffect क्लीनअप, Vue beforeUnmount, आदि)।
अस्थायी इवेंट हैंडलर्स (उदाहरण: मॉडल खुला होने पर ही कीबोर्ड शॉर्टकट)।
डायनामिक रूप से व्यवहार बदलना (उदाहरण: संपादन मोड सक्षम/अक्षम करना)।
मेमोरी लीक रोकना (विशेषकर SPA में)।