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é.

Related Posts

Next.js – Khám phá Framework JavaScript tuyệt vời cho phát triển ứng dụng web

Giới thiệu về Next.js Next.js là một framework JavaScript mã nguồn mở và phổ biến được sử dụng để xây dựng các ứng dụng web hiệu suất…

Tạo Form đăng ký bằng Javascript

Ghi đè trong java, cách thực hiện chi tiết

Trong lập trình hướng đối tượng, ghi đè là một kỹ thuật cho phép các đối tượng con ghi đè lại phương thức của đối tượng cha…

noi-chuoi-java

Nối chuỗi trong Java

Nối chuỗi trong Java là phương pháp nối hai chuỗi riêng biệt lại với nhau. Bạn có thể sử dụng toán tử (+) hoặc phương thức concat()….

vuejs-la-gi

Vuejs là gì? Tìm hiểu tổng quan về Vue.js

JavaScript là ngôn ngữ lập trình phía Front end có độ phổ biến rất lớn. Hàng loạt Framework Js được ra đời được viết từ nó. Và…

Overriding-java-1

Overriding trong Java

Bài viết này sẽ giúp bạn hiểu về tính đa hình trong Java thông qua Overriding. Nếu bạn đã tìm hiểu về kế thừa lớp sẽ thấy…

javascript

Cách gọi hàm JavaScript trong HTML

Hàm (Functions) trong JavaScript nếu không gọi đến nó sẽ không thực thi chức năng. Vì thế để thực hiện một nhiệm vụ nào đó ở trong…

Game bài đổi thưởng hữu ích:

Tải Sunwin | Tải Go88 | Hit Club | 789 | Trang Chủ Kubet