JavaScript – Sự kiện

Quảng cáo

Sự kiện là gì?

Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác một trang.

Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.

Các nhà phát triển có thể sử dụng các sự kiện này để thực thi các phản hồi được mã hóa JavaScript, điều này khiến các nút đóng cửa sổ, thông báo hiển thị cho người dùng, dữ liệu được xác thực và hầu như bất kỳ loại phản hồi nào khác có thể tưởng tượng được.

Sự kiện là một phần của Mô hình đối tượng tài liệu (DOM) Cấp 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.

Vui lòng xem qua hướng dẫn nhỏ này để hiểu rõ hơn về Tham khảo sự kiện HTML . Sau đây, chúng ta sẽ xem một vài ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript –

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 bên trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. của mình đối với loại sự kiện này.

Ví dụ

Hãy thử ví dụ sau.

& lt; html & gt;
   & lt; đầu & gt;
      & lt; script type = "text / javascript" & gt;
         & lt;! -
            function sayHello () {
               alert ("Xin chào Thế giới")
            }
         // - & gt;
      & lt; / script & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; p & gt; Nhấp vào nút sau và xem kết quả & lt; / p & gt;
      & lt; biểu mẫu & gt;
         & lt; input type = "button" onclick = "sayHello ()" value = "Say Hello" / & gt;
      & lt; / form & gt;
   & lt; / body & gt;
& lt; / html & gt;

Đầu ra

gửi loại sự kiện

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

Ví dụ

Ví dụ sau đây cho thấy cách sử dụng gửi qua đường bưu điện. Ở đây chúng tôi đang gọi hàm validate () trước khi gửi dữ liệu biểu mẫu đến máy chủ web. Nếu hàm validate () trả về true, biểu mẫu sẽ được gửi, nếu không, nó sẽ không gửi dữ liệu.

Hãy thử ví dụ sau.

& lt; html & gt;
   & lt; đầu & gt;
      & lt; script type = "text / javascript" & gt;
         & lt;! -
            xác thực hàm () {
               tất cả xác nhận ở đây
               .........
               trả về true hoặc false
            }
         // - & gt;
      & lt; / script & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; form method = "POST" action = "t.cgi" onsubmit = "return validate ()" & gt;
         .......
         & lt; input type = "submit" value = "Gửi" / & gt;
      & lt; / form & gt;
   & lt; / body & gt;
& lt; / html & gt;

onmouseover và onmouseout

Hai loại sự kiện này sẽ giúp bạn 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 kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và onmouseout sẽ kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Hãy thử ví dụ sau.

& lt; html & gt;
   & lt; đầu & gt;
      & lt; script type = "text / javascript" & gt;
         & lt;! -
            function over () {
               document.write ("Di chuột qua");
            }
            function out () {
               document.write ("Di chuột ra");
            }
         // - & gt;
      & lt; / script & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; p & gt; Đưa chuột vào bên trong phép chia để xem kết quả: & lt; / p & gt;
      & lt; div onmouseover = "over ()" onmouseout = "out ()" & gt;
         & lt; h2 & gt; Đây là bên trong sự phân chia & lt; / h2 & gt;
      & lt; / div & gt;
   & lt; / body & gt;
& lt; / html & gt;

Đầu ra

Sự kiện chuẩn HTML 5

Các sự kiện HTML 5 tiêu chuẩn được liệt kê ở đây để bạn tham khảo. Ở đây script chỉ ra một hàm Javascript sẽ được thực thi đối với sự kiện đó.

Thuộc tính
Giá trị
Sự mô tả

Ngoại tuyến
script
Kích hoạt khi tài liệu ngoại tuyến

Onabort
script
Kích hoạt sự kiện hủy bỏ

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 tài liệu

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 tiêu điểm

oncanplay
script
Kích hoạt khi phương tiện có thể bắt đầu phát, nhưng có thể phải dừng để lưu vào bộ đệm

oncanplaythrough
script
Kích hoạt khi phương tiện có thể được phát đến cuối mà không dừng lại để lưu vào bộ đệm

