Bất kỳ ứng dụng web hiện đại nào cũng không thể tưởng tượng được nếu không có sự kiện liên quan đến nó. Sự kiện là cơ chế để xây dựng một trang web tương tác. jQuery đủ thông minh để xử lý mọi sự kiện được tạo trên trang HTML. Trước tiên, hãy cố gắng hiểu một sự kiện là gì.
Sự kiện jQuery là gì?
Sự kiện jQuery là kết quả của một hành động có thể được phát hiện bởi jQuery (JavaScript). Khi những sự kiện này được kích hoạt, bạn có thể sử dụng một chức năng tùy chỉnh để thực hiện bất kỳ điều gì bạn muốn với sự kiện. Các chức năng tùy chỉnh này được gọi là Trình xử lý sự kiện .
Thư viện jQuery cung cấp các phương thức để xử lý tất cả các sự kiện DOM và làm cho việc xử lý sự kiện hoàn chỉnh trở nên dễ dàng hơn nhiều so với những gì chúng tôi có sẵn trong JavaScript.
Sau đây là ví dụ về một số sự kiện phổ biến –
- Một cú click chuột
- Một trang web đang tải
- Di chuột qua một phần tử
- Gửi biểu mẫu HTML
- Tổ hợp phím trên bàn phím của bạn, v.v.
Bảng sau liệt kê một số sự kiện DOM quan trọng.
| Mouse Events | Keyboard Events | Form Events | Document Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| hover | keyup | select | scroll |
| mousedown | blur | unload | |
| mouseup | focusin | ready |
Cú pháp liên kết sự kiện jQuery
Hãy xem xét một tình huống khi bạn muốn bấm vào một <div> trong tài liệu HTML và sau đó bạn muốn thực hiện một số hành động đối với lần bấm này. Để đạt được điều này, bạn sẽ phải liên kết một sự kiện nhấp chuột của jQuery với phần tử <div> và sau đó xác định một hành động đối với sự kiện nhấp chuột.
Sau đây là cú pháp jQuery để liên kết một sự kiện nhấp chuột với tất cả các phần tử <div> có sẵn trong tài liệu HTML:
$("div").click();
Bước tiếp theo là xác định một hành động đối với sự kiện nhấp chuột. Sau đây là cú pháp để xác định một chức năng sẽ được thực thi khi sự kiện nhấp chuột sẽ được kích hoạt. Hàm này được gọi là Trình xử lý sự kiện jQuery
$("div").click(function(){
// jQuery code goes here
});
Sau đây là một cú pháp khác để liên kết một sự kiện nhấp chuột với bất kỳ phần tử DOM nào:
$("div").bind('click', function(){
// jQuery code goes here
});
Ví dụ về sự kiện jQuery
Sự kiện nhấp chuột jQuery
Sau đây là một ví dụ để liên kết một sự kiện nhấp chuột với <div> trong đó hộp cảnh báo được hiển thị bất cứ khi nào bạn nhấp vào bất kỳ div nào:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(){
alert('Hi there!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Sự kiện jQuery dblclick
Hãy viết lại đoạn mã trên để liên kết một sự kiện dblclick với <div> nơi hộp cảnh báo được hiển thị bất cứ khi nào bạn nhấp đúp vào bất kỳ div nào.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").dblclick(function(){
alert('Hi there!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Double click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Sự kiện nhập chuột jQuery
Sau đây là một ví dụ để liên kết một sự kiện mouseenter với <div> trong đó hộp cảnh báo được hiển thị bất cứ khi nào bạn đưa con trỏ lên bất kỳ div nào.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").mouseenter(function(){
alert('Cursor is in!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Bring cursor over any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Sự kiện di chuột jQuery
Sau đây là một ví dụ để liên kết sự kiện mouseleave với <div> trong đó hộp cảnh báo được hiển thị bất cứ khi nào bạn đưa con trỏ ra khỏi div.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").mouseleave(function(){
alert('Curosr is out!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Take cursor out any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Sự kiện di chuột xuống jQuery
Sau đây là một ví dụ để liên kết một sự kiện mousedown với <div> trong đó hộp cảnh báo được hiển thị bất cứ khi nào nhấn nút chuột trái, giữa hoặc phải trên bất kỳ div nào.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").mousedown(function(){
alert('Mouse button is down!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Press mouse button down over any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Sự kiện di chuột jQuery
Sau đây là một ví dụ để liên kết một sự kiện mouseup với <div> trong đó một hộp cảnh báo được hiển thị bất cứ khi nào nút chuột trái, giữa hoặc phải được nhả trên bất kỳ div nào.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").mouseup(function(){
alert('Mouse button is released!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Release mouse button over any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Đối tượng sự kiện jQuery
Bất cứ khi nào một sự kiện jQuery được kích hoạt, jQuery sẽ chuyển một Đối tượng sự kiện tới mọi hàm xử lý sự kiện. Đối tượng sự kiện cung cấp nhiều thông tin hữu ích khác nhau về sự kiện.
Đối tượng sự kiện thường không cần thiết và tham số bị bỏ qua, vì ngữ cảnh đầy đủ thường có sẵn khi trình xử lý buộc phải biết chính xác những gì cần thực hiện khi trình xử lý được kích hoạt, tuy nhiên, có một số thuộc tính nhất định mà bạn cần truy cập.
Các thuộc tính/thuộc tính sự kiện sau có sẵn và an toàn để truy cập theo cách độc lập với nền tảng –
| Property | Sự miêu tả |
|---|---|
| altKey | Đặt thành true nếu phím Alt được nhấn khi sự kiện được kích hoạt, sai nếu không. Phím Alt được gắn nhãn Tùy chọn trên hầu hết các bàn phím máy Mac. |
| ctrlKey | Đặt thành true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, sai nếu không. |
| data | Giá trị, nếu có, được truyền dưới dạng tham số thứ hai cho lệnh bind() khi trình xử lý được thiết lập. |
| keyCode | Đối với các sự kiện keyup và keydown, điều này trả về phím đã được nhấn. |
| metaKey | Đặt thành đúng nếu phím Meta được nhấn khi sự kiện được kích hoạt, sai nếu không. Phím Meta là phím Ctrl trên PC và phím Command trên máy Mac. |
| pageX | Đối với các sự kiện chuột, hãy chỉ định tọa độ ngang của sự kiện so với nguồn gốc của trang. |
| pageY | Đối với các sự kiện chuột, hãy chỉ định tọa độ dọc của sự kiện so với nguồn gốc của trang. |
| relatedTarget | Đối với một số sự kiện chuột, xác định phần tử mà con trỏ đã rời hoặc nhập khi sự kiện được kích hoạt. |
| screenX | Đối với các sự kiện chuột, hãy chỉ định tọa độ ngang của sự kiện so với gốc màn hình. |
| screenY | Đối với các sự kiện chuột, hãy chỉ định tọa độ dọc của sự kiện so với gốc màn hình. |
| shiftKey | Đặt thành đúng nếu phím Shift được nhấn khi sự kiện được kích hoạt, sai nếu không. |
| target | Xác định phần tử mà sự kiện được kích hoạt. |
| timeStamp | Dấu thời gian (tính bằng mili giây) khi sự kiện được tạo. |
| type | Đối với tất cả các sự kiện, hãy chỉ định loại sự kiện đã được kích hoạt (ví dụ: nhấp chuột). |
| which | Đối với các sự kiện bàn phím, hãy chỉ định mã số cho phím gây ra sự kiện và đối với các sự kiện chuột, hãy chỉ định nút nào được nhấn (1 cho bên trái, 2 cho giữa, 3 cho bên phải). |
Ví dụ
Sau đây là một ví dụ để chỉ ra cách các lần nhấp vuông khác nhau cho các tọa độ khác nhau:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(eventObj){
alert('Event type is ' + eventObj.type);
alert('pageX : ' + eventObj.pageX);
alert('pageY : ' + eventObj.pageY);
alert('Target : ' + eventObj.target.innerHTML);
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Từ khóa này trong Trình xử lý sự kiện
Nhiều khi việc sử dụng từ khóa này bên trong trình xử lý sự kiện trở nên rất dễ dàng . Từ khóa này đại diện cho một phần tử DOM kích hoạt sự kiện.
Ví dụ sau sẽ hiển thị nội dung của <div> được nhấp:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(){
alert($(this).text());
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
Xóa trình xử lý sự kiện
Thông thường, một khi trình xử lý sự kiện được thiết lập, nó sẽ có hiệu lực trong phần còn lại của vòng đời của trang. Có thể có nhu cầu khi bạn muốn xóa trình xử lý sự kiện.
jQuery cung cấp lệnh unbind() để xóa trình xử lý sự kiện đang thoát. Cú pháp của unbind() như sau –
selector.unbind(eventType, handler) or selector.unbind(eventType)
Sau đây là mô tả của các tham số –
- eventType − Một chuỗi chứa loại sự kiện JavaScript, chẳng hạn như nhấp chuột hoặc gửi. Tham khảo phần tiếp theo để biết danh sách đầy đủ các loại sự kiện.
- trình xử lý – Nếu được cung cấp, xác định trình nghe cụ thể sẽ bị xóa.
