02/11/2018, 23:28
Sự kiện trong javascript
Sự kiện là những hành động do người dùng hoặc hệ thống gây ra. Các hành động do người dùng gây ra có thể là di chuyển chuột, nhấn chuột, nhả chuột, nhấn phím, nhả phím, copy, kéo giãn cửa sổ, di chuyển cửa sổ v.v... Các sự kiện do hệ thống gây ra có thể là nạp tài liệu, đóng cửa sổ v.v...
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 | Xả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ẻ |
VD:
- onclick
<html>
<body>
<script>
function show_click() {
alert('xin chao');
}
</script>
<input onClick = "show_click()" >
</body>
</html>
- onekeyup
<html>
<body>
<script language="javascript">
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>
- oncopy
<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 freetuts.net</div>
</body>
</html>
- onload
<html>
<body>
Xin chao
</body>
</html>
<script>
alert(1);
window.onload = function()
{
alert(3);
};
alert(2);
</script>
- onblur
<html>
<body>
<script>
function check(){
var input = document.getElementById("input");
if(!input.value){
alert('khong dc bo trong')
}
}
</script>
<input type="text" onblur="check()" id="input">
</body>
</html>
- Hàm addEventListener() trong Javascript
Cú pháp :
elementObject.eventName = function(){ // elementObject là đối tượng HTML mà chúng ta sử dụng DOM để lấy - eventName là tên của event bỏ "on" như là click,change ...
// do something
};
VD: Người dùng click chuột phải vào button xuất hiện thông báo.
<html>
<body>
<input type="button" id="show-btn" value="Click me" />
<script language="javascript">
// Lấy đối tượng
var button = document.getElementById("show-btn");
// Thêm sự kiện cho đối tượng
button.onclick = function()
{
alert("Bạn vừa click vào button");
};
// button.addEventListener
</script>
</body>
</html>
- Hàm removeEventListener() trong Javascript
Cú pháp:
object.removeEventListener("click", some_action);
Ví dụ: Xây dựng một ứng dụng khi di chuyển chuột thì sẽ xuất hiện một dãy số ngẫu nhiên, nếu người dùng click vào button Stop Random thì sẽ dừng random dãy số đó.
<html>
<body>
<div id="result"></div>
<input type="button" value="Stop Random" id="stop_random" />
<script language="javascript">
// Bước 1: Lấy các đối tượng
var result = document.getElementById("result");
var button = document.getElementById("stop_random");
var html = document.getElementsByTagName("html")[0];
// Bước 2: Định nghĩa hành động hiển thị dãy số random
function do_random()
{
var randomString = Math.random();
result.innerHTML = randomString;
}
// Bước 3: Thêm hành động do_random cho sự kiện mousemove thẻ <html>,
html.addEventListener("mousemove", do_random);
// Bước 4: Thêm sự kiện click cho button
button.addEventListener("click", function(){
// Xóa hành động do_random khỏi sự kiện mousemove
html.removeEventListener("mousemove", do_random);
});
</script>
</body>
</html>
