JavaScript: Sự Kiện | V1Study

Trang chủ » Phần Tử Html Nào Có Thể Sử Dụng đến Sự Kiện Onmouseup » JavaScript: Sự Kiện | V1Study

Có thể bạn quan tâm

Nhiệm vụ của JavaScript là để tăng thêm khả năng tương tác với các trang web của bạn. JavaScript thực hiện điều này bằng cách sử dụng một cơ chế gọi là sự kiện. Các sự kiện là một phần của Mô hình Đối tượng Tài liệu (Document Object Model - DOM) Level 3 và mọi phần tử HTML đều chứa một tập hợp các sự kiện có thể kích hoạt Mã JavaScript.

Một sự kiện là một hành động hoặc sự xuất hiện được công nhận bởi phần mềm. Nó có thể được kích hoạt bởi người dùng hoặc hệ thống. Một số ví dụ phổ biến về các sự kiện như người dùng nhấp vào nút lệnh, tải trang web, nhấp vào siêu liên kết, v.v. Sau đây là một số sự kiện HTML phổ biến.

Xử lý sự kiện

Khi xảy ra một sự kiện, ứng dụng sẽ thực thi một tập hợp các tác vụ liên quan. Khối lệnh đạt được mục đích này được gọi là eventhandler. Mỗi phần tử HTML có một tập hợp các sự kiện liên quan đến nó. Ta có thể xác định cách các sự kiện sẽ được xử lý trong JavaScript bằng cách sử dụng các trình xử lý sự kiện.

Loại sự kiện onclick

Đây là loại sự kiện được sử dụng thường xuyên nhất xảy ra khi người dùng nhấp vào nút trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. cho loại sự kiện này.

Ví dụ

<html> <head> <script> function test() { document.write ("Hello Event") } </script> </head> <body> <p>Click vô nút dưới đây để thấy hiệu ứng</p> <input type ="button" onclick="test()" value="Test"> </body> </html>

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Loại sự kiện onsubmit

onsubmit là một sự kiện xảy ra khi bạn cố gắng gửi một biểu mẫu. Bạn có thể đặt xác thực mẫu của bạn đối với loại sự kiện này.

Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây ta đang gọi một hàm có tên validation() trước khi gửi form dữ liệu đến máy chủ web. Nếu hàm validation() trả về true thì form sẽ được gửi, ngược lại sẽ không được gửi.

Ví dụ

