ONBLUR LÀ GÌ

  -  

Trong hướng bài hướng dẫn tự học Javascript này, bạn sẽ được học cách xử lý các sự kiện trong JavaScript.

Bạn đang xem: Onblur là gì

Hiểu về Sự kiện và Xử lý sự kiện trong Javascript

Sự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùngnhấp vào một liên kết hoặc button, nhập văn bản vào textboxhoặc textarea, thực hiện lựa chọn trong check box, nhấn phím trên bàn phím, di chuyển con trỏ chuột , gửi biểu mẫu, v.v.

Trong một số trường hợp, Trình duyệt có thể kích hoạt các sự kiện, chẳng hạn như tải trang và hủy tải các sự kiện.

Khi một sự kiện xảy ra, bạn có thể sử dụng Trình Xử lý sự kiện JavaScript(Javascript event handler) hoặc Trình lắng nghe sự kiện (Javascript event listener)để phát hiện chúng và thực hiện nhiệm vụ cụ thể hoặc tập hợp các nhiệm vụ.

Đây là các hành động nhằm tạo ra các trang web động / tương tác, hồi đáp lại cho người dùng bằng Javascript.

Nếu muốn học lập trình web động đầy đủ, bài bản hơn với chuyên gia, bạn có thể tham khảo tại đây:

Theo quy ước, tên của trình xử lý sự kiện luôn bắt đầu bằng từ "on", do đó, trình xử lý sự kiện cho sự kiện nhấp được gọi là onclick, tương tự như trình xử lý sự kiện cho sự kiện tải được gọi là onload, trình xử lý sự kiện cho sự kiện mờ được gọi là onblur, v.v.

Có một số cách để chỉ định một trình xử lý sự kiện. Cách đơn giản nhất là thêm chúng trực tiếp vào thẻ bắt đầu của các thành phần HTML bằng cách sử dụng các thuộc tính xử lý sự kiện đặc biệt.

Ví dụ: Để gán một trình xử lý nhấp chuột cho một phần tử button, chúng ta có thể sử dụng thuộc tính onclick, như sau:

Click Me

Tuy nhiên, để giữ JavaScript tách biệt khỏi HTML, bạn nên thiết lập trình xử lý sự kiện trong tệp JavaScript bên ngoài hoặc trong các thẻ script và / script, ví dụ như sau:

Click Me

Do các thuộc tính HTML không phân biệt chữ hoa chữ thường nênonclickcũng có thể được viết dưới dạngonClick, OnClick hoặc ONCLICK. Nhưng giá trị của nó lại là trường hợp phân biệt hoa thường.

Nói chung, các sự kiện có thể được phân loại thành bốn nhóm chính - Sự kiện chuột, Sự kiện bàn phím, Sự kiện biểu mẫu và Sự kiện Document/ Window.

Còn có nhiều sự kiện khác, chúng ta sẽ tìm hiểu về chúng trong các bài viết sau. Phần sau đây sẽ cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về từng sự kiện hữu ích nhất cùng với các ví dụ thực hành trong lập trình web thực tế.

*

Hướng dẫn Xử lý sự kiện trong Javascript

1. Sự kiện Chuột trong Javascript

Một Sự kiện chuột được kích hoạt khi người dùng nhấp vào một số phần tử, di chuyển con trỏ chuột lên một phần tử, v.v ...

Dưới đây là một số sự kiện chuột quan trọng nhất và trình xử lý sự kiện của chúng.

1.1. Sự kiện Click (onclick)

Sự kiện click xảy ra khi người dùng nhấp vào một phần tửtrên trang web. Thông thường, đây là các phần tử dạnghình thức hoặcliên kết.

Bạn có thể xử lý một sự kiện nhấp bằng trình xử lý Sự kiện onclick.Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn nhấp vào các phần tử (nút hoặc liên kết).

Click MeClick Me

1.2. Sự kiện oncontextmenu

Sự kiện bối cảnh xảy ra khi người dùng nhấp chuột phải vào một phần tửđể mở menu ngữ cảnh. Bạn có thể xử lý một sự kiện bối cảnh bằng trình xử lý sự kiện oncontextmenu.Ví dụ sau sẽ hiển thị một thông báo cảnh báo khi bạn nhấp chuột phải vào các phần tử.

Click chuột phảiClick chuột phải

1.3. Sự kiện di chuột một phần tử (onmouseover)

Sự kiện di chuột xảy ra khi người dùng di chuyển con trỏ chuột qua một phần tử.Bạn có thể xử lý sự kiện di chuột bằng trình xử lý Sự kiện onmouseover.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn đặt chuột lên các phần tử.

