Sự kiện JavaScript:Ba cách để tạo sự kiện

Thêm các tính năng tương tác vào một trang web là nơi JavaScript tỏa sáng. Trong khi HTML và CSS được sử dụng để thiết lập cấu trúc và kiểu của một trang web, thì bạn có thể sử dụng JavaScript để làm cho trang web của mình năng động hơn.

Trong JavaScript, các sự kiện được sử dụng để làm cho một trang web tương tác. Trong hướng dẫn này, chúng ta sẽ nói về các sự kiện JavaScript. Chúng ta sẽ khám phá vị trí các sự kiện có thể được sử dụng, cách xác định một sự kiện và cách gọi một sự kiện. Hãy bắt đầu!

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 sửa đổ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 sẽ được tạo. Khi bạn nhấp vào menu thả xuống mở rộng, một sự kiện JavaScript sẽ được sử dụng.

Các sự kiện JavaScript có nhiều cách sử dụng, bao gồm:

Kiểm tra xem biểu mẫu đã được điền chưa
Điều hướng người dùng đến một trang khác khi họ đã điền vào biểu mẫu
Làm cho các menu thả xuống trở nên tương tác
Cho phép người dùng phóng to và thu nhỏ hình ảnh

Để làm việc với các sự kiện trong JavaScript, bạn cần biết về hai khái niệm:trình xử lý sự kiện và trình xử lý sự kiện.

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 một trang web. Trình nghe sự kiện kết nối một chức năng sự kiện với một phần tử HTML, vì vậy khi chức năng đó được thực thi, phần tử web sẽ bị thay đổi.

Trình xử lý sự kiện có thể được xác định theo một trong ba cách:sử dụng trình xử lý sự kiện nội tuyến, thuộc tính sự kiện hoặc trình xử lý sự kiện.

Trình xử lý sự kiện nội tuyến

Cách dễ nhất để bắt đầu với các 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ẽ xác định sự kiện của mình trong tệp HTML của bạn.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Đối với ví dụ này, giả sử rằng chúng tôi đang thiết kế trang web cho một tiệm bánh có tên là JJ Smith’s Bakery. Chúng tôi muốn người dùng được nhắc với dòng chữ “Đã nhận được phản hồi”. khi họ gửi một biểu mẫu.

Hãy xem 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()">Submit form</button>
	</body>
</html>

Mã này hiển thị một trang web trông giống như sau:

Sự kiện JavaScript:Ba cách để tạo sự kiện

Cho đến nay, không có nhiều điều đang diễn ra. Trang web của chúng tôi chứa một nút có thể thực hiện điều gì đó khi chúng tôi nhấp vào nút của chúng tôi. Khi chúng tôi nhấp vào nút của mình, không có gì xảy ra. Điều này là do chúng tôi chưa viết trình xử lý sự kiện của mình.

Trong tệp main.js, hãy dán mã sau:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

Mã này sẽ tìm phần tử có ID “được gửi” và sẽ sửa đổi nội dung của nó thành “Biểu mẫu đã được gửi”. Mã này sẽ chỉ chạy khi submitForm() của chúng tôi hàm được gọi. Điều 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 tôi.

Khi chúng tôi nhấp vào nút của mình, những điều sau sẽ xảy ra:

Như bạn có thể thấy, lời nhắc của chúng tôi xuất hiện. Chúng tôi đã sử dụng một trình xử lý sự kiện nội tuyến để làm cho trang web của chúng tôi trở nên tương tác. Nhưng các trình xử lý sự kiện nội tuyến không phải là cách duy nhất để sử dụng các sự kiện trong JavaScript. Hãy thảo luận về cách sử dụng thuộc tính trình xử lý sự kiện trong mã của chúng ta.

Sự kiện có thuộc tính trình xử lý

Trong trình xử lý nội tuyến, bạn cần chỉ định hàm nào bạn muốn thực thi trong tệp HTML của mình. Trong mã HTML của chúng tôi trước đó, dòng này là nơi chúng tôi xác định hàm mà chúng tôi muốn gọi khi nhấn nút của chúng tôi:

