/Hàm blur trong JQuery API
Các hàm built-in17/10/2023

Hàm blur trong JQuery API

Hàm blur một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để gán một trình xử lý sự kiện cho sự kiện “blur” hoặc kích hoạt sự kiện đó trên một phần tử.

1. Cú pháp hàm blur

Gán một trình xử lý sự kiện khi phần tử mất trỏ vào.

Cú pháp:

  • Version 1.0: blur( handler )
    • handler: Một hàm sẽ được thực thi mỗi khi sự kiện “blur” xảy ra.
  • Version 1.4.3: blur( [eventData ], handler )
    • eventData: Một đối tượng chứa dữ liệu sẽ được truyền vào trình xử lý sự kiện.
    • handler: Một hàm sẽ được thực thi mỗi khi sự kiện “blur” xảy ra.
  • Version 1.0 (không chấp nhận tham số): blur()

Tham số:

  • handler: Một hàm xử lý sự kiện, có thể chứa đối tượng sự kiện (eventObject).

Kết quả trả về:

  • Không có giá trị trả về.

Phiên bản hỗ trợ:

  • Version 1.0: Hỗ trợ hàm blur() không tham số.
  • Version 1.4.3: Hỗ trợ hàm blur() với tham số eventData và handler.

Chú ý:

  • Hàm blur() trong version 1.0 không chấp nhận bất kỳ tham số nào.
  • Phiên bản 1.4.3 cho phép truyền thêm dữ liệu (eventData) vào trình xử lý sự kiện (handler).

2. Sự kiện blur là gì?

Sự kiện “blur” xảy ra khi một phần tử (ví dụ: một ô input hoặc textarea) mất đi trạng thái focus, tức là khi người dùng click ra khỏi phần tử đó sau khi đã nhập dữ liệu hoặc tương tác với nó.

Đây là một trong những sự kiện quan trọng trong giao diện người dùng và thường được sử dụng để kiểm tra và xử lý dữ liệu sau khi người dùng đã nhập vào một trường.

Khi một phần tử mất trạng thái focus, sự kiện “blur” được kích hoạt, cho phép bạn thực hiện các hành động, xử lý dữ liệu, kiểm tra tính hợp lệ và cập nhật giao diện tương ứng.

Ví dụ, bạn có thể sử dụng sự kiện “blur” để kiểm tra xem người dùng đã nhập thông tin hợp lệ trong một ô input hay chưa, và thông báo lỗi nếu cần thiết. Điều này giúp cải thiện trải nghiệm người dùng và đảm bảo tính nhất quán và đúng đắn của dữ liệu.

Hàm blur trong JQuery API

3. Một số ví dụ sử dụng hàm blur

3.1. Sự kiện blur không tham số

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="input1" placeholder="Blur without parameter">
<p id="output1"></p>

<script>
$(document).ready(function(){
  $("#input1").blur(function(){
    $("#output1").text("Blur event triggered without parameters.");
  });
});
</script>

</body>
</html>

Giải thích:

  • Khi người dùng rời khỏi ô input (#input1), sự kiện “blur” được kích hoạt và thông báo “Blur event triggered without parameters” xuất hiện.

3.2. Sự kiện blur với hàm handler

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="input2" placeholder="Blur with handler">
<p id="output2"></p>

<script>
$(document).ready(function(){
  function blurHandler(event) {
    $("#output2").text("Blur event triggered with handler.");
  }

  $("#input2").blur(blurHandler);
});
</script>

</body>
</html>

Giải thích:

  • Khi người dùng rời khỏi ô input (#input2), sự kiện “blur” được kích hoạt và hàm blurHandler được gọi, thông báo “Blur event triggered with handler” xuất hiện.

3.3. Sự kiện blur với hàm handler và eventData

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="input3" placeholder="Blur with eventData and handler">
<p id="output3"></p>

<script>
$(document).ready(function(){
  function blurHandler(event) {
    $("#output3").text("Blur event triggered with eventData and handler. with message:=" 
	+ event.data.message + " with status:=" + event.data.status);
  }

  // Passing eventData as an object
  var eventData = { message: "This is additional data.", status: 'Success'};

  $("#input3").blur(eventData, blurHandler);
});
</script>

</body>
</html>

Giải thích:

  • Khi người dùng rời khỏi ô input (#input3), sự kiện “blur” được kích hoạt và hàm blurHandler được gọi, hiển thị thông báo “Blur event triggered with eventData and handler”. Trong ví dụ này, chúng ta cũng truyền một đối tượng eventData chứa dữ liệu bổ sung.

3.4. Hàm blur đã bị lỗi thời nên sử dụng hàm on

Ham blur với các cú pháp .blur(handler) và .blur(eventData, handler) đã bị đánh dấu là lỗi thời (deprecated) với các phiên bản jQuery mới nhất hiện nay.

Điều này có nghĩa rằng chúng không còn được khuyến nghị sử dụng trong các phiên bản jQuery mới hơn.

Thay vào đó, người ta khuyên nên sử dụng .on(“blur”, handler) hoặc .on(“blur”, eventData, handler) để gắn sự kiện “blur” với một handler để kích hoạt sự kiện “blur”.

Dưới đây là ví dụ minh họa:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="input1" placeholder="Blur event using .on()">
<p id="output1"></p>

<script>
$(document).ready(function(){
  $("#input1").on("blur", function(){
    $("#output1").text("Blur event triggered using .on()");
  });
});
</script>

</body>
</html>

Trong ví dụ này, chúng ta sử dụng .on(“blur”, handler) để gắn sự kiện “blur” và xử lý khi sự kiện này xảy ra.

3.5. Hàm trigger (“blur”) và on(“blur”, handler)

Kích hoạt sự kiện “blur” trên một phần tử (sử dụng .trigger("blur")):

  • Mục tiêu: Tạo tình huống giống như người dùng rời khỏi một ô nhập liệu, khiến sự kiện “blur” xảy ra tự động.
  • Cách thực hiện: Gọi .trigger("blur") trên phần tử cần kích hoạt sự kiện “blur”.

Gắn một handler vào sự kiện “blur” của một phần tử (sử dụng .on("blur", handler)):

  • Mục tiêu: Xác định một hàm xử lý (handler) mà sẽ được gọi khi sự kiện “blur” xảy ra trên phần tử đó.
  • Cách thực hiện: Gọi .on("blur", handler) để gắn một hàm xử lý (handler) vào sự kiện “blur” của phần tử. Khi sự kiện “blur” xảy ra, handler này sẽ được gọi.

Để minh họa điều này, dưới đây là ví dụ:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="input" placeholder="Hover over me">

<script>
$(document).ready(function(){
  // Gắn handler cho sự kiện "blur" của input
  $("#input").on("blur", function(){
    alert("Blur event handled using .on()");
  });

  // trigger sẽ Kích hoạt sự kiện "blur" luôn khi vào trang,không đợi người dùng blur khỏi input sau đó
  $("#input").trigger("blur");
});
</script>

</body>
</html>

Trong ví dụ này, chúng ta gắn một handler cho sự kiện “blur” của input sử dụng .on("blur", handler). Sau đó, chúng ta kích hoạt sự kiện “blur” bằng cách sử dụng .trigger("blur").

Related posts