Xử lý sự kiện (Event) trong Javascript
1. Javascript Events
Sự kiện (event) là một tín hiệu cho thấy một cái gì đó đã xẩy ra. Chẳng hạn bạn nhấn chuột vào một nút (button), hoặc bạn đóng trình duyệt,.. Tất cả các node của DOM phát ra (generate) các tín hiệu như vậy, nhưng có những sự kiện khác ngoài DOM chẳng hạn sự kiện bạn đóng cửa sổ trình duyệt.
Dưới đây là danh sách các sự kiện DOM hữu ích nhất:
Các sự kiện chuột (Mouse):
Sự kiện | Mô tả |
click | Sự kiện xẩy ra khi người dùng nhấp (click) trên một phần tử (element). |
contextmenu | Sự kiện xẩy ra khi người dùng nhấn phải chuột (right-clicks) vào phần tử để mở ra một context-menu. |
dblclick | Sự kiện xẩy ra khi người dùng nhấn kép (double-clicks) trên một phần tử. |
mousedown | Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử. |
mouseup | Sự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử. |
mouseenter | Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử. |
mouseleave | Sự kiện xẩy ra khi con trỏ (pointer) di chuyển ra khỏi một phần tử. |
mousemove | Sự kiện xẩy ra khi con trỏ di chuyển trên bề mặt của phần tử. |
mouseout | Sư kiện xẩy ra khi người dùng di chuyển con trỏ ra khỏi một phần tử hoặc ra khỏi một trong những phần tử con của nó. |
mouseover | Sự kiện xẩy ra khi người dùng di chuyển con trỏ vào một phần tử hoặc di chuyển vào một trong các phần tử con của nó. |
Sự kiện của các phần tử Form.
Event | Mô tả |
submit | Khi người dùng submit (Gửi đi) nội dung của <form>. |
focus | Khi người dùng tập trung (focus) vào một phần tử, ví dụ <input>. |
blur | Khi người dùng rời khỏi một phần tử, ví dụ <input>. |
Sự kiện bàn phím:
Event | Mô tả |
keydown | Sự kiện xẩy ra khi người dùng nhấn một phím (key) xuống. |
keyup | Sự kiện xẩy ra khi người dùng nhả tay ra khỏi một phím. |
keypress | Sự kiện xẩy ra khi người dùng nhấn (press) vào phím (Hoàn thành 2 hành động, nhấn xuống và nhả ra). |
Các sự kiện của Document.
Event | Mô tả |
DOMContentLoaded | Khi mà nội dung HTML đã được tải (loaded) và đã được xử lý. Mô hình DOM đã được tạo ra hoàn chỉnh. |
Các sự kiện CSS:
Event | Mô tả |
animationstart | Sự kiện xẩy ra khi quá trình hoàn hình CSS bắt đầu. |
animationend | Sự kiện xẩy ra khi quá trình hoạt hình CSS hoàn thành. |
animationiteration | Sự kiện xẩy ra khi quá trình hoạt hình CSS lặp lại. |
Xử lý sự kiện:
Để xử lý sự kiện, bạn cần phải gắn sự kiện với một bộ xử lý (handler), Bộ xử lý có thể là một hàm. Khi sự kiện xẩy ra bộ xử lý sẽ được gọi để hoạt động. Bộ xử lý (handler) là cách để chạy các mã Javascript tương ứng với các hành động của người dùng.
Bộ xử lý (handler) có thể được sét trong HTML với thuộc tính (attribute) on{event}. Chẳng hạn sự kiện click:
<input value="Click me" onclick="alert('Click!')" type="button">
<input value="Click me" onclick="someFunction()" type="button">Đối tượng this đại diện cho phần tử phát ra sự kiện.
<input value="Click me" onclick="someFunction(this)" type="button">Khi sự kiện xẩy ra, Javascript tạo ra đối tượng event và bạn có thể sử dụng nó như một giá trị của tham số.
<input value="Click me" onclick="someFunction(event)" type="button">Bạn cũng có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.
var target = event.target;2. Ví dụ với các sự kiện
Sự kiện đơn giản và hay bắt gặp là sự kiện người dùng nhấp chuột (click) trên một phần tử. Dưới đây là một ví dụ đơn giản, người dùng nhấn vào nút "=" để tính tổng 2 số.
onclick-example.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Javascript</title>
<script type = "text/javascript">
function doCalculate() {
var a = document.getElementById("a").value; // A String value
var b = document.getElementById("b").value; // A String value
var c = Number(a) + Number(b);
document.getElementById("c").value = c;
}
</script>
</head>
<body>
<h3>Click Event example</h3>
<input id = "a" type="text" value= "100"/> <br/>
+ <br/>
<input id = "b" type="text" value = "200"/> <br/>
<button onclick="doCalculate()"> = </button> <br/>
<input id = "c" type="text" value = ""/>
</body>
</html>-
Đối tượng this chính là phần tử phát ra sự kiện. Bạn có thể truyền (pass) đối tượng này vào hàm xử lý sự kiện.
this-obj-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(target) {
var random = Math.round(Math.random() * 100) + 200;
target.style.width = random + "px";
target.style.height = random + "px";
}
</script>
</head>
<body>
<h3>Event with 'this' object</h3>
<button onclick="changeSize(this)">Click Me to Change Size</button>
</body>
</html>-
Khi sự kiện xẩy ra một đối tượng event được Javascript tạo ra, nó chứa các thông tin liên quan tới sự kiện. Ví dụ với sự kiện chuột đối tượng event có thể chứa các thông tin như vị trí chuột so với trình duyệt, vị trí chuột so với phần tử phát ra sự kiện,... Bạn có thể sử dụng đối tượng event để truyền vào (pass) hàm xử lý sự kiện.
<input value="Click me" onclick="someFunction(event)" type="button">mouse-events-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="mouse-events-example.js"></script>
<style>
.my-div {
width: 290px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<h3>Mouse Events (Enter, Move, Leave)</h3>
<div class="my-div"
onmouseenter="mouseenterHandler(event)"
onmouseleave="mouseleaveHandler(event)"
onmousemove="mousemoveHandler(event)">
</div>
<h3>Mouse position</h3>
<div style="color:red;" id="position-div">
</div>
<h3>Statistics</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>mouse-events-example.js
var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;
function mouseleaveHandler(evt) {
leaveCount += 1;
showPosition(evt);
showStatistics();
}
function mouseenterHandler(evt) {
enterCount += 1;
showPosition(evt);
showStatistics();
}
function mousemoveHandler(evt) {
moveCount += 1;
showPosition(evt);
showStatistics();
}
function showPosition(evt) {
var html = "offsetX: " + evt.offsetX +"<br/>" //
+
"offsetY: " + evt.offsetY;
document.getElementById("position-div").innerHTML = html;
}
function showStatistics() {
var html =
"enterCount:" + enterCount + "<br/>" //
+
"moveCount:" + moveCount + "<br/>" //
+
"leaveCount:" + leaveCount;
document.getElementById("statistics-div").innerHTML = html;
}-
Bạn có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.
event-obj-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(evt) {
var target = evt.target;
var random = Math.round(Math.random() * 100) + 100;
target.style.width = random + "px";
target.style.height = random + "px";
}
</script>
</head>
<body>
<h3>Access 'target' object via 'event' object</h3>
<button onclick="changeSize(event)">Click Me to Change Size</button>
</body>
</html>-
Ví dụ một hàm xử lý với nhiều tham số.
multi-params-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(borderColor, target, evt, bgColor) {
var random = Math.round(Math.random() * 100) + 100;
target.style.width = random + "px";
target.style.height = random + "px";
target.style.borderColor = borderColor;
target.style.backgroundColor = bgColor;
}
</script>
</head>
<body>
<h3>A Handler has multiple parameters</h3>
<a href="">Reset</a> <br/><br/>
<button onclick="changeSize('red', this, event, 'green')">Click Me</button>
</body>
</html>Các hướng dẫn ECMAScript, Javascript
- Giới thiệu về Javascript và ECMAScript
- Bắt đầu nhanh với Javascript
- Hộp thoại Alert, Confirm, Prompt trong Javascript
- Bắt đầu nhanh với JavaScript
- Biến (Variable) trong JavaScript
- Các toán tử Bitwise
- Mảng (Array) trong JavaScript
- Vòng lặp trong JavaScript
- Hàm trong JavaScript
- Hướng dẫn và ví dụ JavaScript Number
- Hướng dẫn và ví dụ JavaScript Boolean
- Hướng dẫn và ví dụ JavaScript String
- Câu lệnh rẽ nhánh if/else trong JavaScript
- Câu lệnh rẽ nhánh switch trong JavaScript
- Hướng dẫn xử lý lỗi trong JavaScript
- Hướng dẫn và ví dụ JavaScript Date
- Hướng dẫn và ví dụ JavaScript Module
- Lịch sử phát triển của module trong JavaScript
- Hàm setTimeout và setInterval trong JavaScript
- Hướng dẫn và ví dụ Javascript Form Validation
- Hướng dẫn và ví dụ JavaScript Web Cookie
- Từ khóa void trong JavaScript
- Lớp và đối tượng trong JavaScript
- Kỹ thuật mô phỏng lớp và kế thừa trong JavaScript
- Thừa kế và đa hình trong JavaScript
- Tìm hiểu về Duck Typing trong JavaScript
- Hướng dẫn và ví dụ JavaScript Symbol
- Hướng dẫn JavaScript Set Collection
- Hướng dẫn JavaScript Map Collection
- Tìm hiểu về JavaScript Iterable và Iterator
- Hướng dẫn sử dụng biểu thức chính quy trong JavaScript
- Hướng dẫn và ví dụ JavaScript Promise, Async Await
- Hướng dẫn và ví dụ Javascript Window
- Hướng dẫn và ví dụ Javascript Console
- Hướng dẫn và ví dụ Javascript Screen
- Hướng dẫn và ví dụ Javascript Navigator
- Hướng dẫn và ví dụ Javascript Geolocation API
- Hướng dẫn và ví dụ Javascript Location
- Hướng dẫn và ví dụ Javascript History API
- Hướng dẫn và ví dụ Javascript Statusbar
- Hướng dẫn và ví dụ Javascript Locationbar
- Hướng dẫn và ví dụ Javascript Scrollbars
- Hướng dẫn và ví dụ Javascript Menubar
- Hướng dẫn xử lý JSON trong JavaScript
- Xử lý sự kiện (Event) trong Javascript
- Hướng dẫn và ví dụ Javascript MouseEvent
- Hướng dẫn và ví dụ Javascript WheelEvent
- Hướng dẫn và ví dụ Javascript KeyboardEvent
- Hướng dẫn và ví dụ Javascript FocusEvent
- Hướng dẫn và ví dụ Javascript InputEvent
- Hướng dẫn và ví dụ Javascript ChangeEvent
- Hướng dẫn và ví dụ Javascript DragEvent
- Hướng dẫn và ví dụ Javascript HashChangeEvent
- Hướng dẫn và ví dụ Javascript URL Encoding
- Hướng dẫn và ví dụ Javascript FileReader
- Hướng dẫn và ví dụ Javascript XMLHttpRequest
- Hướng dẫn và ví dụ Javascript Fetch API
- Phân tích XML trong Javascript với DOMParser
- Giới thiệu về Javascript HTML5 Canvas API
- Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
- Polyfill là gì trong khoa học lập trình?
Show More