sự thay đổi
script
Kích hoạt khi một phần tử thay đổi

trong một cái nhấp chuột
script
Kích hoạt khi nhấp chuột

oncontextmenu
script
Kích hoạt khi một menu ngữ cảnh được 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ử được kéo

ondragend
script
Kích hoạt khi kết thúc thao tác kéo

ondragenter
script
Kích hoạt khi một phần tử được kéo đến 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 khi bắt đầu thao tác kéo

ondragstart
script
Kích hoạt khi bắt đầu thao tác kéo

ondrop
script
Kích hoạt khi phần tử được kéo đang bị loại bỏ

ondurationchange
script
Kích hoạt khi độ dài của vật liệu in được thay đổi

có giấy tờ
script
Kích hoạt khi một phần tử tài nguyên phương tiện đột nhiên trống rỗng.

gắn bó
script
Kích hoạt khi phương tiện đến cuối

lỗi lầm
script
Kích hoạt khi xảy ra lỗi

vào trọng tâm
script
Kích hoạt khi cửa sổ được lấy nét

onformchange
script
Kích hoạt khi biểu mẫu thay đổi

onforminput
script
Kích hoạt khi một biểu mẫu được người dùng nhập vào

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 được đầu vào của 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 được nhấn

onkeypress
script
Kích hoạt khi nhấn và thả một phím

onkeyup
script
Kích hoạt khi khóa được phát hành

đang tải
script
Kích hoạt khi tải tài liệu

onloadeddata
script
Kích hoạt khi dữ liệu phương tiện được tải

onloadedmetadata
script
Kích hoạt khi thời lượng và dữ liệu phương tiện khác của phần tử phương tiện được tải

onloadstart
script
Kích hoạt khi trình duyệt bắt đầu tải dữ liệu phương tiện

trên tàu
script
Kích hoạt khi thông báo được kích hoạt

onmousedown
script
Kích hoạt khi nhấn nút chuột

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 thả nút chuột

onmousewheel
script
Kích hoạt khi con lăn chuột đang được xoay

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ổ hiển thị

tạm dừng
script
Kích hoạt khi dữ liệu phương tiện bị tạm dừng

onplay
script
Kích hoạt khi dữ liệu phương tiện sẽ bắt đầu phát

chơi trực tuyến
script
Kích hoạt khi dữ liệu phương tiện bắt đầu phát

onpopstate
script
Kích hoạt khi lịch sử của cửa sổ thay đổi

sự vi phạm
script
Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện

onratechange
script
Kích hoạt khi tốc độ phát của dữ liệu phương tiện 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 làm lại

kích thước lớn
script
Kích hoạt khi cửa sổ được thay đổi kích thước

suối nước nóng
script
Kích hoạt khi thanh cuộn của một phần tử đang được cuộn

onseeked
script
Kích hoạt khi thuộc tính tìm kiếm của phần tử phương tiện 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 thuộc tính tìm kiếm của phần tử phương tiện là đúng và quá trình tìm kiếm đã bắt đầu

chọn
script
Kích hoạt khi một phần tử được chọn

đã cài đặt
script
Kích hoạt khi có lỗi khi tìm nạp dữ liệu phương tiện

sự hành hạ
script
Kích hoạt khi tải tài liệu

gửi đi
script
Kích hoạt khi biểu mẫu được gửi

phụ thuộc vào
script
Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện, nhưng đã dừng trước khi toàn bộ tệp phương tiện được tìm nạp

ontimeupdate
script
Kích hoạt khi phương tiện thay đổi vị trí phát

onundo
script
Kích hoạt khi tài liệu thực hiện hoàn tác

onunload
script
Kích hoạt khi người dùng rời khỏi tài liệu

onvolumechange
script
Kích hoạt khi phương tiện thay đổi âm lượng, cũng như khi âm lượng được đặt thành “tắt tiếng”

chờ đợi
script
Kích hoạt khi phương tiện đã ngừng phát, nhưng dự kiến ​​sẽ tiếp tục

Quảng cáo