Phương thức DOM removeEventListener () xóa trình xử lý sự kiện khỏi phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
document.open(event,function,useCapture);
Đây, sự kiện đại diện cho tên sự kiện, chức năng chỉ định chức năng để loại bỏ và useCapture lấy đúng hoặc sai giá trị.
true ở đâu đại diện loại bỏ trình xử lý sự kiện khỏi giai đoạn nắm bắt và sai đại diện loại bỏ trình xử lý sự kiện khỏi giai đoạn sủi bọt.
Ví dụ
Hãy để chúng tôi xem một ví dụ về phương thức 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Di chuột trên “ Di chuột vào tôi ”Để quan sát các thay đổi và sau đó nhấp vào“ Xóa trình xử lý sự kiện ”Để xóa trình xử lý sự kiện khỏi nút“ Di chuột qua tôi " khuy ao. Bây giờ, trên
Bây giờ, khi di chuột, sẽ không có gì xảy ra -