Trong bài viết này mình sẽ giới thiệu đến các bạn sự kiện gửi biểu mẫu trong Javascript, đây là sự kiện giúp bạn kiểm soát hành động gửi biểu mẫu của người dùng khi họ nhấp vào nút gửi
Click Me
1. 2. Event oncontextmenu
Sự kiện cảnh báo 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 cảnh báo sự kiện bằng cách 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ải
Click chuột phải1. 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 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ài2. 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 giải nén 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
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 giải phóng phím [onkeyup]
Sự kiện keyup xảy ra khi người dùng giải phóng 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 nhấn phím xảy ra khi người dùng nhấn 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 nhấn phím, 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 nhấn phím xảy ra
3. Sự kiện Biểu mẫu trong Javascript
Sự kiện biểu mẫu được kích hoạt khi điều khiển biểu mẫu nhận tiêu điểm 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 nhập văn bản, chọn bất kỳ tùy chọn nào trong hộp kiểm, v. v
Dưới đây là một số hình thức sự kiện quan trọng nhất và cách xử lý các sự kiện của họ
3. 1. Sự kiện focus [onfocus]
Sự kiện tập trung 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 kiểu nhập văn bản bằng màu vàng khi nhận được tiêu điểm
ButtonLưu ý. Từ khóa chủ đề này cập nhật đến "chính nó" trong cùng một cảnh báo
3. 2. Sự kiện làm mờ [onblur]
Sự kiện làm mờ xảy ra khi người dùng bỏ tiêu điểm ra khỏi phần tử của biểu mẫu hoặc một cửa sổ
Bạn có thể xử lý sự kiện làm mờ với trình xử lý sự kiện làm mờ. Ví dụ sau sẽ hiển thị cho bạn một cảnh báo khi phần tử nhập văn bản mất tiêu điểm
Click Me
Để điều kiện làm mờ được bật, trước tiên hãy nhấp vào bên trong phần đầu vào tử để tạo tiêu điểm, sau đó nhấn tab phím 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ử biểu mẫu
You can handle event change with the process 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 hộp chọn
Click Me
3. 4. Sự kiện gửi [onsubmit]
Sự kiện gửi 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 khi gửi biểu mẫu đến máy chủ
Click Me
4. Sự kiện Tài liệu / Cửa sổ
Các sự kiện cũng được kích hoạt trong các tình huống khi trang được tải xuống 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 Tài liệu / Cửa sổ quan trọng nhất và quy trình xử lý các sự kiện của họ
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 tải
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
Click Me
4. 2. Sự kiện hủy tải trang [onunload]
Sự kiện hủy tải trang xảy ra khi người dùng rời khỏi trang web hiện tại
Bạn có thể xử lý sự kiện tải xuống bằng cách xử lý sự kiện tải xuống
Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn cố gắng rời khỏi trang
Click Me
4. 3. Sự kiện thay đổi kích thước trình duyệt [onresize]
Sự kiện thay đổi kích thước trình duyệt xảy ra khi người dùng thay đổi kích thước cửa sổ trình duyệt
Sự kiện thay đổi kích thước cũng xảy ra trong các tình huống khi cửa sổ trình duyệt được thu nhỏ hoặc mở rộng
Bạn có thể xử lý sự kiện thay đổi kích thước với quá trình xử lý sự kiện onresize
Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi kích thước cửa sổ trình duyệt sang chiều rộng và chiều cao mới
Bạn đã hiểu về sự kiện trong Javascript chưa?
Đây là những sự kiện quan trọng nhất trong Javascript và cách xử lý các sự kiện này
Chúng ta sẽ thường thấy các nhiệm vụ này khi thiết lập web thực tế. Hãy cố gắng thực hiện và ghi nhớ nhé