জাভাস্ক্রিপ্টে আউটার ফাংশন থেকে ইভেন্ট লিসেনার সরানো

একটি বাটনে ক্লিক ইভেন্ট লিসেনার যোগ করা হয়েছে। ক্লিক হলে একটি আউটার ফাংশন কল করা হয়, যা সেই লিসেনারটিকে রিমুভ করে দেয়। ফলে বাটনে দ্বিতীয়বার ক্লিক করলে কিছুই হবে না।

পূর্ণ HTML + JavaScript উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Listener Demo</title>
</head>
<body>
  <button id="demo">Press Me</button>
  <script>
    var demoId = document.getElementById('demo');
    
    // নেমড ফাংশন এক্সপ্রেশন ব্যবহার করা হয়েছে যাতে রিমুভ করার সময় রেফারেন্স থাকে
    demoId.addEventListener('click', function fun() {
      outerFunction(this, fun);
    }, false);
    
    function outerFunction(self, funct) {
      console.log('outer function is called....');
      self.removeEventListener('click', funct, false);
      console.log("Listener has been removed...");
    }
  </script>
</body>
</html>

চলানো পদ্ধতি

ফাইলটি index.html নামে সেভ করুন এবং VS Code-এ "Open with Live Server" দিয়ে রান করুন।

আউটপুট

প্রথম ক্লিক: কনসোলে outer function is called.... এবং Listener has been removed... প্রিন্ট হবে।
দ্বিতীয় ক্লিক: কিছুই হবে না (লিসেনার রিমুভ হয়ে গেছে)।

ব্যাখ্যা

addEventListener-এ অ্যানোনিমাস ফাংশন দেওয়া হলে সেটি রিমুভ করা যায় না, কারণ রেফারেন্স থাকে না। তাই function fun() নামযুক্ত ফাংশন এক্সপ্রেশন ব্যবহার করা হয়েছে।
outerFunction-এ self (বাটন এলিমেন্ট) এবং funct (লিসেনার ফাংশন) পাস করা হয়।
removeEventListener('click', funct, false) দিয়ে সেম টাইপ, সেম ফাংশন, সেম ক্যাপচার ফেজ (false) দিয়ে লিসেনার রিমুভ করা হয়।

সাধারণ বুলেটপ্রুফ প্যাটার্ন

const button = document.getElementById('demo');

function handleClick() {
  console.log('Clicked once!');
  button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);

এই প্যাটার্নে একই ফাংশন রেফারেন্স ব্যবহার করে অ্যাড এবং রিমুভ করা হয়, যা বেশি পঠনযোগ্য এবং ত্রুটির সম্ভাবনা কম।