DOM removeEventListener() মেথড HTML ডকুমেন্টে একটি HTML এলিমেন্ট থেকে একটি ইভেন্ট হ্যান্ডলার সরিয়ে দেয়।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
element.removeEventListener(event, function, useCapture);
এখানে, event ইভেন্টের নাম রিপ্রেজেন্ট করে, function সরানো ফাংশন নির্দিষ্ট করে এবং useCapture true বা false মান নেয়।
true ক্যাপচারিং ফেজ থেকে ইভেন্ট হ্যান্ডলার সরাতে এবং false বাবলিং ফেজ থেকে ইভেন্ট হ্যান্ডলার সরাতে ব্যবহার হয়।
উদাহরণ
removeEventListener() মেথডের একটি উদাহরণ দেখি:
<!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() method Demo</h1> <button class="btn hover-btn">Hover on me</button> <button onclick="remove()" class="btn">Remove Event Handler</button> <script> var hoverBtn=document.querySelector('.hover-btn'); function toggleFun(){ hoverBtn.classList.toggle("mycolor"); } hoverBtn.addEventListener('mouseover',toggleFun); function remove(){ hoverBtn.removeEventListener('mouseover',toggleFun); } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
Hover on me বাটনে হোভার করুন পরিবর্তন লক্ষ্য করতে এবং তারপর Remove Event Handler বাটনে ক্লিক করুন Hover on me বাটন থেকে ইভেন্ট হ্যান্ডলার সরাতে। এখন,
এখন, হোভার করলে কিছুই হবে না।
