Sự Kiện (Event) Trong JavaScript - VietTuts

Trang chủ » Phần Tử Html Nào Có Thể Sử Dụng đến Sự Kiện Onmouseup » Sự Kiện (Event) Trong JavaScript - VietTuts

Có thể bạn quan tâm

Hàm (function) trong JavaScript Mệnh đề if-else trong JavaScript

Nội dung chính

  • Sự kiện là gì?
  • Tương tác với sự kiện
  • Sự kiện onclick
  • Sự kiện onmouseover và onmouseout
  • Sự kiện onmousedown, onmouseup và onclick
  • Sự kiện HTML5 chuẩn

Sự kiện là gì?

Sự kiện (Event) trong JavaScript là sự tương tác của JavaScript với HTML xảy ra khi người dùng hoặc trình duyệt thao tác với một trang web.

Các sự kiện là một phần của Document Object Model (DOM) Level 3 và mỗi phần tử HTML chứa một tập hợp các sự kiện mà có thể kích hoạt chương trình JavaScript.

Ví dụ về các sự kiện HTML:

  • Khi người dùng click chuột
  • Khi một trang web đã được tải
  • Khi một hình ảnh đã được tải
  • Khi di chuyển chuột qua một phần tử
  • Khi một trường đầu vào được thay đổi
  • Khi một biểu mẫu HTML được submit
  • Khi người dùng nhấn một phím

Tương tác với sự kiện

Một JavaScript có thể được thực thi khi một sự kiện xảy ra, như khi người dùng nhấp vào một phần tử HTML.

Để thực thi mã khi người dùng nhấp vào một phần tử, hãy thêm mã JavaScript vào thuộc tính sự kiện HTML:

onclick=JavaScript

Sự kiện onclick

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

<html> <head> <script type="text/javascript"> function sayHello() { alert("Hello World") } </script> </head> <body> <p>Click button sau để xem kết quả:</p> <form> <input type="button" onclick="sayHello()" value="Xin chao!" /> </form> </body> </html>

kết quả:

Sự kiện onmouseover và onmouseout

Các sự kiện onmouseover và onmouseout có thể được sử dụng để kích hoạt một hàm khi người dùng di chuột qua hoặc ra khỏi một phần tử HTML:

<html> <head> <script> function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" } </script> </head> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: #D94A38; width: 120px; height: 15px; padding: 5px;"> Mouse Over Me</div> </body> </html>

kết quả:

Sự kiện onmousedown, onmouseup và onclick

Sự kiện onmousedown, onmouseup và onclick là tất cả các phần của một cú click chuột. Đầu tiên khi một nút chuột được bấm, sự kiện onmousedown được kích hoạt, sau đó, khi nút chuột được giải phóng, sự kiện onmouseup được kích hoạt, cuối cùng, khi nhấp chuột hoàn tất, sự kiện onclick được kích hoạt.

<html> <head> <script> function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "Release Me"; } function mUp(obj) { obj.style.backgroundColor = "#D94A38"; obj.innerHTML = "Thank You"; } </script> </head> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: #D94A38; width: 120px; height: 15px; padding: 5px;"> Click Me</div> </body> </html>

kết quả:

Sự kiện HTML5 chuẩn

Các sự kiện HTML5 chuẩn được liệt kê dưới đây. Tại đây, script chỉ dẫn một hàm JavaScript để được thực thi đối với sự kiện đó.

