JavaScript - Giới thiệu về Sự kiện

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các sự kiện JavaScript. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn qua khái niệm cơ bản này sẽ thổi sống cho các trang web của bạn. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và chúng ta cùng bắt đầu!

Sự kiện là gì?

Hãy tưởng tượng bạn đang ở một buổi tiệc (tất nhiên là buổi tiệc lập trình rồi!). Mỗi khi có điều gì đó xảy ra - ai đó đến, một bài hát bắt đầu phát, hoặc ai đó làm rơi饮料 của họ - đó là một sự kiện. Trong thế giới của JavaScript, các sự kiện hoạt động tương tự. Chúng là những điều xảy ra trên trang web của bạn mà JavaScript có thể phát hiện và phản hồi.

Các sự kiện có thể được kích hoạt bởi:

• Các hành động của người dùng (nhấn nút, di chuột)
• Các hoạt động của trình duyệt (hoàn thành việc tải trang)
• Các thay đổi trong trạng thái của các phần tử trên trang

Dưới đây là một ví dụ đơn giản để minh họa khái niệm này:

<button id="myButton">Nhấn tôi!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Nút được nhấn!");
});
</script>

Trong ví dụ này, việc nhấn nút (sự kiện) gây ra một thông báo弹出 (phản hồi). Đó như thể nói, "Hey JavaScript, khi ai đó nhấn nút này, hiển thị thông báo này!"

Các bộ xử lý sự kiện JavaScript

Bây giờ chúng ta đã hiểu sự kiện là gì, hãy nói về cách chúng ta xử lý chúng. Các bộ xử lý sự kiện là các hàm JavaScript chạy khi một sự kiện xảy ra. Chúng giống như những người bảo vệ tại buổi tiệc lập trình của chúng ta, quyết định điều gì xảy ra khi mỗi sự kiện xảy ra.

Có nhiều cách để chỉ định các bộ xử lý sự kiện trong JavaScript. Hãy cùng khám phá:

1. Các bộ xử lý sự kiện inline

Đây là cách đơn giản nhất (nhưng không phải lúc nào cũng是最好的) để xử lý sự kiện:

<button onclick="alert('Xin chào, Thế giới!')">Nhấn tôi</button>

Ở đây, bộ xử lý sự kiện được viết trực tiếp trong HTML. Khi nút được nhấn, nó hiển thị một thông báo. Mặc dù cách này dễ hiểu, nhưng nó thường không được khuyến khích cho các ứng dụng lớn hơn vì nó trộn lẫn HTML và JavaScript.

2. Các bộ xử lý sự kiện thuộc tính

Một cách tốt hơn là tách JavaScript khỏi HTML:

<button id="myButton">Nhấn tôi</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Xin chào từ bộ xử lý sự kiện thuộc tính!");
};
</script>

Phương pháp này gán một hàm cho thuộc tính onclick của phần tử nút. Nó sạch sẽ hơn, nhưng nó có giới hạn: bạn chỉ có thể gán một bộ xử lý sự kiện cho mỗi sự kiện theo cách này.

3. Phương thức addEventListener()

Đây là cách linh hoạt và mạnh mẽ nhất để xử lý sự kiện:

<button id="myButton">Nhấn tôi</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Xin chào từ addEventListener!");
});
</script>

Với addEventListener(), bạn có thể:

• Đính kèm nhiều bộ xử lý sự kiện vào một phần tử duy nhất
• Dễ dàng loại bỏ các bộ xử lý sự kiện khi cần
• Đ控 制 khi nào bộ监听器 được kích hoạt trong chu kỳ sự kiện

Hãy xem một ví dụ phức tạp hơn:

<button id="myButton">Nhấn tôi</button>

<script>
let button = document.getElementById("myButton");

function changeColor() {
this.style.backgroundColor = "đỏ";
}

function addBorder() {
this.style.border = "2px solid xanh";
}

button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>

Trong ví dụ này, việc nhấn nút thay đổi màu nền thành đỏ VÀ thêm một viền xanh. Hai bộ xử lý sự kiện cho một sự kiện!

Đối tượng Sự kiện JavaScript

Khi một sự kiện xảy ra, JavaScript tạo một đối tượng Sự kiện. Đối tượng này chứa chi tiết về sự kiện, như nơi nó xảy ra, loại sự kiện là gì, và đôi khi, thông tin cụ thể cho loại sự kiện đó.

Hãy xem một ví dụ:

<button id="myButton">Nhấn tôi</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Loại sự kiện: " + event.type);
console.log("Phần tử mục tiêu: " + event.target.tagName);
console.log("Vị trí X của chuột: " + event.clientX);
console.log("Vị trí Y của chuột: " + event.clientY);
});
</script>

Khi bạn nhấn nút, đoạn mã này ghi lại thông tin về sự kiện nhấn, bao gồm:

• Loại sự kiện ("click")
• Phần tử được nhấn (một phần tử "BUTTON")
• Vị trí X và Y của chuột khi nhấn xảy ra

Thông tin này có thể rất hữu ích cho việc tạo các ứng dụng web tương tác và nhạy cảm.

Dưới đây là bảng tóm tắt một số thuộc tính phổ biến của đối tượng Sự kiện:

Thuộc tính	Mô tả
type	Loại sự kiện (ví dụ: "click", "mouseover")
target	Phần tử kích hoạt sự kiện
clientX, clientY	Vị trí horizontal và vertical của con trỏ chuột
keyCode	Mã phím được nhấn (cho sự kiện bàn phím)
preventDefault()	Phương thức ngăn chặn hành động mặc định của sự kiện
stopPropagation()	Phương thức ngăn chặn sự kiện nổi bọt lên cây DOM

Lưu ý, các loại sự kiện khác nhau có thể có các thuộc tính cụ thể khác. Luôn kiểm tra tài liệu để biết đầy đủ danh sách các thuộc tính có sẵn cho mỗi loại sự kiện.

Cuối cùng, sự kiện là nhịp đập của các ứng dụng web tương tác. Chúng cho phép JavaScript của bạn phản hồi các hành động của người dùng và tạo ra những trải nghiệm động và hấp dẫn. Khi bạn tiếp tục hành trình JavaScript của mình, bạn sẽ thấy mình làm việc với sự kiện ngày càng nhiều. Hãy đón nhận chúng, thử nghiệm với chúng, và xem trang web của bạn sống động!

Chúc mừng coding, các ninja JavaScript tương lai! ??

Credits: Image by storyset