Addeventlistener(), removeEventListener() trong javascript

Sự kiện trong Javascript sẽ bao gồm click, hover, onmouseout, onload vv… Hôm nay bạn sẽ được tìm hiểu về ddeventlistener() và removeEventListener() để lắng nghe hành động của người dùng.

Addeventlistener()

Trước tiên chúng ta sẽ đi tìm hiểu về ddeventlistener và cách sử dụng thế nào.

Cú pháp:

element.addEventListener(event, functionName, useCapture);

Giải thích:

event: Là các sự kiện trong Javascript
functionName: Đây là hàm thực thi
useCapture: Đây là một tham số tùy chọn. Các giá trị có thể có của nó là true và false . Khi nó được đặt thành true, trình xử lý sự kiện sẽ thực thi trong giai đoạn bắt. Ngược lại sẽ là false.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>Nhấp vào bất kỳ đâu trong văn bản.</p>

<p id="demo"></p>

<script>
document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Ngạc nhiên chưa?";
});
</script>

</body>
</html>

Sau khi nhấp vào văn bản dòng chữ “Ngạc nhiên chưa?” sẽ hiện lên.

Hoặc

const x = document.querySelector("p");
x.addEventListener("click", function(event) {
  document.write('Chào các bạn!');
})

Hoặc bạn cũng có thể viết theo cách này

<button id="btnClick"> Nhấp vào đây </button>   

<script>
function fun() {  
    alert("Hành động đã thực hiện");  
}  
 
var mybtn = document.getElementById("btnClick");  
mybtn.addEventListener("click", fun);   
</script>

removeEventListener()

removeEventListener dùng để xóa sự kiện được thêm vào bởi addEventListener().

Thực hiện ví dụ sau:

<button id="btnClick"> Tính tổng </button>   

<script>
function fun() { 
  var x = 10;
  var y = 20;
  document.write(x+y);
} 
var mybtn = document.getElementById("btnClick"); mybtn.addEventListener("click", fun);
//mybtn.removeEventListener("click", fun);
</script>

Khi chạy thì đoạn mã trên bạn sẽ in ra được kết quả là 30. Tuy nhiên khi bỏ dấu chú thích // phía trước mybtn.removeEventListener(“click”, fun); đi thì không có kết quả gì.

removeEventListener đã xóa bỏ sự kiện đã được thêm ở phía trên đi.

Kết thúc bài học này bạn đã được tìm hiểu về addeventlistener(), removeEventListener(). Không có gì quá khó đúng không nào? Hãy luyện tập mỗi ngày để nâng cao kiến thức về Javascript nhé.