Thuộc tính Giá trị Miêu tả
Offline script Kích hoạt khi tài liệu ở ngoại tuyến
Onabort script Kích hoạt trên một sự kiện bỏ dở
onafterprint script Kích hoạt sau khi tài liệu được in
onbeforeonload script Kích hoạt trước khi tài liệu tải
onbeforeprint script Kích hoạt trước khi tài liệu được in
onblur script Kích hoạt khi cửa sổ mất trọng tâm
oncanplay script Kích hoạt khi media có thể bắt đầu chơi, nhưng phải dừng để đệm
oncanplaythrough script Kích hoạt khi media có thể chơi tới cuối, mà không dừng để đệm
onchange script Kích hoạt khi một phần tử thay đổi
onclick script Kích hoạt trên một cú click chuột
oncontextmenu script Kích hoạt khi menu ngữ cảnh bị kích hoạt
ondblclick script Kích hoạt khi nhấp đúp chuột
ondrag script Kích hoạt khi một phần tử bị kéo
ondragend script Kích hoạt tại phần cuối của hoạt động kéo
ondragenter script Kích hoạt khi một phần tử đã được kéo tới một mục tiêu thả hợp lệ
ondragleave script Kích hoạt khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ
ondragover script Kích hoạt tại phần đầu của hoạt động kéo
ondragstart script Kích hoạt tại phần đầu của hoạt động kéo
ondrop script Kích hoạt khi phần tử được kéo đang được thả
ondurationchange script Kích hoạt khi độ dài của media được thay đổi
onemptied script Kích hoạt khi phần tử nguồn media đột nhiên trở nên trống
onended script Kích hoạt khi media tiến tới cuối cùng
onerror script Kích hoạt khi một lỗi xảy ra
onfocus script Kích hoạt khi cửa sổ nhận trọng tâm
onformchange script Kích hoạt khi một form thay đổi
onforminput script Kích hoạt khi một form nhận input từ người dùng
onhaschange script Kích hoạt khi tài liệu có thay đổi
oninput script Kích hoạt khi một phần tử nhận đầu vào từ người dùng
oninvalid script Kích hoạt khi một phần tử không hợp lệ
onkeydown script Kích hoạt khi một phím bị nhấn
onkeypress script Kích hoạt khi một phím bị nhấn và được thả ra
onkeyup script Kích hoạt khi một phím được thả ra
onload script Kích hoạt khi tài liệu tải
onloadeddata script Kích hoạt khi dữ liệu media được tải
onloadedmetadata script Kích hoạt khi thời gian và dữ liệu khác của một phần tử media được tải
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 một nút chuột được nhả ra
onmousemove script Kích hoạt khi con trỏ chuột di chuyển
onmouseout script Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử
onmouseover script Kích hoạt khi con trỏ chuột di chuyển qua một phần tử
onmouseup script Kích hoạt khi một nút chuột được nhả ra
onmousewheel script Kích hoạt khi bánh xe chuột được quay
onoffline script Kích hoạt khi tài liệu ở ngoại tuyến
onoine script Kích hoạt khi tài liệu ở trực tuyến
ononline script Kích hoạt khi tài liệu ở trực tuyến
onpagehide script Kích hoạt khi cửa sổ bị ẩn
onpageshow script Kích hoạt khi cửa sổ trở nên nhìn thấy
onpause script Kích hoạt khi dữ liệu media bị dừng
onplay script Kích hoạt khi dữ liệu media chuẩn bị bắt đầu chơi
onplaying script Kích hoạt khi dữ liệu media đang bắt đầu chơi
onpopstate script Kích hoạt khi lịch sử cửa sổ thay đổi
onprogress script Kích hoạt khi trình duyệt đang nhận dữ liệu media
onratechange script Kích hoạt khi tốc độ chơi của media đã thay đổi
onreadystatechange script Kích hoạt khi trạng thái sẵn sàng thay đổi
onredo script Kích hoạt khi tài liệu thực hiện một redo
onresize script Kích hoạt khi cửa sổ bị thay đổi kích cỡ
onscroll script Kích hoạt khi thanh cuốn của phần tử đang được cuốn
onseeked script Kích hoạt khi thuộc tính seeking của một phần tử media không còn true, và seeking đã kết thúc
onseeking script Kích hoạt khi thuộc tính seeking của một phần tử media là true, và seeking đã bắt đầu
onselect script Kích hoạt khi một phần tử được chọn
onstalled script Kích hoạt khi có một lỗi trong quá trình thu nhận dữ liệu media
onstorage script Kích hoạt khi một tài liệu tải
onsubmit script Kích hoạt khi một form được đệ trình
onsuspend script Kích hoạt khi trình duyệt đã đang thu nhận dữ liệu media, nhưng đã dừng lại trước khi toàn bộ media file được thu nhận
ontimeupdate script Kích hoạt khi media thay đổi vị trí chơi của nó
onundo script Kích hoạt khi một tài liệu thực hiện một undo
onunload script Kích hoạt khi người sử dụng rời khỏi tài liệu
onvolumechange script Kích hoạt khi media thay đổi âm lượng, kể cả khi media được thiết lập là mute
onwaiting script Kích hoạt khi media đã dừng chơi nhưng được mong chờ phục hồi.
Hàm (function) trong JavaScript Mệnh đề if-else trong JavaScript

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