03/08/2018, 10:00

Hàm removeEventListener() trong Javascript

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

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. Hàm 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ụ hàm 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: XEM DEMO

<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() trong javascript sẽ không chạy ở một số trình duyệt thấp nên nếu bạn code mà không chạy thì có thể không phải do lỗi của bạn 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 KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Tìm hiểu hàm addEventListener() trong Javascript

Tìm hiểu DOM CSS trong Javascript Cách thêm sự kiện (Event) bằng Javascript Tìm hiểu đối tượng this trong Javascript Bài tập – xây dựng menu dropdown trong Javascript Hàm addEventListener() trong Javascript để thêm một sự kiện vào đối tượng HTML , cách truyền tham số với những ví dụ ...

Vũ Văn Thanh viết 17:02 ngày 04/09/2018

Tìm hiểu hàm và tạo hàm (function) trong Javascript

Hướng dẫn vòng lặp for trong Javascript Sử dụng vòng lặp while – do while trong Javascript Tổng hợp một số ví dụ học Javascript căn bản Cách thao tác với mảng trong Javascript Hàm (Function) là một trong những thành phần cơ sở trong Javascript hay hàm chính là một câu lệnh dùng để ...

Trần Trung Dũng viết 16:58 ngày 04/09/2018

Tìm hiểu hàm removeEventListener() trong Javascript

Tìm hiểu đối tượng this trong Javascript Bài tập – xây dựng menu dropdown trong Javascript Tìm hiểu sự kiện onload trong Javascript Biến toàn cục và biến cục bộ trong Javascript Hàm removeEventListener() trong Javascript có tác dụng xóa đi một hành động cho một sự kiện được mình ...

Vũ Văn Thanh viết 16:55 ngày 04/09/2018

Cách sử dụng hàm (Function) trong JavaScript

1) Hàm là gì? - Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo một thứ tự xác định để xây dựng thành một chức năng cụ thể - Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên. Ví dụ Trong kịch bản bên dưới, chúng ta có một hàm tên ...

Trịnh Tiến Mạnh viết 10:56 ngày 18/08/2018

Hàm (function) trong JavaScript

Kiểu dữ liệu trong JavaScript Hàm (function) trong JavaScript là gì? Hàm trong JavaScript là một chương trình con được thiết kế để thực hiện một công việc cụ thể. Hàm trong JavaScript được thực thi khi chúng được gọi từ một hàm khác, từ một sự kiện hoặc gọi từ chính nó. ...

Trịnh Tiến Mạnh viết 19:13 ngày 11/08/2018
0