Xử lý sự kiện trong JavaScript
Bài viết này giải thích về cách xử lý sự kiện trong JavaScript.
YouTube Video
javascript-html-event.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container-flex">
105 <div class="left-column">
106 <h2>HTML Sample</h2>
107 <div id="parentDiv">
108 <button id="myButton">Click me</button>
109 </div>
110 </div>
111
112 <div class="right-column">
113 <h2>Form Sample</h2>
114 <form id="myForm">
115 <input type="text" name="username">
116 <button type="submit">Submit</button>
117 </form>
118 </div>
119 </div>
120
121 <div class="container">
122 <h1>JavaScript Console</h1>
123 <button id="executeBtn">Execute</button>
124 <div id="output"></div>
125 </div>
126
127 <script>
128 // Override console.log to display messages in the #output element
129 (function () {
130 const originalLog = console.log;
131 console.log = function (...args) {
132 originalLog.apply(console, args);
133 const output = document.getElementById('output');
134 output.textContent += args.map(String).join(' ') + '\n';
135 };
136 })();
137
138 document.getElementById('executeBtn').addEventListener('click', () => {
139 // Prevent multiple loads
140 if (document.getElementById('externalScript')) return;
141
142 const script = document.createElement('script');
143 script.src = 'javascript-html-event.js';
144 script.id = 'externalScript';
145 //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146 //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147 document.body.appendChild(script);
148 });
149 </script>
150</body>
151</html>Xử lý sự kiện trong JavaScript
Xử lý sự kiện trong JavaScript là một cơ chế để thực hiện các hành động cụ thể nhằm đáp ứng các thao tác của người dùng (chẳng hạn như kích chuột và nhập bàn phím) hoặc các hành động của trình duyệt. Bằng cách thiết lập lắng nghe sự kiện, bạn có thể tạo ra các trang web động và tương tác.
Cơ bản về sự kiện
Các sự kiện xảy ra nhằm đáp ứng thao tác của người dùng và hành động của trình duyệt. Khi một sự kiện xảy ra, hàm xử lý sự kiện (function) liên quan sẽ được thực thi. Ví dụ, có các sự kiện như sau:.
- Nhấp chuột (
click) - Nhập từ bàn phím (
keydown,keyup) - Di chuyển chuột (
mousemove,mouseover) - Gửi biểu mẫu (
submit) - Hoàn tất tải trang (
DOMContentLoaded) - Cuộn (
scroll)
Thêm lắng nghe sự kiện
Lắng nghe sự kiện được thiết lập bằng phương thức addEventListener(). Phương thức này gọi một hàm cụ thể khi sự kiện được chỉ định xảy ra.
Cú pháp cơ bản của addEventListener()
1element.addEventListener(event, handler);elementlà phần tử HTML theo dõi sự kiện.eventlà tên của sự kiện (ví dụ,click).handlerlà hàm sẽ được thực thi khi sự kiện xảy ra.
Đối tượng sự kiện
Khi một sự kiện xảy ra, JavaScript truyền một đối tượng sự kiện chứa thông tin chi tiết về sự kiện đến trình xử lý sự kiện. Đối tượng này bao gồm thông tin như phần tử nào đã kích hoạt sự kiện và phím nào đã được nhấn.
Ví dụ: Sử dụng Đối tượng Sự kiện
1<button id="myButton">Click me</button>1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4 console.log(event); // Display event details in the console
5 console.log('Clicked element:', event.target); // Display the clicked element
6});- Đoạn mã này sử dụng đối tượng sự kiện để hiển thị thông tin chi tiết và phần tử được nhấp trong bảng điều khiển khi nút được nhấn.
Các Sự kiện Phổ biến
Sự kiện Nhấp chuột
Sự kiện click xảy ra khi người dùng nhấp chuột vào một phần tử.
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- Đoạn mã này hiển thị một thông báo trong bảng điều khiển khi phần tử được nhấp.
Các Sự kiện Bàn phím
Các sự kiện keydown và keyup xảy ra khi người dùng nhấn hoặc thả một phím. Bạn có thể sử dụng event.key để xác định phím nào đã được nhấn.
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- Đoạn mã này hiển thị tên của phím trong bảng điều khiển khi người dùng nhấn một phím.
Các Sự kiện Chuột
Các sự kiện mousemove và mouseover xảy ra khi chuột di chuyển hoặc di chuột qua.
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- Đoạn mã này hiển thị vị trí (tọa độ X và Y) trong bảng điều khiển mỗi khi chuột di chuyển.
Các Sự kiện Biểu mẫu
Các sự kiện liên quan đến biểu mẫu bao gồm submit và input. Sự kiện submit xảy ra khi một biểu mẫu được gửi và thông thường sẽ làm mới trang, nhưng event.preventDefault() thường được sử dụng để ngăn điều này.
Ví dụ: Ngăn làm mới trang khi gửi biểu mẫu
1<form id="myForm">
2 <input type="text" name="username">
3 <button type="submit">Submit</button>
4</form>1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4 event.preventDefault(); // Prevent page reload
5 console.log('Form has been submitted');
6});- Đoạn mã này ngăn trang web tải lại khi biểu mẫu được gửi và hiển thị một thông báo trong bảng điều khiển thay vào đó.
Lan truyền Sự kiện (Nổi Bọt và Bắt Bóng)
Sự kiện lan truyền qua hai giai đoạn: giai đoạn bắt bóng, di chuyển từ các phần tử cha đến các phần tử con, và giai đoạn nổi bọt, di chuyển từ các phần tử con đến các phần tử cha.
Nổi Bọt Sự kiện
Theo mặc định, sự kiện xảy ra tại phần tử bên trong nhất và lan truyền ra ngoài. Quá trình này được gọi là nổi bọt.
Ví dụ: Ví dụ Nổi Bọt
1<div id="parentDiv">
2 <button id="myButton">Click me</button>
3</div> 1const parent = document.getElementById('parentDiv');
2const button = document.getElementById('myButton');
3
4parent.addEventListener('click', () => {
5 console.log('Parent element was clicked');
6});
7
8button.addEventListener('click', () => {
9 console.log('Button was clicked');
10});- Trong ví dụ này, khi bạn nhấp vào một nút, sự kiện của nút xảy ra trước, sau đó là sự kiện của phần tử cha.
Bắt Bóng Sự kiện
Bằng cách chỉ định true làm đối số thứ ba trong addEventListener(), bạn có thể xử lý các sự kiện trong giai đoạn bắt bóng.
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- Đoạn mã này xử lý sự kiện nhấp chuột của phần tử cha ở giai đoạn bắt và hiển thị một thông báo trong bảng điều khiển.
Ngăn Lan Truyền với stopPropagation()
Bạn có thể ngăn chặn sự lan truyền của sự kiện bằng cách sử dụng event.stopPropagation().
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- Đoạn mã này ngăn sự kiện lan truyền khi nút được nhấp và hiển thị một thông báo trong bảng điều khiển.
Loại bỏ Sự kiện
Bạn có thể xóa trình lắng nghe sự kiện bằng cách sử dụng removeEventListener(). Để xóa trình lắng nghe sự kiện, bạn cần một tham chiếu đến hàm đã được chỉ định trong addEventListener().
1function handleClick() {
2 console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick); // Remove the event listener
- Đoạn mã này xóa trình nghe sự kiện nhấp chuột khỏi nút để sự kiện sẽ không còn được xử lý khi nhấp vào nữa.
Sự kiện Tùy chỉnh
Trong JavaScript, bạn có thể tạo và kích hoạt các sự kiện tùy chỉnh bên cạnh các sự kiện tiêu chuẩn. Sử dụng trình khởi tạo CustomEvent.
1document.addEventListener('myCustomEvent', (event) => {
2 console.log(event.detail.message); // Displays "Hello!"
3});
4
5const event = new CustomEvent('myCustomEvent', {
6 detail: {
7 message: 'Hello!'
8 }
9});
10document.dispatchEvent(event);- Đoạn mã này tạo và phát một sự kiện tùy chỉnh
myCustomEvent, đồng thời hiển thị chi tiết của nó trong bảng điều khiển.
Tóm tắt
Xử lý sự kiện là một yếu tố thiết yếu để nâng cao tính tương tác của các ứng dụng web. Bằng cách sử dụng các thành phần của xử lý sự kiện, bạn có thể mang đến cho người dùng trải nghiệm linh hoạt và tinh tế hơn.
- Trình lắng nghe Sự kiện: Sử dụng
addEventListener()để gán một trình xử lý sự kiện cho phần tử. - Đối tượng Sự kiện: Khi một sự kiện xảy ra, một đối tượng sự kiện sẽ được truyền và có thể được sử dụng để lấy thông tin chi tiết.
- Lan truyền Sự kiện: Các sự kiện lan truyền qua hai giai đoạn: bong bóng (bubbling) và bắt giữ (capturing).
- Sự kiện Biểu mẫu và Sự kiện Tùy chỉnh: Bạn có thể xử lý các hành động gửi biểu mẫu và các sự kiện tùy chỉnh của riêng mình.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.