কম্পিউটার

উদাহরণ সহ JavaScript removeEventListener() পদ্ধতি


JavaScript removeEventListener() পদ্ধতিটি একটি উপাদান থেকে একটি ইভেন্ট শ্রোতাকে সরাতে ব্যবহৃত হয় যা পূর্বে addEventListener() পদ্ধতির সাথে সংযুক্ত ছিল।

RemoveEventListener() মেথড -

-এর কোড নিচে দেওয়া হল

উদাহরণ

<!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 HER'-এ ক্লিক করলে -

উদাহরণ সহ JavaScript removeEventListener() পদ্ধতি

'ইভেন্ট লিসেনার সরান' বোতামে ক্লিক করার পরে এবং আবার 'এখানে ক্লিক করুন' বোতামে ক্লিক করুন -

উদাহরণ সহ JavaScript removeEventListener() পদ্ধতি


  1. জাভাস্ক্রিপ্ট সমষ্টি ফাংশন একটি বোতাম ক্লিক করুন

  2. বোতাম ক্লিকে জাভাস্ক্রিপ্টে একটি ডিভ কীভাবে লুকাবেন?

  3. জাভাস্ক্রিপ্টে বোতাম ক্লিকে li উপাদানগুলি কীভাবে সরিয়ে ফেলা যায়?

  4. জাভাস্ক্রিপ্টের সাহায্যে বোতামে ক্লিকে নাম যোগ এবং অপসারণ কিভাবে করবেন?