<html> <head> <script> function validation() { //nơi validate ......... return true hoặc false } </script> </head> <body> <form method="POST" action="" onsubmit="return validation()"> ....... <input type="submit" value="Gửi" /> </form> </body> </html>

onmouseover và onmouseout

Hai loại sự kiện này sẽ giúp ta tạo hiệu ứng đẹp với hình ảnh hoặc thậm chí với cả văn bản. Sự kiện onmouseover được kích hoạt khi ta chạm chuột phần tử và onmouseout khi ta dời chuột khỏi phần tử

Ví dụ

<html> <head> <script> function over() { var h2=document.getElementById('h2') h2.innerHTML='HÃY DỜI CHUỘT KHỎI TÔI' h2.style.color='red' } function out() { var h2=document.getElementById('h2') h2.innerHTML='HÃY CHẠM CHUỘT VÔ TÔI' h2.style.color='#8ac007' } </script> </head>

<body> <div onmouseover="over()" onmouseout="out()"> <h2 style="color:#8ac007" id="h2">HÃY CHẠM CHUỘT VÔ TÔI</h2> </div> </body> </html>

Output:

Sự kiện tiêu chuẩn HTML 5

Các sự kiện HTML 5 tiêu chuẩn được liệt kê trong bảng sau để bạn tham khảo. Kịch bản chỉ ra một hàm JavaScript sẽ được thực thi đối với sự kiện đó.

Sự kiện Giá trị Mô tả
offline script Kích hoạt khi trang web offline
onabort script Kích hoạt khi một sự kiện abort
onafterprint script Kích hoạt sau khi trang web được in
onbeforeonload script Kích hoạt trước khi trang web được load
onbeforeprint script Kích hoạt trước khi trang web được in
onblur script Kích hoạt khi đối tượng không còn được focus
oncanplay script Kích hoạt khi media có thể bắt đầu play, nhưng có thể phải dừng để đệm
oncanplaythrough script Kích hoạt khi media có thể được play đến hết, ngoại trừ việc dừng để đệm
onchange script Kích hoạt khi một phần tử thay đổi giá trị nó chứa
onclick script Kích hoạt khi nhấn phím trái chuột
oncontextmenu script Kích hoạt khi menu ngữ cảnh được kích hoạt
ondblclick script Kích hoạt khi nhấn đúp chuột
ondrag script Kích hoạt khi một phần tử được kéo
ondragend script Kích hoạt khi kết thúc hoạt động kéo
ondragenter script Kích hoạt khi một phần tử được kéo tới vị trí thả hợp lệ
ondragleave script Kích hoạt khi một phần tử rời vị trí thẻ hợp lệ
ondragover script Kích hoạt khi một phần tử được kéo qua một đích thả hợp lệ
ondragstart script Kích hoạt khi bắt đầu kéo
ondrop script Kích hoạt khi thả phần tử kéo
ondurationchange script Kích hoạt khi độ dài của media thay đổi
onemptied script Kích hoạt khi một phần tử nguồn media đột nhiên empty
onended script Kích hoạt khi media kết thúc
onerror script Kích hoạt khi xảy ra lỗi
onfocus script Kích hoạt khi phần tử được focus (bằng cách click, tab, hoặc phím tắt)
onformchange script Kích hoạt khi thay đổi form
onforminput script Kích hoạt khi form lấy thông tin người dùng
onhaschange script Kích hoạt khi trang web thay đổi
oninput script Kích hoạt khi nhập liệu cho phần tử (thường là của form)
oninvalid script Kích hoạt khi phần tử không có giá trị
onkeydown script Kích hoạt khi nhấn phím của bàn phím xuống
onkeypress script Kích hoạt khi nhấn và nhả phím
onkeyup script Kích hoạt khi nhả phím
onload script Kích hoạt khi load trang
onloadeddata script Kích hoạt khi tải dữ liệu media
onloadedmetadata script Kích hoạt khi load xong dữ liệu media
onloadstart script Kích hoạt khi trình duyệt bắt đầu tải dữ liệu media
onmessage script Kích hoạt khi thông báo được kích hoạt
onmousedown script Kích hoạt khi nhấn chuột xuống
onmousemove script Kích hoạt khi di chuyển chuột
onmouseout script Kích hoạt khi di chuyển chuột ra khỏi phần tử
onmouseover script Kích hoạt khi chạm chuột vô phần tử
onmouseup script Kích hoạt khi nhà chuột ra (không nhấn xuống nữa)
onmousewheel script Kích hoạt khi phím xoay của chuột được xoay
onoffline script Kích hoạt khi trang web hoạt động offline
ononline script Kích hoạt khi trang web hoạt động online
onpagehide script Kích hoạt khi trang ẩn
onpageshow script Kích hoạt khi trang hiện
onpause script Kích hoạt khi dữ liệu media tạm dừng
onplay script Kích hoạt khi dữ liệu media bắt đầu play
onplaying script Kích hoạt khi dữ liệu media đang chơi
onpopstate script Kích hoạt khi lịch sử của cửa sổ thay đổi
onprogress script Kích hoạt khi trình duyệt nạp dữ liệu media
onratechange script Kích hoạt khi thay đổi tốc độ play của media data
onreadystatechange script Kích hoạt khi kích hoạt khi thay đổi trạng thái ready
onredo script Kích hoạt khi redo trang web
onresize script Kích hoạt khi thay đổi kích thước trang web
onscroll script Kích hoạt khi cuộn thanh cuộn của phần tử
onseeked script Kích hoạt khi thuộc tính tìm tìm kiếm của phần tử không còn đúng nữa, và quá trình tìm kiếm đã kết thúc
onseeking script Kích hoạt khi bắt đầu quá trình tìm kiếm
onselect script Kích hoạt khi chọn phần tử
onstalled script Kích hoạt khi có lỗi xảy ra khi nạp media data
onstorage script Kích hoạt khi tải trang web
onsubmit script Kích hoạt khi gửi form dữ liệu
onsuspend script Kích hoạt khi trình duyệt đang nạp dữ liệu media thì bị dừng trước khi toàn bị file media được nạp
ontimeupdate script Kích hoạt khi khi media thay đổi tốc độ play
onundo script Kích hoạt khi undo trang web
onunload script Kích hoạt khi người dùng tắt trang web
onvolumechange script Kích hoạt khi thay đổi âm lượng, bao gồm cả khi thay đổi "mute"
onwaiting script Kích hoạt khi media dừng play và đang chờ để play tiếp

Từ khóa » Phần Tử Html Nào Có Thể Sử Dụng đến Sự Kiện Onmouseup