IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Events - Các sự kiện trong JavaScript

JavaScript Events - Các sự kiện trong JavaScript

by GokiSoft.Com - 09:37 20/05/2020 2,083 Lượt Xem

Sự kiện HTML là "những thứ" xảy ra với các thành phần HTML.

Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng(react)" trên các sự kiện đó.



Các sự kiện HTML(HTML Events)


Một sự kiện HTML có thể là một cái gì đó mà trình duyệt làm, hoặc cái mà người dùng làm.

Đây là một vài ví dụ của các sự kiện HTML:

- Một trang web HTML đã tải xong

- Một ô input HTML đã được thay đổi

- Một nút HTML đã được bấm

Bình thường, khi các sự kiện xảy ra, bạn sẽ có thể muốn làm cái gì đó.

JavaScript để bạn thực thi code khi các sự kiện được phát hiện.

HTML cho phép các thuộc tính xử lý sự kiện, với JavaScript code, để được thêm vào các thành phần HTML.

Với dấu nháy đơn:

<element event='some JavaScript'>


 Với dấu nháy đôi:

<element event="some JavaScript">


Trong ví dụ tiếp theo, một thuộc tính  onclick (với vode), được thêm vào một thành phần <button> :

ví dụ

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>


Trong ví dụ trên, JavaScript Code thay đổi nội dung của thành phần có id="demo".

Trong ví dụ sau, code thay đổi nội dung thành phần của chính nó(sử dụng this.innerHTML):

ví dụ

<button onclick="this.innerHTML = Date()">The time is?</button>
<!DOCTYPE html>
<html>
<body>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>



Tip: JavaScript code thường dài vài dòng. Nó phổ biến để thấy các thuộc tính sự kiện gọi đến các hàm:

ví dụ

<button onclick="displayDate()">The time is?</button>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 



Các sự kiện HTML phổ biến


Dưới đây là một danh sách của các sự kiện HTML phổ biến:

Sự kiệnMô tả
onchangeMột thành phần HTML đã bị thay đổi
onclickNgười dùng bấm vào một thành phần HTML
onmouseoverNgười dùng di chuyển chuột qua một thành phần HTML
onmouseoutNgười dùng di chuyển chuột ra khỏi một thành phần HTML
onkeydownNgười dùng bấm một nút trên bàn phím
onloadTrình duyệt hoàn thành việc tải trang



JavaScript có thể làm gì


Các trình xử lý sự kiện có thể sử dụng để xử lý, và xác thực, người dùng nhập vào, các hành động của người dùng, và các hành động của trình duyệt:

- Những thứ nên được hoàn thành mỗi khi một trang tải.

- Những thứ nên được hoàn thành mỗi khi trang đóng.

- Hành động nên được thực hiện khi người dùng bấm vào một nút.

- Nội dung nên được xác thực khi người dùng nhập vào dữ liệu.

- Và nhiều hơn nữa...

Nhiều các phương thức khác nhau có thể được dùng để cho JavaScript làm việc với các sự kiện:

- Các thuộc tính sự kiện HTML có thể thực thi JavaScript code trực tiếp.

- Các thuộc tính sự kiện HTML có thể gọi các hàm JavaScript.

- Bạn có thể gán các hàm xử lý sự kiện của bạn vào các thành phần HTML.

- Bạn có thể ngăn chặn các sự kiện khỏi việc bị gửi hoặc bị xử lý.

- Và nhiều hơn nữa...



Tip: Bạn sẽ được học nhiều hơn nữa về các sự kiện và trình sử lý sự kiện trong chương HTML DOM.



Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!