Sự kiện (Event) trong Javascript
Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM nhưng nhận thấy việc học mà không thực hành thì rất nhàm chán và khó nhớ bài, vì vậy ...
Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM nhưng nhận thấy việc học mà không thực hành thì rất nhàm chán và khó nhớ bài, vì vậy trong bài này mình sẽ giới thiệu về sự kiện trong javascript. Sau bài này chúng ta có thể làm được nhiều ví dụ hơn và tôi sẽ không mất nhiều thời gian giải thích nữa.
1. Sự kiện trong javascript là gì?
Về định nghĩa dưới dạng nghe hiểu thì sự kiện là một hành động nào đó tác động lên đối tượng HTML mà ta có thể bắt được sự kiện này và thực hiện những hành động nào đó.
Mỗi sự kiện chúng ta có thể có nhiều hành động. Ví dụ bạn có một sự kiện là tết âm lịch thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà cửa, mua bao lì xì, ..
Xét về mặt thực tế thì ta có dụ thế này: Giả sử bạn xây dựng một form đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì hiện những hành động như validate dữ liệu, thông báo nếu người dùng nhập nội dung không đúng, .. Như vậy bạn cần nhớ rằng mỗi sự kiện chúng ta có thể thực hiện nhiều hành động khác nhau và bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ thể.
2. Các sự kiện (Events) trong javascrpt
Sau khái niệm sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết sự kiện trong javascript là gì rồi nhỉ? Ok ta bắt đầu ngay luôn.
Có rất nhiều sự kiện và mỗi đối tượng HTML thì lại có những sự kiện khác nhau nên mình chỉ liệt kê được những sự kiện thông dụng hay sử dụng khi các bạn làm việc với javascript để lập trình phía client.
Bảng các sự kiện thông dụng trong javascript.
| STT | Event Name | Description |
|---|---|---|
| 1 | onclick | Xảy ra khi click vào thẻ HTML |
| 2 | ondbclick | Xảy ra khi double click vào thẻ HTML |
| 3 | onchange | Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input |
| 4 | onmouseover | Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML |
| 5 | onmouseout | Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML |
| 6 | onmouseenter | Tương tự như onmouseover |
| 7 | onmouseleave | Tương tự như onmouseout |
| 8 | onmousemove | Xảy ra khi con chuột di chuyển bên trong thẻ HTML |
| 9 | onkeydown | Xảy ra khi gõ một phím bất kì vào ô input |
| 10 | onload | Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó. |
| 11 | onkeyup | Xảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt |
| 12 | onkeypress | Xảy ra khi bạn nhấn môt phím vào ô input |
| 14 | onblur | Xảy ra khi con trỏ chuột rời khỏi ô input |
| 15 | oncopy | Xảy ra khi bạn copy nội dung của thẻ |
| 16 | oncut | Xảy ra khi bạn cắt nội dung của thẻ |
| 17 | onpaste | Xảy ra khi bạn dán nội dung vào thẻ |
Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hành nhé.
3. Các ví dụ về xử lý sự kiện trong javascript
Vì đề bài yêu cầu khi nhập dữ liệu vào ô input thì hiển thị nội dung bên trong thẻ DIV nên ta có thể sử dụng sự kiện onkeyup. Thứ hai nữa là chúng ta sẽ sử dụng các hàm DOM Element để truy xuất các đối tượng HTML.
Bài giải: XEM DEMO
<html>
<body>
<script language="javascript">
// Hàm show kết quả
function show_result()
{
// Lấy hai thẻ HTML
var input = document.getElementById("message");
var div = document.getElementById("result");
// Gán nội dung ô input vào thẻ div
div.innerHTML = input.value;
}
</script>
<input type="text" id="message" value="" onkeyup="show_result()"/>
<div id="result"></div>
</body>
</html>Nếu như bài này bạn sử dụng sự kiện onkeypress hoặc onkeydown thì sẽ có kết quả sai, lý do là những sự kiện này xảy ra khi bạn nhấn phím xuống nên nó sẽ lấy giá trị chưa được cập nhật. Còn sự kiện onkeyup xảy ra khi bạn nhả phím ra nên nó sẽ lấy được giá trị mới.
Bài này quá dễ phải không nào. Trong danh sách các sự kiện trên thì có sự kiện oncopy nên ta sẽ sử dụng nó để giải bài này.
Bài giải: XEM DEMO
<html>
<body>
<script language="javascript">
// Hàm show kết quả
function show_message()
{
alert("Bạn đã copy thành công");
}
</script>
<h3>Hãy copy dòng chữ dưới đây:</h3>
<div oncopy="show_message()">Chào mừng các bạn đến với website code24h.com</div>
</body>
</html>Bài này ta phải tạo 3 ô input và gán sự kiện onkeyup cho 2 ô input đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và in kết quả vào ô input thứ 3.
Bài giải: XEM DEMO
<html>
<body>
<script language="javascript">
// Hàm tính kết quả
function tinh()
{
// Lấy 3 ô input
var a = document.getElementById("a");
var b = document.getElementById("b");
var result = document.getElementById("result");
// Tính tổng hai ô đầu tiên
var tong = parseInt(a.value) + parseInt(b.value);
// Gán giá trị vào ô thứ ba
// Phải kiểm tra tổng hai số này có bị lỗi hay không
if (!isNaN(tong)){
result.value = tong;
}
}
</script>
a: <input type="text" id="a" value="" onkeyup="tinh()"/>
b: <input type="text" id="b" value="" onkeyup="tinh()"/>
Kết quả: <input type="text" id="result" value=""/>
</body>
</html>4. Lời kết
Làm việc với Javascript thì không thể quên khái niệm event được nên hãy học chắc bài này nhé các bạn. Mình không thể đưa ra hết ví dụ cho các events được nên bạn hãy tự ra bài tập cho mình và tự giải nhé. Riêng nội dung trong bài này mình có sử dụng kiến thúc bài học cũ nên bạn rất dễ theo dõi, nếu quên thì hãy quay lại bài cũ và đọc sư qua rồi thực hành ví dụ. Chúc bạn học javascript vui vẻ nhé!
Nguồn: code24h.com
