Bài 1: Giới thiệu về Trình quản lý quảng cáo
BÀI GIẢNG: Xử LÝ SỰ KIỆN TRONG JAVASCRIPT VÀ JQUERY
1. Giới thiệu về Sự kiện trong JavaScript
Sự kiện là những hành động do người dùng thực hiện trên trang web, chẳng hạn như nhấn nút, di chuột qua một phần tử, nhập văn bản, hay tải trang.
2. Cách bắt sự kiện trong JavaScript
Có ba cách để gán sự kiện trong JavaScript:
2.1. Gán sự kiện trực tiếp trong HTML
<button onclick="alert('Button clicked!')">Nhấn tôi</button>
Nhược điểm: Khó bảo trì nếu có nhiều sự kiện.
2.2. Gán sự kiện bằng JavaScript
<button id="btn">Nhấn tôi</button>
<script>
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
</script>
Nhược điểm: Chỉ gán được một sự kiện cho một phần tử.
2.3. Sử dụng addEventListener()
<button id="btn">Nhấn tôi</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
Ưu điểm: Cho phép gán nhiều sự kiện vào một phần tử.
3. Sự kiện trong jQuery
Sử dụng jQuery giúp đơn giản hóa việc gán sự kiện.
3.1. Sử dụng .on()
<button id="btn">Nhấn tôi</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
alert("Button clicked!");
});
});
</script>
4. Một số sự kiện quan trọng
4.1. Sự kiện chuột
| Sự kiện | Mô tả |
|---|---|
click |
Xảy ra khi người dùng nhấn chuột |
dblclick |
Nhấn đúp chuột |
mouseover |
Di chuột vào phần tử |
mouseout |
Di chuột ra khỏi phần tử |
mousemove |
Di chuyển chuột bên trong phần tử |
Ví dụ:
<div id="box" style="width:100px;height:100px;background:red;"></div>
<script>
$("#box").mouseover(function() {
$(this).css("background", "blue");
}).mouseout(function() {
$(this).css("background", "red");
});
</script>
4.2. Sự kiện bàn phím
| Sự kiện | Mô tả |
|---|---|
keydown |
Nhấn phím xuống |
keyup |
Nhả phím |
keypress |
Nhấn phím |
Ví dụ:
<input type="text" id="input">
<p id="output"></p>
<script>
$("#input").keyup(function() {
$("#output").text($(this).val());
});
</script>
4.3. Sự kiện trang web
| Sự kiện | Mô tả |
|---|---|
load |
Khi trang web tải xong |
resize |
Khi thay đổi kích thước trình duyệt |
scroll |
Khi cuộn trang |
unload |
Khi người dùng rời khỏi trang |
Ví dụ:
<script>
$(window).resize(function() {
alert("Trình duyệt vừa thay đổi kích thước!");
});
</script>
5. Sử dụng hàm callback để quản lý sự kiện
Hàm callback là một hàm được truyền vào một hàm khác và thực thi sau khi hành động hoàn tất.
Ví dụ:
<button id="fade">Mờ dần</button>
<div id="box" style="width:100px;height:100px;background:red;"></div>
<script>
$("#fade").click(function() {
$("#box").fadeOut(1000, function() {
alert("Box đã biến mất!");
});
});
</script>
6. Tổng kết
- JavaScript và jQuery cung cấp nhiều sự kiện để xử lý tương tác.
- Nên sử dụng
addEventListener()và.on()để dễ bảo trì. - Có thể sử dụng callback để thực hiện hành động sau sự kiện.
Bài tập về nhà: Xử lý sự kiện trong JavaScript và jQuery
Yêu cầu:
Tạo một trang web có các phần tử tương tác sau:
- Nút bấm – Khi click vào nút, nội dung của một đoạn văn (
<p>) sẽ thay đổi thành "Bạn đã nhấn nút!". - Trường nhập liệu – Khi người dùng nhập vào một ô input, hiển thị nội dung vừa nhập ngay bên dưới.
- Hình ảnh – Khi rê chuột vào ảnh, ảnh sẽ phóng to, khi rời chuột khỏi ảnh, ảnh sẽ trở lại kích thước ban đầu.
- Danh sách (ul > li) – Khi click vào một mục danh sách, thay đổi màu nền của mục đó thành màu xanh.
Mẫu HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập xử lý sự kiện</title>
<style>
img { width: 200px; transition: 0.3s; }
.highlight { background-color: blue; color: white; }
</style>
</head>
<body>
<button id="btnChange">Nhấn vào đây</button>
<p id="text">Đoạn văn này sẽ thay đổi.</p>
<input type="text" id="inputText" placeholder="Nhập gì đó...">
<p id="outputText"></p>
<img id="image" src="https://via.placeholder.com/200" alt="Ảnh mẫu">
<ul>
<li class="list-item">Mục 1</li>
<li class="list-item">Mục 2</li>
<li class="list-item">Mục 3</li>
</ul>
</body>
</html>