Hôm nay Thế giới JS sẽ chia sẻ cho các bạn một cách chi tiết và nhiều ví dụ về các sự kiện(Events) trong Javascript để cung cấp giao diện động cho trang web. Các sự kiện này được nối với các phần tử trong Mô hình Đối tượng Tài liệu (DOM). Khái niệm về DOM sẽ được Thế giới JS share trong phần nâng cao của series này nha.
Theo mặc định, các sự kiện này sử dụng tính năng lan truyền sủi bọt, tức là hướng lên trên trong DOM từ trẻ em đến cha mẹ. Chúng ta có thể liên kết các sự kiện dưới dạng nội tuyến hoặc trong một tập lệnh bên ngoài.
Bài này bạn có thể vào các trang run html online để chạy các code html duới đây nha.
Cú pháp:
<HTML-element Event-Type = "Action to be performed">
Dưới đây là một số sự kiện javascript:
1) sự kiện onclick:
Đây là sự kiện chuột và kích hoạt với bất kỳ logic nào được định nghĩa nếu người dùng nhấp vào phần tử mà nó được liên kết.
Code số 1:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"
style="margin-left: 50%;">
Click me event
</button>
</body>
</html>
Đầu ra:
2) sự kiện onkeyup:
Sự kiện này là sự kiện bàn phím và thực thi các lệnh bất cứ khi nào một phím được nhả ra sau khi nhấn.
Code số 2:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head>
<script>
var a=0;
var b=0;
var c=0;
function changeBackground() {
var x=document.getElementById('bg');
x.style.backgroundColor='rgb('+a+', '+b+', '+c+')';
a+=100;
b+=a+50;
c+=b+70;
if(a>255) a=a-b;
if(b>255) b=a;
if(c>255) c=b;
}
</script>
</head>
<body>
<h4>The input box will change color when UP arrow key is pressed</h4>
<input id="bg" onkeyup="changeBackground()" placeholder="write something" style="color:#fff">
</body>
</html>
Đầu ra:
3) sự kiện onmouseover:
Sự kiện này tương ứng với việc di con trỏ chuột qua phần tử và các phần tử con của nó mà nó được liên kết.
Code số 3:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head>
<script>
function hov() {
var e=document.getElementById('hover');
e.style.display='none';
}
</script>
</head>
<body>
<div id="hover"
onmouseover="hov()"
style="background-color:green;
height:200px;
width:200px;">
</div>
</body>
</html>
Dữ liệu ra:
Trước khi chuột di chuyển qua hình vuông màu xanh lá cây
Hình vuông màu xanh lục sẽ biến mất sau khi chuột chiếm lấy nó.
4) sự kiện onmouseout:
Bất cứ khi nào con trỏ chuột rời khỏi phần tử xử lý sự kiện mouseout, một hàm được liên kết với nó sẽ được thực thi.
Code số 4:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head>
<script>
function out() {
var e=document.getElementById('hover');
e.style.display='none';
}
</script>
</head>
<body>
<div id="hover" onmouseout="out()" style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
Dữ liệu ra:
Trước khi chuột di chuyển qua ô vuông màu xanh lá cây
Hình vuông màu xanh lục sẽ biến mất sau khi chuột chiếm lấy nó và bị xóa sau một thời gian.
5) sự kiện onchange:
Sự kiện này phát hiện sự thay đổi về giá trị của bất kỳ phần tử nào liệt kê cho sự kiện này.
Code số 5:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head></head>
<body>
<input onchange="alert(this.value)"
type="number"
style="margin-left: 45%;">
</body>
</html>
Đầu ra:
Trước khi nhấn bất kỳ phím nào
6) sự kiện tải:
Khi một phần tử được tải hoàn toàn, sự kiện này sẽ được kích hoạt.
Code số 6:
<!doctype html>
<html>
<head></head>
<body>
<img onload="alert('Image completely loaded')"
alt="WKC-JS"
src=
"https://vpsus.dev/wp-content/uploads/2022/12/vpsus-javascript-javascript.png">
</body>
</html>
7) sự kiện onfocus:
Một phần tử liệt kê cho sự kiện này sẽ thực thi các lệnh bất cứ khi nào nó nhận được sự kiện focus chuột.
Code số 7:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<!doctype html>
<html>
<head>
<script>
function focused() {
var e=document.getElementById('inp');
if(confirm('Got it?')) {
e.blur();
}
}
</script>
</head>
<body>
<p style="margin-left: 45%;">
Take the focus into the input box below:
</p>
<input id="inp"
onfocus="focused()""
style=" margin-left: 45%;">
</body>
</html>
Đầu ra:
8) sự kiện onblur:
Sự kiện này được kích hoạt khi một phần tử mất tiêu điểm(Focus).
Code số 8:
<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<!doctype html>
<html>
<head></head>
<body style="margin-left: 40%;">
<p>Write something in the input box and then click elsewhere
in the document body.</p>
<input onblur="alert(this.value)">
</body>
</html>
Đầu ra:
Trước khi “VPSUS” được nhập vào bên trong hộp vs Sau khi “VPSUS” được nhập vào bên trong hộp và nhấn enter
Đang update hình…
Sự kiện onmouseup lắng nghe nhấp chuột trái và chuột giữa nhưng sự kiện onmousedown lắng nghe nhấp chuột trái, giữa và chuột phải trong khi onclick chỉ xử lý nhấp chuột trái.
Trên đây là tất cả những gì về sự kiện(Events) trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới sự kiện(Events) , hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
