DOM Events - Ook-code

Sự kiện trong javascript

HTML DOM cho phép JavaScript phản ứng với các sự kiện HTML.

Move Over Me Click Me

Phản ứng với sự kiện

JavaScript có thể được thực thi khi một sự kiện xảy ra, như khi người dùng click 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ử, chúng ta thêm mã JavaScript vào thuộc tính sự kiện HTML.

onclick=JavaScript

Ví dụ về một số sự kiện HTML như:

• Khi người dùng nhấp chuột
• Khi một trang web đã tải xong
• Khi một hình ảnh đã được tải
• Khi chuột di chuyển 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 gửi
• Khi người dùng gõ phím
• ...

Trong ví dụ sau, nội dung của phần tử <h1> sẽ được thay đổi khi người dùng nhấp vào nó.

Ví dụ

<h2 onclick="this.innerHTML = 'Hello JavaScript!'">Click vào tôi để thay đổi văn bản</h2>

Xem kết quả

Trong ví dụ này, một hàm được gọi từ trình xử lý sự kiện.

Ví dụ

<h2 onclick="changeText(this)">Click vào tôi để thay đổi văn bản</h2> <script> function changeText(x) { x.innerHTML = "Hello JavaScript!"; } </script>

Xem kết quả

Thuộc tính sự kiện HTML

Để gán sự kiện cho các phần tử HTML, chúng ta có thể sử dụng các thuộc tính sự kiện.

Ví dụ

<button onclick="showDate()">Click Here</button> function showDate() { document.getElementById('demo').innerHTML = Date(); }

Xem kết quả

Trong ví dụ trên, một hàm có tên showDate() sẽ được thực thi khi nút được nhấp.

Chỉ định sự kiện bằng HTML DOM

HTML DOM cho phép chúng ta chỉ định các sự kiện cho các phần tử HTML bằng JavaScript.

Ví dụ

<button id="btn">Click Here</button> document.getElementById('btn').onclick = showDate; function showDate() { document.getElementById('demo').innerHTML = Date(); }

Xem kết quả

Trong ví dụ trên, một hàm có tên showDate() được gán cho một phần tử HTML có id="btn".

Hàm sẽ được thực hiện khi nút được nhấp.

Sự kiện onload và onunload

Sự kiện onload và onunload được kích hoạt khi người dùng truy cập hoặc rời khỏi trang.

Sự kiện onload có thể được sử dụng để kiểm tra loại trình duyệt và phiên bản trình duyệt của khách truy cập, đồng thời tải phiên bản phù hợp của trang web dựa trên thông tin đó.

Sự kiện onload và onunload có thể được sử dụng để xử lý cookie.

Ví dụ

function checkCookie() { var x = ""; if (navigator.cookieEnabled == true) { x = "Cookie đang bật"; } else { x = "Cookie đang tắt"; } document.getElementById('demo').innerHTML = x ; }

Xem kết quả

Sự kiện onchange

Sự kiện onchange thường được sử dụng kết hợp với việc xác nhận các trường đầu vào.

Dưới đây là một ví dụ về cách sử dụng onchange. Phương thức upperCase() sẽ được gọi khi người dùng thay đổi nội dung của một trường input.

Ví dụ

function upperCase() { var x; x = document.forms["myForm"]["fname"]; x.value = x.value.toUpperCase(); }

Xem kết quả

Sự kiện onmouseover và onmouseout

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

Ví dụ

function changeText(x) { x.innerHTML = "Thank You"; } function Text(x) { x.innerHTML = "Move Over Me"; }

Xem kết quả

Sự kiện onmousedown, onmouseup và onclick

Các sự kiện onmousedown, onmouseup và onclick là tất cả các phần của một cái click chuột. Đầu tiên khi một nút chuột được nhấp, sự kiện onmousedown được kích hoạt, sau đó, khi thả nút chuột, 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.

Ví dụ

function mouseUp(x) { x.innerHTML = "Thank You"; x.style.backgroundColor = "#c33"; x.style.color = "white"; } function mouseDown(x) { x.innerHTML = "Giữ chuột nhé"; x.style.backgroundColor = "#ddffff"; x.style.color = "red"; }

Xem kết quả

Một số ví dụ khác

onmousedown và onmouseup

Thay đổi hình ảnh khi người dùng giữ nút chuột.

onload

Hiển thị hộp cảnh báo khi trang tải xong.

onfocus

Thay đổi màu nền của trường nhập liệu khi nó được lấy nét.

Sự kiện chuột

Thay đổi màu của một phần tử khi con trỏ di chuyển qua phần tử đó.

Tham chiếu đối tượng sự kiện HTML DOM

Để có danh sách tất cả các sự kiện HTML DOM, hãy xem Tham chiếu Đối tượng Sự kiện HTML DOM hoàn chỉnh.