Sự kiện (Event) trong JavaScript

Sự kiện là gì?

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

Khi một trang tải, nó được gọi là một sự kiện (Event). Khi người sử dụng click vào một nút, thì click đó cũng là một sự kiện. Các ví dụ về sự kiện khác như nhấn một phím, đóng một cửa sổ, tăng giảm cửa sổ, …

Nhà lập trình có thể sử dụng những sự kiện này để thực thi các phản hồi được mã hóa bởi JavaScript, như các nút để đóng cửa sổ, các thông báo được hiển thị tới người dùng, …

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 JavaScript Code.

Hy vọng bạn truy cập vào bài hướng dẫn nhỏ của chúng tôi để hiểu sau hơn về Tổng hợp sự kiện (Event) trong HTML. Tại đây, chúng ta sẽ thấy một số ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript.

Kiểu 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.

Ví dụ

Bạn thử ví dụ sau:

<html> 
    <head> 
         <script type="text/javascript"> 
            <!-- 
                function sayHello() { 
                    alert("Hello World") 
                } 
              //--> 
            </script> 
    </head> 
    <body> 
        <p>Click the following button and see result</p> 
        <form> <input type="button" onclick="sayHello()" value="Xin chao!" /> 
        </form> 
    </body> 
</html>

Kết quả

Thực hiện theo hàm trên để xem kết quả.

Kiểu sự kiện onsubmit

onsubmit là một kiểu sự kiện xảy ra khi bạn cố gắng đệ trình một form. Bạn có thể đặt việc xác nhận form đối với kiểu sự kiện này.

Ví dụ

Ví dụ sau chỉ cách sử dụng onsubmit. Tại đây, chúng ta gọi một hàm validate() trước khi đệ trình một dữ liệu form tới Webserver. Nếu hàm validate() trả về true, form sẽ được đệ trình, nếu không thì nó sẽ không đệ trình dữ liệu.

Bạn thử ví dụ sau:

<html> 
    <head> 
        <script type="text/javascript"> 
            <!-- 
                 function validation() { 
                     all validation goes here 
                     ......... 
                     return either true or false 
                 } 
               //--> 
        </script> 
    </head> 
    <body> 
         <form method="POST" action="t.cgi" onsubmit="return validate()"> 
         ....... 
         <input type="submit" value="Submit" /> 
         </form> 
    </body> 
</html>

Kiểu sự kiện onmouseover và onmouseout

Hai kiểu sự kiện này sẽ giúp bạn tạo các hiệu quả đẹp với hình ảnh hoặc ngay cả với văn bản. Sự kiện onmouseover kích hoạt khi bạn di chuyển chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Bạn thử ví dụ sau:

<html> 
    <head> 
        <script type="text/javascript"> 
            <!-- 
                function over() { 
                     document.write ("Mouse Over"); 
                } 
                function out() { 
                    document.write ("Mouse Out"); 
                } 
              //--> 
         </script> 
    </head> 
    <body> 
        <p>Bring your mouse inside the division to see the result:</p> 
        <div onmouseover="over()" onmouseout="out()"> 
        <h2> This is inside the division </h2> 
        </div> 
    </body> 
</html>

Kết quả

