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ì
Bạn đang xem: Onblur là gì
1. Sự kiện Chuột trong Javascript2. Sự kiện bàn phím trong Javascript3. Sự kiện Form trong Javascript4. Sự kiện Document / Window
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.
Bạn đang đọc: Html — Sự Khác Biệt Giữa Thuộc Tính Onblur Là Gì ? Sự Khác Biệt Giữa Thuộc Tính Onblur Là Gì
Trong 1 số ít trường hợp, Trình duyệt hoàn toàn có thể kích hoạt những sự kiện, ví dụ điển hình như tải trang và hủy tải những 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à những hành vi nhằm mục đích tạo ra những website động / tương tác, trả lời lại cho người dùng bằng Javascript .Nếu muốn học lập trình web động vừa đủ, chuyên nghiệp hơn với chuyên viên, bạn hoàn toàn có thể tìm hiểu thêm 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ó 1 số ít cách để chỉ định một trình giải quyết và xử lý sự kiện. Cách đơn thuần nhất là thêm chúng trực tiếp vào thẻ mở màn của những thành phần HTML bằng cách sử dụng những thuộc tính giải quyết và xử lý sự kiện đặc biệt quan trọng .
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 MeTuy nhiên, để giữ JavaScript tách biệt khỏi HTML, bạn nên thiết lập trình giải quyết và xử lý sự kiện trong tệp JavaScript bên ngoài hoặc trong những 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, những sự kiện hoàn toà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, tất cả chúng ta sẽ tìm hiểu và khám phá về chúng trong những bài viết sau. Phần sau đây sẽ cung ứng cho bạn một cái nhìn tổng quan ngắn gọn về từng sự kiện có ích nhất cùng với những ví dụ thực hành thực tế trong lập trình web thực tiễn .
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ố ít sự kiện chuột quan trọng nhất và trình giải quyết và 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 website. Thông thường, đây là những thành phần 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ử.xảy ra khi người dùngvào một phần tửđể mở menu ngữ cảnh. Bạn hoàn toàn có thể giải quyết và xử lý một sự kiện toàn cảnh bằng trình giải quyết và xử lý. Ví dụ sau sẽ hiển thị một thông tin cảnh báo nhắc nhở khi bạn nhấp chuột phải vào những thành phần .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 tin cảnh báo nhắc nhở khi bạn đặt chuột lên những thành phần .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 tin cảnh báo nhắc nhở 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ách Chơi Left 4 Dead 2 Trên Garena Plus, Gửi Các Bạn Link Tải Bản Garena
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 tin cảnh báo nhắc nhở 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ị tinh chỉnh và điều khiển biểu mẫu, ví dụ điển hình 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ố ít 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 điển hình 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, thứ nhất hãy nhấp vào bên trong thành phần input để tạo focus, sau đó nhấn phím tab trên bàn phím, tập trung chuyên sâu 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 tin cảnh báo nhắc nhở khi bạn đổi khác 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 tin cảnh báo nhắc nhở trong khi gửi biểu mẫu đến sever .First Name :
4. Sự kiện Document / Window
Các sự kiện cũng được kích hoạt trong những trường hợp khi trang được tải hoặc khi người dùng đổi khác size hành lang 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.
Ví dụ sau đây sẽ hiển thị cho bạn một thông tin cảnh báo nhắc nhở ngay khi trang tải xong .