<button onclick="submitForm()">Submit form</button>

Sử dụng thuộc tính trình xử lý, chúng tôi có thể xóa sự kiện “onclick” khỏi mã của mình. Điều này cho phép chúng tôi di chuyển tất cả JavaScript làm cho trang web của chúng tôi tương tác vào tệp của chính nó. Đối với ví dụ này, chúng tôi sẽ gán cho nút của mình là "nút" ID, để chúng tôi có thể xác định nút của mình trong mã JavaScript của chúng tôi. Hãy xóa sự kiện onclick và gán cho nút của chúng tôi một ID:

<button id="button">Submit form</button>

Để sự kiện của chúng tôi kích hoạt khi nút của chúng tôi được nhấn, chúng tôi sẽ viết một sự kiện có thuộc tính trình xử lý bên trong tệp “main.js” của chúng tôi. Đây là mã mà chúng tôi sẽ sử dụng:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

Khi bạn chạy mã này và nhấp vào nút, thông tin sau được trả về:

Nút của chúng tôi hoạt động theo cách tương tự như trước đó, nhưng mã của chúng tôi được viết theo một cách khác. Thay vì viết nội tuyến các trình xử lý sự kiện, chúng tôi đã chuyển chúng vào tệp main.js của chúng tôi. Điều này giúp chúng tôi viết mã dễ bảo trì hơn vì chúng tôi không cần phải đọc qua tất cả mã HTML của mình để tìm ra nơi các sự kiện nội tuyến của chúng tôi được kích hoạt.

Trình xử lý sự kiện

Trình nghe sự kiện có thể được sử dụng để khai báo một sự kiện trong JavaScript. Người nghe luôn tìm kiếm khi trạng thái của một phần tử bị thay đổi và nếu phần tử đó bị 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 nghe sự kiện, người nghe sẽ "nghe thấy" rằng một sự kiện chuột đã được kích hoạt. Sau đó, nó sẽ thực thi mã bạn đã liên kết với trình nghe sự kiện cụ thể đó.

Mã HTML của chúng tôi cho ví dụ này giống như ở trên, nhưng chúng tôi sẽ thực hiện một thay đổi nhỏ đối với tệp “main.js” của chúng tôi:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

Trong mã này, chúng tôi đang sử dụng addEventListener để tạo trình nghe sự kiện. Điều này thay vì ràng buộc submitForm() của chúng tôi Hàm JavaScript đối với một sự kiện onclick như chúng tôi đã làm trong hai ví dụ cuối cùng của chúng tôi.

Chúng tôi chỉ định "nhấp chuột" để nói mã của chúng tôi lắng nghe khi nút của chúng tôi được nhấp bằng con trỏ chuột. Có các loại sự kiện khác ngoài sự kiện nhấp chuột — chẳng hạn như sự kiện bàn phím — nhưng chúng tôi sẽ tập trung vào sự kiện nhấp chuột trong hướng dẫn này.

Hãy chạy lại mã của chúng tôi và nhấp vào nút của chúng tôi.

Đầu ra giống như chúng ta đã thấy trong hai ví dụ trước, nhưng lần này chúng ta đang sử dụng trình xử lý sự kiện HTML. Trình xử lý sự kiện là cách mới nhất để khai báo các sự kiện trong JavaScript và chúng có lẽ là phương pháp phổ biến nhất được sử dụng.

Kết luận

Các sự kiện JavaScript cho phép bạn làm cho trang web của mình trở nên tương tác. Một 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 một số văn bản. Có ba cách để khai báo một sự kiện trong JavaScript:nội tuyến, sử dụng thuộc tính hoặc sử dụng trình nghe.

Bây giờ, bạn đã sẵn sàng để bắt đầu tạo sự kiện bằng JavaScript như một nhà phát triển web chuyên nghiệp!