জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলার কীভাবে সরাতে হয়

জাভাস্ক্রিপ্ট removeEventListener() মেথড প্রদান করে ইভেন্ট হ্যান্ডলার সরাতে। একটি ইভেন্ট addEventListener() মেথড দ্বারা হ্যান্ডেল করা হয়। removeEventListener() মেথডটি সেই ইভেন্ট হ্যান্ডলারগুলো সরিয়ে ফেলে যা addEventListener() দিয়ে যোগ করা হয়েছিল।

উদাহরণ

<html> <body> 
    <h3 id="add">Hover me </h3> 
    <p id="remove"> </p> 
    <h3>Click this button to stop hovering effect </h3> 
    <input type="button" id="clickIt" onclick="RespondClick()" value="remove"> 
    <script> 
        const listener = document.getElementById("add"); 
        listener.addEventListener("mouseover", RespondMouseOver); 
        function RespondMouseOver() { 
            document.getElementById("remove").innerHTML += 1 + "</br>"; 
        } 
        function RespondClick() { 
            listener.removeEventListener("mouseover", RespondMouseOver); 
            document.getElementById("remove").innerHTML += 0; 
        } 
    </script> </body> </html>

উপরোক্ত কোড এক্সিকিউট করলে স্ক্রিনে নিচের ছবিটি দেখাবে।

"Hover me" টেক্সটের ওপর মাউস হোভার করলে ১-র সিরিজ তৈরি হবে। যতবার হোভার করবেন, ততবার ১ যোগ হবে। ৪ বার হোভার করলে নিচের আউটপুট দেখা যাবে।

আউটপুট

ইভেন্ট হ্যান্ডলার বন্ধ করতে "remove" বাটনে ক্লিক করতে হবে। ক্লিক করার পর '০' দেখাবে এবং পরে হোভার করলেও ১ যোগ হবে না।