Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript removeEventListener() मेथड उदाहरण के साथ


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

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample{       font-size: 18px;       font-weight: 500;       color:red;    } </style> </head> <body> <h1>JavaScript removeEventListener() method</h1> <div class="sample"></div> <button class="Btn">CLICK HERE</button> <h3> Click on the above button to print a number </h3> <button class="Btn">Remove event Listener</button> <h3>Click on the above button to remove the event listener of the first button</h3> <script>    let sampleEle = document.querySelector('.sample');    let j=0;    function printNum(){       sampleEle.innerHTML += 'Number = ' + j++ + '<br>';    }    document.querySelector('.Btn').addEventListener('click',printNum);    document.querySelectorAll('.Btn')[1].addEventListener('click',()=>{       document.querySelector('.Btn').removeEventListener('click',printNum);       sampleEle.innerHTML = 'Event listener has been removed';    }) </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट देगा -

JavaScript removeEventListener() मेथड उदाहरण के साथ

'CLICK HERE' तीन बार क्लिक करने पर -

JavaScript removeEventListener() मेथड उदाहरण के साथ

'Remove event Listener' बटन पर क्लिक करके फिर 'CLICK HERE' बटन पर क्लिक करने पर -

JavaScript removeEventListener() मेथड उदाहरण के साथ


  1. जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना

    मान लीजिए निम्नलिखित हमारा डिव है - Welcome in JavaScript निम्नलिखित हमारा बटन है। क्लिक करने पर, उपरोक्त डिव छिप जाना चाहिए -Click The Buttonडिव को छिपाने के लिए जावास्क्रिप्ट में style.display अवधारणा का उपयोग करें। कोड निम्नलिखित है -उदाहरण  Document Click The Button Welcome in Jav

  1. JavaScript में बटन क्लिक पर li एलिमेंट्स कैसे हटाएं? JavaScript में बटन क्लिक पर li एलिमेंट्स कैसे हटाएं?

    प्रत्येक <li> में बटन जोड़ें, इवेंट डेलिगेशन या व्यक्तिगत लिसनर से remove() या closest() मेथड से पैरेंट <li> हटाएं। HTML स्ट्रक्चर <ul id=subjectList> <li class=subjectName>JavaScript <button class=removeBtn>हटाएं</button></li> <li class=subjectN

  1. JavaScript में बटन क्लिक पर नाम कैसे जोड़ें और हटाएं? JavaScript में बटन क्लिक पर नाम कैसे जोड़ें और हटाएं?

    उदाहरण addEventListener() और remove() का उपयोग करके डायनामिकली नाम जोड़ें और हटाएं। { var actualName = givenName.value; if (actualName.length != 0) { var createAnHTMLList = `${actualName}Remove Name`; listOfName.innerHTML += createAnHTMLList;