Thực hiện theo hàm trên để xem 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ínhGiá trịMiêu tả
OfflinescriptKích hoạt khi tài liệu ở ngoại tuyến
OnabortscriptKích hoạt trên một sự kiện bỏ dở
onafterprintscriptKích hoạt sau khi tài liệu được in
onbeforeonloadscriptKích hoạt trước khi tài liệu tải
onbeforeprintscriptKích hoạt trước khi tài liệu được in
onblurscriptKích hoạt khi cửa sổ mất trọng tâm
oncanplayscriptKích hoạt khi media có thể bắt đầu chơi, nhưng phải dừng để đệm
oncanplaythroughscriptKích hoạt khi media có thể chơi tới cuối, mà không dừng để đệm
onchangescriptKích hoạt khi một phần tử thay đổi
onclickscriptKích hoạt trên một cú click chuột
oncontextmenuscriptKích hoạt khi menu ngữ cảnh bị kích hoạt
ondblclickscriptKích hoạt khi nhấp đúp chuột
ondragscriptKích hoạt khi một phần tử bị kéo
ondragendscriptKích hoạt tại phần cuối của hoạt động kéo
ondragenterscriptKích hoạt khi một phần tử đã được kéo tới một mục tiêu thả hợp lệ
ondragleavescriptKích hoạt khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ
ondragoverscriptKích hoạt tại phần đầu của hoạt động kéo
ondragstartscriptKích hoạt tại phần đầu của hoạt động kéo
ondropscriptKích hoạt khi phần tử được kéo đang được thả
ondurationchangescriptKích hoạt khi độ dài của media được thay đổi
onemptiedscriptKích hoạt khi phần tử nguồn media đột nhiên trở nên trống
onendedscriptKích hoạt khi media tiến tới cuối cùng
onerrorscriptKích hoạt khi một lỗi xảy ra
onfocusscriptKích hoạt khi cửa sổ nhận trọng tâm
onformchangescriptKích hoạt khi một form thay đổi
onforminputscriptKích hoạt khi một form nhận input từ người dùng
onhaschangescriptKích hoạt khi tài liệu có thay đổi
oninputscriptKích hoạt khi một phần tử nhận đầu vào từ người dùng
oninvalidscriptKích hoạt khi một phần tử không hợp lệ
onkeydownscriptKích hoạt khi một phím bị nhấn
onkeypressscriptKích hoạt khi một phím bị nhấn và được thả ra
onkeyupscriptKích hoạt khi một phím được thả ra
onloadscriptKích hoạt khi tài liệu tải
onloadeddatascriptKích hoạt khi dữ liệu media được tải
onloadedmetadatascriptKích hoạt khi thời gian và dữ liệu khác của một phần tử media được tải
onloadstartscriptKích hoạt khi trình duyệt bắt đầu tải dữ liệu media
onmessagescriptKích hoạt khi thông báo được kích hoạt
onmousedownscriptKích hoạt khi một nút chuột được nhả ra
onmousemovescriptKích hoạt khi con trỏ chuột di chuyển
onmouseoutscriptKích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử
onmouseoverscriptKích hoạt khi con trỏ chuột di chuyển qua một phần tử
onmouseupscriptKích hoạt khi một nút chuột được nhả ra
onmousewheelscriptKích hoạt khi bánh xe chuột được quay
onofflinescriptKích hoạt khi tài liệu ở ngoại tuyến
onoinescriptKích hoạt khi tài liệu ở trực tuyến
ononlinescriptKích hoạt khi tài liệu ở trực tuyến
onpagehidescriptKích hoạt khi cửa sổ bị ẩn
onpageshowscriptKích hoạt khi cửa sổ trở nên nhìn thấy
onpausescriptKích hoạt khi dữ liệu media bị dừng
onplayscriptKích hoạt khi dữ liệu media chuẩn bị bắt đầu chơi
onplayingscriptKích hoạt khi dữ liệu media đang bắt đầu chơi
onpopstatescriptKích hoạt khi lịch sử cửa sổ thay đổi
onprogressscriptKích hoạt khi trình duyệt đang nhận dữ liệu media
onratechangescriptKích hoạt khi tốc độ chơi của media đã thay đổi
onreadystatechangescriptKích hoạt khi trạng thái sẵn sàng thay đổi
onredoscriptKích hoạt khi tài liệu thực hiện một redo
onresizescriptKích hoạt khi cửa sổ bị thay đổi kích cỡ
onscrollscriptKích hoạt khi thanh cuốn của phần tử đang được cuốn
onseekedscriptKí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
onseekingscriptKích hoạt khi thuộc tính seeking của một phần tử media là true, và seeking đã bắt đầu
onselectscriptKích hoạt khi một phần tử được chọn
onstalledscriptKích hoạt khi có một lỗi trong quá trình thu nhận dữ liệu media
onstoragescriptKích hoạt khi một tài liệu tải
onsubmitscriptKích hoạt khi một form được đệ trình
onsuspendscriptKí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
ontimeupdatescriptKích hoạt khi media thay đổi vị trí chơi của nó
onundoscriptKích hoạt khi một tài liệu thực hiện một undo
onunloadscriptKích hoạt khi người sử dụng rời khỏi tài liệu
onvolumechangescriptKích hoạt khi media thay đổi âm lượng, kể cả khi media được thiết lập là mute
onwaitingscriptKích hoạt khi media đã dừng chơi nhưng được mong chờ phục hồi.

Theo Tutorialspoint

Bài trước: Hàm trong JavaScript

Bài tiếp: Điều hướng trang (Redirect) trong JavaScript

Thứ Sáu, 28/08/2020 10:48
52 👨 2.211
0 Bình luận
Sắp xếp theo