6.1 Đối tượng sự kiện
JavaScript cung cấp một hệ thống sự kiện mạnh mẽ, cho phép theo dõi các hành động của người dùng và những sự kiện khác xảy ra trên trình duyệt. Một khía cạnh quan trọng của việc làm việc với sự kiện là đối tượng sự kiện, chứa thông tin về sự kiện và cung cấp các phương thức để xử lý nó.
Khi một sự kiện xảy ra, trình duyệt tạo ra một đối tượng sự kiện, chứa thông tin về sự kiện đó. Đối tượng này được truyền vào trình xử lý sự kiện như là một tham số.
Các thuộc tính của đối tượng sự kiện:
type: loại sự kiện (ví dụ,click,keydown).target: phần tử mà sự kiện đã xảy ra trên đó.currentTarget: phần tử mà trình xử lý sự kiện được gắn vào.eventPhase: giai đoạn mà sự kiện đang ở (bắt, mục tiêu, nổi).bubbles: giá trị Boolean chỉ ra liệu sự kiện có thể nổi không.cancelable: giá trị Boolean chỉ ra liệu sự kiện có thể bị hủy không.defaultPrevented: giá trị Boolean chỉ ra liệu hành động mặc định đã bị ngăn chặn không.timeStamp: thời gian khi sự kiện được tạo ra.isTrusted: giá trị Boolean chỉ ra liệu sự kiện được kích hoạt bởi người dùng hay script.
Các phương thức của đối tượng sự kiện:
preventDefault(): ngăn chặn hành động mặc định liên quan đến sự kiện.stopPropagation(): dừng sự kiện tiếp tục truyền đi.stopImmediatePropagation(): dừng sự kiện tiếp tục truyền đi và ngăn chặn các trình xử lý sự kiện khác được thực thi trên phần tử hiện tại.
Ví dụ sử dụng đối tượng sự kiện:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Sẽ in: click
console.log('Event target:', event.target); // Sẽ in: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Sẽ in: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Sẽ in: 2 (Giai đoạn mục tiêu)
console.log('Bubbles:', event.bubbles); // Sẽ in: true
console.log('Cancelable:', event.cancelable); // Sẽ in: true
console.log('Time stamp:', event.timeStamp); // Sẽ in thời gian tính bằng millisec
console.log('Is trusted:', event.isTrusted); // Sẽ in: true
});
</script>
</body>
</html>
6.2. Các sự kiện chuột (Mouse Events)
Các sự kiện chuột được tạo ra khi người dùng tương tác với một phần tử bằng chuột:
click: sự kiện clickdblclick: sự kiện double clickmousedown: sự kiện nhấn chuộtmouseup: sự kiện thả chuộtmousemove: sự kiện di chuộtmouseover: sự kiện di chuột vàomouseout: sự kiện di chuột ra
Ví dụ:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Các sự kiện tải (Load Events)
Các sự kiện tải xảy ra khi tài nguyên hoàn tất tải:
load: sự kiện xảy ra khi tài nguyên/trang tải xong hoàn toànDOMContentLoaded: sự kiện xảy ra khi tài liệu HTML ban đầu đã tải và phân tích xong mà không cần chờ tải xong các bảng style, hình ảnh và khung phụ
Ví dụ:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Các sự kiện tập trung (Focus Events)
Các sự kiện tập trung được tạo ra khi một phần tử nhận hoặc mất tập trung.
focus: sự kiện xảy ra khi phần tử nhận tập trungblur: sự kiện xảy ra khi phần tử mất tập trung
Ví dụ:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Các sự kiện bàn phím (Keyboard Events)
Các sự kiện bàn phím được tạo ra khi người dùng nhấn các phím trên bàn phím:
keydown: sự kiện xảy ra khi phím được nhấnkeyup: sự kiện xảy ra khi phím được nhảkeypress: sự kiện xảy ra khi phím được nhấn và nhả (sự kiện đã lỗi thời, không khuyến khích sử dụng)
Ví dụ:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION