Sự kiện JS
Trong hướng dẫn này, bạn sẽ học cách xử lý các sự kiện trong JavaScript.
Hiểu về Sự kiện và Trình xử lý Sự kiện
Sự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùng nhấp vào liên kết hoặc nút, nhập văn bản vào hộp nhập liệu hoặc vùng văn bản, thực hiện lựa chọn trong hộp chọn, nhấn phím trên bàn phím, di chuyển con trỏ chuột , gửi biểu mẫu, v.v. Trong một số trường hợp, chính Trình duyệt có thể kích hoạt các sự kiện, chẳng hạn như sự kiện tải và hủy tải trang.
Khi một sự kiện xảy ra, bạn có thể sử dụng trình xử lý sự kiện JavaScript (hoặc trình xử lý sự kiện) để phát hiện chúng và thực hiện tác vụ hoặc nhóm tác vụ cụ thể. Theo quy ước, tên của trình xử lý sự kiện luôn bắt đầu bằng từ "bật", do đó, trình xử lý sự kiện cho sự kiện nhấp được gọi là , onclicktương tự như vậy, trình xử lý sự kiện cho sự kiện tải được gọi là onload, trình xử lý sự kiện cho sự kiện mờ được gọi là onblur, v.v. .
Có một số cách để chỉ định một trình xử lý sự kiện. Cách đơn giản nhất là thêm chúng trực tiếp vào thẻ bắt đầu của các Phần tử HTML bằng cách sử dụng các thuộc tính trình xử lý sự kiện đặc biệt. Ví dụ: để gán trình xử lý nhấp chuột cho phần tử nút, chúng ta có thể sử dụng thuộc tínhonclick như sau:
Ví dụ
<button type="button" onclick="alert('Hello World!')">Click Me</button>Tuy nhiên, để tách JavaScript khỏi HTML, bạn có thể thiết lập trình xử lý sự kiện trong tệp JavaScript bên ngoài hoặc trong thẻ <script>và </script>, như sau:
Ví dụ
<button type="button" id="myBtn">Click Me</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>Lưu ý: Vì các thuộc tính HTML không phân biệt chữ hoa chữ thường nên onclick cũng có thể được viết là onClick, OnClick hoặc ONCLICK. Nhưng giá trị của nó phân biệt chữ hoa chữ thường.
Nói chung, các sự kiện có thể được phân loại thành bốn nhóm chính — sự kiện chuột , sự kiện bàn phím , sự kiện biểu mẫu và sự kiện tài liệu/cửa sổ . Còn nhiều sự kiện khác, chúng ta sẽ tìm hiểu về chúng trong các chương sau. Phần sau đây sẽ cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về các sự kiện hữu ích nhất cùng với các ví dụ thực tế trong cuộc sống.
Sự kiện chuột
Một sự kiện chuột được kích hoạt khi người dùng nhấp vào một số phần tử, di chuyển con trỏ chuột qua một phần tử, v.v. Dưới đây là một số sự kiện chuột quan trọng nhất và trình xử lý sự kiện của chúng.
Sự kiện nhấp chuột (onclick)
Sự kiện nhấp xảy ra khi người dùng nhấp vào một phần tử trên trang web. Thông thường, đây là các phần tử biểu mẫu và liên kết. Bạn có thể xử lý sự kiện nhấp chuột bằng trình xử lý sự kiện onclick.
Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn nhấp vào các phần tử.
Ví dụ
<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>Sự kiện Contextmenu (oncontextmenu)
Sự kiện contextmenu xảy ra khi người dùng nhấp chuột phải vào một phần tử để mở menu ngữ cảnh. Bạn có thể xử lý sự kiện contextmenu bằng trình xử lý sự kiện oncontextmenu.
Ví dụ sau sẽ hiển thị thông báo cảnh báo khi bạn nhấp chuột phải vào các phần tử.
Ví dụ
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>Sự kiện di chuột qua (onmouseover)
Sự kiện di chuột qua xảy ra khi người dùng di chuyển con trỏ chuột qua một phần tử.
Bạn có thể xử lý sự kiện di chuột bằng trình xử lý sự kiện onmouseover. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn đặt chuột lên các phần tử.
Ví dụ
<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>Sự kiện Mouseout (onmouseout)
Sự kiện mouseout xảy ra khi người dùng di chuyển con trỏ chuột ra bên ngoài một phần tử.
Bạn có thể xử lý sự kiện mouseout bằng trình xử lý sự kiện onmouseout. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện ra chuột xảy ra.
Ví dụ
<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>Sự kiện bàn phím
Một sự kiện bàn phím được kích hoạt khi người dùng nhấn hoặc thả một phím trên bàn phím. Dưới đây là một số sự kiện bàn phím quan trọng nhất và trình xử lý sự kiện của chúng.
Sự kiện Keydown (onkeydown)
Sự kiện nhấn phím xảy ra khi người dùng nhấn một phím trên bàn phím.
Bạn có thể xử lý sự kiện keydown bằng trình xử lý sự kiện onkeydown. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keydown xảy ra.
Ví dụ
<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>Sự kiện Keyup (onkeyup)
Sự kiện keyup xảy ra khi người dùng nhả một phím trên bàn phím.
Bạn có thể xử lý sự kiện keyup bằng trình xử lý sự kiện onkeyup. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keyup xảy ra.
Ví dụ
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>Sự kiện nhấn phím (onkeypress)
Sự kiện nhấn phím xảy ra khi người dùng nhấn một phím trên bàn phím có giá trị ký tự được liên kết với nó. Ví dụ: các phím như Ctrl, Shift, Alt, Esc, Phím mũi tên, v.v. sẽ không tạo ra sự kiện nhấn phím, nhưng sẽ tạo ra sự kiện nhấn phím và nhấn phím.
Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeypress. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện nhấn phím xảy ra.
Ví dụ
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>Sự kiện biểu mẫu
Sự kiện biểu mẫu được kích hoạt khi điều khiển biểu mẫu nhận hoặc mất tiêu điểm hoặc khi người dùng sửa đổi giá trị điều khiển biểu mẫu, chẳng hạn như bằng cách nhập văn bản vào kiểu nhập văn bản, chọn bất kỳ tùy chọn nào trong hộp chọn, v.v. Dưới đây là một số sự kiện biểu mẫu quan trọng nhất và xử lý sự kiện của họ.
Sự kiện tiêu điểm (onfocus)
Sự kiện tiêu điểm xảy ra khi người dùng tập trung vào một thành phần trên trang web.
Bạn có thể xử lý sự kiện tiêu điểm bằng trình xử lý sự kiện onfocus. Ví dụ sau đây sẽ làm nổi bật nền của kiểu nhập văn bản bằng màu vàng khi nó nhận được tiêu điểm.
Ví dụ
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>Lưu ý: Giá trị của từ khóa this bên trong trình xử lý sự kiện đề cập đến phần tử có trình xử lý trên đó (tức là nơi sự kiện hiện đang được gửi).
Sự kiện mờ (onblur)
Sự kiện mờ xảy ra khi người dùng rời tiêu điểm khỏi thành phần biểu mẫu hoặc cửa sổ.
Bạn có thể xử lý sự kiện mờ bằng trình xử lý sự kiện onblur. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi thành phần nhập văn bản mất tiêu điểm.
Ví dụ
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>Để lấy tiêu điểm khỏi một thành phần biểu mẫu, trước tiên hãy bấm vào bên trong thành phần đó, sau đó nhấn phím tab trên bàn phím, đặt tiêu điểm vào thành phần khác hoặc bấm bên ngoài thành phần đó.
Sự kiện thay đổi (onchange)
Sự kiện thay đổi xảy ra khi người dùng thay đổi giá trị của thành phần biểu mẫu.
Bạn có thể xử lý sự kiện thay đổi bằng trình xử lý sự kiện onchange. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi tùy chọn trong hộp chọn.
Ví dụ
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>Sự kiện gửi (onsubmit)
Sự kiện gửi chỉ xảy ra khi người dùng gửi biểu mẫu trên trang web.
Bạn có thể xử lý sự kiện gửi bằng trình xử lý sự kiệnonsubmit. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo trong khi gửi biểu mẫu tới máy chủ.
Ví dụ
<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>Sự kiện Tài liệu/Cửa sổ
Các sự kiện cũng được kích hoạt trong các tình huống khi trang đã tải hoặc khi người dùng thay đổi kích thước cửa sổ trình duyệt, v.v. Dưới đây là một số sự kiện cửa sổ/tài liệu quan trọng nhất và trình xử lý sự kiện của chúng.
Sự kiện tải (onload)
Sự kiện tải xảy ra khi một trang web tải xong trong trình duyệt web.
Bạn có thể xử lý sự kiện tải bằng trình xử lý sự kiệnonload. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo ngay khi trang tải xong.
Ví dụ
<body onload="window.alert('Page is loaded successfully!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>Sự kiện Unload (onunload)
Sự kiện dỡ bỏ xảy ra khi người dùng rời khỏi trang web hiện tại.
Bạn có thể xử lý sự kiện dỡ tải bằng trình xử lý sự kiệnonunload. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn cố gắng rời khỏi trang.
Ví dụ
<body onunload="alert('Are you sure you want to leave this page?');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>Sự kiện thay đổi kích thước (onresize)
Sự kiện thay đổi kích thước xảy ra khi người dùng thay đổi kích thước cửa sổ trình duyệt. Sự kiện thay đổi kích thước cũng xảy ra trong các tình huống khi cửa sổ trình duyệt được thu nhỏ hoặc phóng to.
Bạn có thể xử lý sự kiện thay đổi kích thước bằng trình xử lý sự kiện onresize. Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi kích thước cửa sổ trình duyệt thành chiều rộng và chiều cao mới.
Ví dụ
<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>