Trong bài này chúng ta sẽ tìm hiểu phương thức removeEventListener trong Javascript, đây là hàm giúp bạn xóa hành động ra khỏi một sự kiện nào đó.
Nếu như hàm addEventListener() dùng để thêm một hành động cho một sự kiện thì hàm removeEventListener() lại có tác dụng ngược lại, nó sẽ xóa đi một hành động đã được gán cho một sự kiện.
1. removeEventListener trong Javascript
Ví dụ, bạn gán hành động validate form cho sự kiện submit của form, sau đó bạn không muốn validate nữa thì bạn sẽ có hai giải pháp. Một là bạn sẽ phải xóa đi đoạn code validate đó và hai là bạn chỉ cần sử dụng hàm removeEventListener() để xóa hành động validate.
Cú pháp:
Bài viết này được đăng tại [kiso.vn]
object.removeEventListener("click", some_action);Chính vì nó sẽ xóa một hành động cho nên bắt buộc phải biết tên hành động đó là gì, vì vậy ta sẽ đặt hành động nó trong một hàm để nhận diện.
Ví dụ:
// Lấy đối tượng
var object = document.getElementById("something");
// Hanh động validate
function do_validate()
{
// do something
}
// Thêm hành động vào sự kiện click
object.addEventListener("click", do_validate);
// Xóa hành động validate vào sự kiện click
object.removeEventListener("click", do_validate);2. Ví dụ removeEventListener() trong Javascript
Vì hàm này khá đơn giản nên mình chỉ trình bày một ví dụ thôi nhé.
Ví dụ: Xây dựng một ứng dụng khi di chuyển chuột thì sẽ xuất hiện một dãy số ngẫu nhiên, nếu người dùng click vào button Stop Random thì sẽ dừng random dãy số đó.
Như vậy ta có hai thẻ HTML chính, thứ nhất là một div dùng để hiển thị dãy số ngẫu nhiên và thứ hai là một button dùng để để click Stop Random. Và dây là một số lưu ý trước khi làm bài:
- Đề bài yêu cầu khi move chuột trên trang web nên ta sẽ thêm sự kiện
mousemovecho thẻ<html>. - Dùng hàm addEventListener() để thêm sự kiện
mousemovevào thẻ<html> - Dùng đối tượng
Math.random()để lấy dãy số ngẫu nhiên - Dùng hàm
removeEventListener()để xóa đi những hành động của sự kiệnmousemove(xem bài sự kiện trong javascript).
<html>
<body>
<div id="result"></div>
<input type="button" value="Stop Random" id="stop_random" />
<script language="javascript">
// Bước 1: Lấy các đối tượng
var result = document.getElementById("result");
var button = document.getElementById("stop_random");
var html = document.getElementsByTagName("html")[0];
// Bước 2: Định nghĩa hành động hiển thị dãy số random
function do_random()
{
var randomString = Math.random();
result.innerHTML = randomString;
}
// Bước 3: Thêm hành động do_random cho sự kiện mousemove thẻ <html>,
html.addEventListener("mousemove", do_random);
// Bước 4: Thêm sự kiện click cho button
button.addEventListener("click", function(){
// Xóa hành động do_random khỏi sự kiện mousemove
html.removeEventListener("mousemove", do_random);
});
</script>
</body>
</html>3. Lời kết
Hàm addEventListener() và removeEventListener() javascript sẽ không chạy ở một số trình duyệt, vì vậy bạn cần nâng cấp trình duyệt của mình lên phiên bản mới nhé.
Tóm lại hàm removeEventListener() dùng để xóa một hành động ra khỏi một sự kiện nào đó và hành động đó phải được định nghĩa bằng một hàm chứ không gán trực tiếp vào. Như trong ví dụ trên mình định nghĩa hành động tên là do_random.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. removeEventListener trong Javascript2. Ví dụ removeEventListener() trong Javascript3....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. removeEventListener trong Javascript2. Ví dụ removeEventListener() trong Javascript3. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. removeEventListener trong Javascript2. Ví dụ removeEventListener() trong Javascript3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. removeEventListener trong Javascript2. Ví dụ removeEventListener() trong Javascript3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. removeEventListener trong Javascript2. Ví dụ removeEventListener() trong Javascript3. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng...