DOM removeEventListener() পদ্ধতি একটি HTML নথিতে একটি HTML উপাদান থেকে একটি ইভেন্ট হ্যান্ডলারকে সরিয়ে দেয়৷
সিনট্যাক্স
নিম্নলিখিত সিনট্যাক্স −
document.open(event,function,useCapture);
এখানে, ইভেন্ট ইভেন্টের নাম, ফাংশন প্রতিনিধিত্ব করুন অপসারণ এবং ব্যবহার ক্যাপচার ফাংশন নির্দিষ্ট করে হয় সত্য নেয় অথবা মিথ্যা মান।
যেখানে সত্য রিপ্রেজেন্ট করে ইভেন্ট হ্যান্ডলারকে ক্যাপচারিং ফেজ এবং 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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
“আমার উপর হোভার করুন পরিবর্তনগুলি পর্যবেক্ষণ করতে ” বোতামে ক্লিক করুন এবং তারপরে “ইভেন্ট হ্যান্ডলার সরান-এ ক্লিক করুন "আমার উপর হোভার করুন থেকে ইভেন্ট হ্যান্ডলার সরাতে ” বোতাম৷ "বোতাম। এখন, চালু
এখন, হোভারে, কিছুই হবে না -
