Việc thêm các tính năng tương tác cho trang web chính là nơi JavaScript tỏa sáng. Trong khi HTML và CSS được dùng để thiết lập cấu trúc và kiểu dáng cho trang web, JavaScript giúp trang web trở nên động hơn.
Sự kiện JavaScript là gì?
Sự kiện có thể được kích hoạt bởi trình duyệt hoặc người dùng và có khả năng thay đổi trạng thái của trang web. Khi bạn nhấp vào một nút trên trang web, một sự kiện JavaScript được tạo ra. Khi bạn nhấp vào menu thả xuống để mở rộng, một sự kiện JavaScript được sử dụng.
Sự kiện JavaScript có nhiều trường hợp sử dụng, bao gồm:
- Kiểm tra xem biểu mẫu đã được điền đầy đủ chưa
- Chuyển hướng người dùng sang trang khác sau khi họ điền xong biểu mẫu
- Làm cho menu thả xuống trở nên tương tác
- Cho phép người dùng phóng to/thu nhỏ hình ảnh
Để làm việc với sự kiện trong JavaScript, bạn cần hiểu hai khái niệm: trình xử lý sự kiện (event handlers) và trình lắng nghe sự kiện (event listeners).
Trình xử lý sự kiện là một hàm được chạy khi một sự kiện được kích hoạt trên trang web. Trình lắng nghe sự kiện kết nối một hàm sự kiện với một phần tử HTML, để khi hàm đó thực thi, phần tử web bị thay đổi.
Trình xử lý sự kiện có thể được định nghĩa theo ba cách: sử dụng trình xử lý sự kiện nội tuyến (inline), thuộc tính sự kiện (event property) hoặc trình lắng nghe sự kiện (event listener).
Trình xử lý sự kiện nội tuyến (Inline Event Handlers)
Cách dễ nhất để bắt đầu với sự kiện trong JavaScript là sử dụng trình xử lý sự kiện nội tuyến. Điều này có nghĩa là bạn sẽ định nghĩa sự kiện trong file HTML của mình.
Ví dụ: giả sử chúng ta đang thiết kế trang web cho một tiệm bánh tên là JJ Smith's Bakery. Chúng ta muốn người dùng được nhắc với dòng chữ "Phản hồi đã được nhận." khi họ gửi biểu mẫu.
Xét đoạn mã sau:
<!DOCTYPE html> <html> <head> <title>JJ Smith's Bakery</title> </head> <script src="main.js"></script> <body> <p id="submitted"></p> <button onclick="submitForm()">Gửi biểu mẫu</button> </body> </html>
Mã này hiển thị một trang web như sau:
Cho đến nay chưa có gì xảy ra. Trang web chứa một nút nên làm gì đó khi nhấp vào. Khi nhấp nút, không có gì xảy ra vì chúng ta chưa viết trình xử lý sự kiện.
Trong file main.js, dán mã sau:
const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Biểu mẫu đã được gửi." }
Mã này sẽ tìm phần tử có ID "submitted" và sửa đổi nội dung thành "Biểu mẫu đã được gửi." Mã này chỉ chạy khi hàm submitForm() được gọi. Việc gọi này được lên lịch xảy ra khi người dùng nhấp vào nút của chúng ta.
Khi nhấp nút, điều sau xảy ra:
Như bạn thấy, thông báo xuất hiện. Chúng ta đã dùng trình xử lý sự kiện nội tuyến để làm cho trang web tương tác. Nhưng đây không phải cách duy nhất. Hãy thảo luận cách sử dụng thuộc tính trình xử lý sự kiện.
Sự kiện với thuộc tính trình xử lý (Handler Properties)
Trong trình xử lý nội tuyến, bạn cần chỉ định hàm muốn thực thi trong file HTML. Trong mã HTML trước, dòng này là nơi chúng ta định nghĩa hàm được gọi khi nút được nhấn:
<button onclick="submitForm()">Gửi biểu mẫu</button>
Sử dụng thuộc tính trình xử lý, chúng ta có thể loại bỏ sự kiện "onclick" khỏi mã HTML. Điều này cho phép di chuyển toàn bộ JavaScript làm cho trang web tương tác vào file riêng. Ví dụ này, chúng ta gán cho nút ID "button" để nhận diện trong JavaScript. Hãy xóa onclick và gán ID:
<button id="button">Gửi biểu mẫu</button>
Để sự kiện kích hoạt khi nút được nhấn, chúng ta viết trình xử lý sự kiện với thuộc tính trong file "main.js". Đây là mã sử dụng:
const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Biểu mẫu đã được gửi." } const button = document.getElementById("button") button.onclick = submitForm;
Khi chạy mã và nhấp nút, kết quả như sau:
Nút hoạt động giống như trước, nhưng mã được viết khác. Thay vì viết trình xử lý sự kiện nội tuyến, chúng ta chuyển chúng sang file main.js. Điều này giúp mã dễ bảo trì hơn vì không cần đọc hết HTML để tìm nơi sự kiện nội tuyến được kích hoạt.
Trình lắng nghe sự kiện (Event Listener)
Trình lắng nghe sự kiện có thể dùng để khai báo sự kiện trong JavaScript. Trình lắng nghe luôn theo dõi khi trạng thái của một phần tử thay đổi, và nếu phần tử đó thay đổi, mã trong trình lắng nghe sẽ được thực thi.
Ví dụ, khi bạn nhấp vào nút được gắn với trình lắng nghe sự kiện, trình lắng nghe sẽ "nghe" thấy sự kiện chuột đã được kích hoạt. Sau đó nó thực thi mã bạn đã liên kết với trình lắng nghe đó.
Mã HTML cho ví dụ này giống như trên, nhưng chúng ta thay đổi nhỏ file "main.js":
const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Biểu mẫu đã được gửi." } const button = document.getElementById("button") button.addEventListener("click", submitForm);
Trong mã này, chúng ta dùng addEventListener để tạo trình lắng nghe sự kiện. Thay vì gắn hàm submitForm() vào sự kiện onclick như hai ví dụ trước.
Chúng ta chỉ định "click" để nói cho mã lắng nghe khi nút được nhấp bằng con trỏ chuột. Có các loại sự kiện khác ngoài click (như sự kiện bàn phím), nhưng hướng dẫn này tập trung vào sự kiện nhấp chuột.
Chạy mã lại và nhấp nút.
Đầu ra giống như hai ví dụ trước, nhưng lần này chúng ta dùng trình lắng nghe sự kiện HTML. Trình lắng nghe sự kiện là cách mới nhất để khai báo sự kiện trong JavaScript, và có lẽ là phương pháp phổ biến nhất.
Kết luận
Sự kiện JavaScript cho phép bạn làm cho trang web tương tác. Sự kiện có thể được kích hoạt khi bạn nhấn nút, gửi biểu mẫu, hoặc di chuột qua văn bản. Có ba cách khai báo sự kiện trong JavaScript: nội tuyến, sử dụng thuộc tính, hoặc sử dụng trình lắng nghe.
Bây giờ bạn đã sẵn sàng tạo sự kiện trong JavaScript như một nhà phát triển web chuyên nghiệp!