Di chuột qua đây!Di chuột qua đây!

1.4. Sự kiện di chuột ra khỏi phần tử (onmouseout)

Sự kiện mouseout xảy ra khi người dùng di chuyển con trỏ chuột ra ngoài một phần tử.Bạn có thể xử lý sự kiện mouseout bằng trình xử lý sự kiện onmouseout.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện mouseout xảy ra.

Đặt chuột vào đây và di ra ngoàiĐặt chuột vào đây và di ra ngoài

2. Sự kiện bàn phím trong Javascript

Một sự kiện bàn phím được kích hoạt khi người dùng nhấn hoặc nhả một phím trên bàn phím. Dưới đây là một số sự kiện bàn phím quan trọng nhất và xử lý sự kiện của chúng.

Xem thêm: Các Loại Hợp Đồng Quyền Chọn Là Gì ? Hợp Đồng Quyền Chọn Là Gì

2.1. Sự kiến nhấn phím bất kỳ(onkeydown)

Sự kiện nhấn phím xảy ra khi người dùng nhấn phím trên bàn phím.Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeydown.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keydown xảy ra.

2.2. Sự kiện nhả phím (onkeyup)

Sự kiện keyup xảy ra khi người dùng nhả một phím trên bàn phím.Bạn có thể xử lý sự kiện keyup bằng trình xử lý sự kiện onkeyup. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keyup xảy ra.

2.3. Sự kiện nhấn phím ký tự (onkeypress)

Sự kiện keypress xảy ra khi người dùng nhấn xuống một phím trên bàn phím là một ký tự.

Ví dụ: các phím như Ctrl, Shift, Alt, Esc, phím mũi tên, v.v. sẽ không tạo ra sự kiện keypress, nhưng sẽ tạo ra sự kiện keydown và keyup.Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeypress. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keypress xảy ra.

3. Sự kiện Form trong Javascript

Sự kiện form được kích hoạt khi form controlnhậnfocus hoặc khi người dùng sửa đổi giá trị điều khiển biểu mẫu, chẳng hạn như nhập văn bản vào text input, chọn bất kỳ tùy chọn nào trong check box, v.v ...

Dưới đây là một số sự kiện form quan trọng nhất và cách Xử lý sự kiện của chúng.

3.1. Sự kiện focus (onfocus)

Sự kiện focus xảy ra khi người dùng tập trung vào một phần tử trên trang web.Bạn có thể xử lý sự kiện focus bằng trình xử lý sự kiện onfocus.

Ví dụ sau đây sẽ làm nổi bật nền của text inputbằng màu vàng khi nhận được focus.

Button

Lưu ý: Từ khóa this đề cập đến "chính nó" trong cùng mộtbối cảnh.

3.2. Sự kiện blur (onblur)

Sự kiện blur xảy ra khi người dùng bỏ focusra khỏi phần tử của formhoặc một cửa sổ.Bạn có thể xử lý sự kiện blur với trình xử lý sự kiện onblur. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi phần tử nhập văn bản mất focus.

Submit

Để sự kiện blur được bật,trước tiên hãy nhấp vào bên trong phần tử input để tạo focus, sau đó nhấn phím tab trên bàn phím, tập trung vào một cái gì đó khác hoặc nhấp vào bên ngoài nó.

3.3. Sự kiện thay đổi (onchange)

Sự kiện thay đổi xảy ra khi người dùng thay đổi giá trị của một phần tử form.Bạn có thể xử lý sự kiện thay đổi với trình xử lý sự kiện onchange.

Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi tùy chọn trong select box.

Chọn giới tính Nam Nữ

3.4. Sự kiện submit(onsubmit)

Sự kiện submit chỉ xảy ra khi người dùng gửi biểu mẫu trên trang web.Bạn có thể xử lý sự kiện gửi với trình xử lý sự kiện onsubmit.

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo trong khi gửi biểu mẫu đến máy chủ.

First Name:

4. Sự kiện Document / Window

Các sự kiện cũng được kích hoạt trong các tình huống khi trang được tải hoặc khi người dùng thay đổi kích thước cửa sổ trình duyệt, v.v ...

Dưới đây là một số sự kiện Document/ Windowquan trọng nhất và trình xử lý sự kiện của chúng.

4.1. Sự kiện tải trang (onload)

Sự kiện tải trang xảy ra khi một trang web đã tải xong trong trình duyệt web.Bạn có thể xử lý sự kiện tải với trình xử lý sự kiện onload.

Xem thêm: Phong Cách Smart Casual Là Gì ? "Đỉnh Cao" Phong Cách Smart

Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo ngay khi trang tải xong.