Lập trình sự kiện với Javascript hướng dẫn các cách thức gắn sự kiện của các tag html với mã lệnh javascript để thực thi các tác vụ cần thiết.
Sự kiện của các tag html
Các tag html trong trang web có nhiều sự kiện xảy ra. Ví dụ sự kiện nạp trang hoàn tất, sự kiện người xem gõ 1 phím. Hoặc sự kiện nhắp 1 liên kết, hay đưa chuột vào 1 hình ảnh, khi user submit 1 form…
Các sự kiện từ chuột
| Sự kiện | Mô tả |
| click | Xảy ra khi nhắp chuộ trên 1 element nào đó. |
| mouseover | Xảy ra khi con trỏ chuột trên 1 element nào đó |
| mouseout | Xảy ra khi con trỏ chuột được đưa ra khỏi 1 element |
| mousedown | Xảy ra khi chuột được đè xuống ở trên 1 element |
| mouseup | Xảy ra khi buttin chuột được nhả ra ở trên 1 element |
| mousemove | Xảy ra khi di chuyển chuột. |
Các sự kiện từ bàn phím
| Sự kiện | Mô tả |
| keydown | Xảy ra khi user đè 1 phím |
| Keydown & Keyup | Xảy ra khi user buông 1 phím |
Các sự kiện trong form
| Sự kiện | Mô tả |
| focus | Xảy ra khi user focus 1 element (nhắp chuột hoặc tab nhảy tới) |
| submit | Xảy ra khi user submit 1 form |
| blur | Xảy ra khi user bỏ 1 element để chuyển focus sang element khác |
| change | Xảy ra khi user thay đổi giá trị value của element tromg form |
Các sự kiện của Window , Document
| Sự kiện | Mô tả |
| load | Xảy ra khi trình duyệt nạp xong trang web |
| unload | Xảy ra khi user rời bỏ trang web |
| resize | Xảy ra khi user chỉnh kích thước trình duyệt |
Khi các sự kiện này xảy ra, bạn có thể chạy code javascript để thực hiện xử lý cần thiết. Và có ba cách để bạn thực hiện.
Chỉ định sự kiện bằng thuộc tính html
Để chỉ định sự kiện bằng thuộc tính html, bạn dùng cú pháp như sau:
<element event=“mã lệnh javascript; mã lệnh javascript; … ” >
Trong đó element là 1 tag html, event là tên của sự kiện. Khi sự kiện của element xảy ra, các mã lệnh javascript trong dấu nháy sẽ thực thi.
<button
onclick="console.log('Bạn mới nhắp vào nút');"
ondblclick="console.log('Bạn mới nhắp đúp nút');"
onmouseover="console.log('Bạn đưa chuột vào nút');"
>
Mời bạn thử
</button>
Các mã lệnh javascrtipt ghi trong dấu nháy có thể là lời gọi hàm
<input id="username" onblur="kiemtra()" placeholder="Username">
<em id="thongbao"> </em>
<script>
function kiemtra(){
let un = document.getElementById("username");
if (un.value.length < 6 ) {
document.getElementById("thongbao").innerHTML= "username ngắn quá";
un.focus();
}
}
</script>
Chỉ định sự kiện bằng code Javascript
Để chỉ định sự kiện bằng code Javascript, chọn phần tử rồi gán cho sự kiện hàm để chạy.
element.event = myFunc;
Trong đó element là phần tử trong DOM, còn event là tên sự kiện (có chữ on ở đầu). Còn myFunc là hàm do bạn định nghĩa để chạy khi có sự kiện xảy ra.
<img id="hinh1" src="https://longnv.name.vn/hinh/songdep1.jpg" width="300">
<script>
let h = document.getElementById("hinh1");
h.onclick = function() {
h.src="https://longnv.name.vn/hinh/songdep2.jpg";
};
h.onmouseover = function() {
h.style.transform= "scale(2)";
};
h.onmouseout = function() {
h.style.transform= "scale(1)";
};
</script>
Chỉ định sự kiện với event listeners
Dùng hàm addEventListener của phần tử để gắn sự kiện với function của bạn
element.addEventListener("event", myFunc);
Trong đó element là 1 phần tử trong DOM, event là tên sự kiện. Còn myFunc là hàm thực thi 1 việc gì đó khi sự kiện xảy ra với element. Chú ý : trong tên sự kiện không có chữ on
<textarea id="motasp" rows="5" cols="80"></textarea> <br>
<span id="thongbao"></span>
<script >
let mt = document.getElementById("motasp");
mt.addEventListener("keyup", function() {
document.getElementById("thongbao").innerHTML= "Số ký tự :" + mt.value.length;
});
mt.addEventListener("focus", function(){
mt.style.backgroundColor="AntiqueWhite";
mt.style.fontSize="1.5em";
});
mt.addEventListener("blur", function() {
mt.style.backgroundColor="white";
mt.style.fontSize="1em";
});
</script>
Mời bạn tham khảo thêm các trang sau:
