PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Phương thức removeEventListener() Javascript

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

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 mousemove cho thẻ <html>.
  • Dùng hàm addEventListener() để thêm sự kiện mousemove và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ện mousemove (xem bài sự kiện trong javascript).
Bài giải RUN
<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()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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top