Bạn có thể thực thi JavaScript khi xảy ra sự kiện chẳng hạn như người dùng nhấp chuột, tải hình ảnh, khi người dùng nhấp vào phần tử HTML, gửi biểu mẫu HTML, v.v. 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.
Ví dụ
Hãy xem một ví dụ cho phép bạn gọi một hàm từ trình xử lý sự kiện để thay đổi văn bản
Bản trình diễn trực tiếp
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</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 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.
Bản trình diễn trực tiếp
<html>
<head>
<script>
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html> 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à sự kiện onmouseout sẽ kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó.
Ví dụ
Hãy thử ví dụ sau.
Bản trình diễn trực tiếp
<html>
<head>
<script>
<!--
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>