Phương thức removeEventListener() trong JavaScript với ví dụ

Phương thức removeEventListener() trong JavaScript được dùng để gỡ bỏ trình lắng nghe sự kiện khỏi phần tử đã được gắn trước đó bằng phương thức addEventListener().

Dưới đây là mã cho phương thức removeEventListener():

Ví dụ

<!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>

Kết quả

Mã trên sẽ tạo ra đầu ra sau:

Khi nhấn 'CLICK HERE' ba lần:

Khi nhấn nút 'Remove event Listener' và nhấn lại 'CLICK HERE':