Sự kiện (Event) trong javascript sẽ giúp chúng ta có những hiệu ứng thật cool ngầu trên một webstie. Vậy sự kiện là gì nhỉ ? Và sử dụng như thế nào ? Xin chào mọi người và mình là anymous-4 :D. Mình sẽ giải quyết cái vấn đề này trong bài viết dưới đây, một cách ngắn gọn nhất.
Sự kiện (Event) trong javascript là gì?
Sự kiện là những hành động của người dùng khi tương tác lên phần tử HTML.
Chẳng hạn như bạn click vào một cái nút sẽ có những thông báo xuất hiện.
Hay là khi người dùng gõ văn bản vào textfield đó là một sự kiện …
Nói đơn giản là sự kiện chính là những tác động của bạn lên trang web ấy. Bạn có thể làm những hành động gì nào ? Có thể là dùng chuột click , lăn chuột,gõ phím…
Các sự kiện trong JavaScript:
Mình chỉ liệt kê những sự kiện chúng ta thường sử dụng thôi nhé.
| Tên sự kiện | Mô tả |
| onclick | Sự kiện xảy ra khi người dùng click chuột vào phần tử |
| ondblclick | Sự kiện xảy ra khi người dùng click kép chuột vào phần tử |
| onmouseenter | Sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử |
| onmouseleave | Sự kiện xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử. |
| onkeydown | Sự kiện xảy ra khi người dùng đang nhấn một phím |
| onkeyup | Sự kiện xảy ra khi người dùng nhả phím ra |
| oncopy | Sự kiện xảy ra khi người dùng sao chép nội dung của phần tử |
| oncut | Sự kiện xảy ra khi người dùng cắt nội dung của phần tử |
| onpaste | Sự kiện xảy ra khi người dùng dán nội dung vào phần tử |
| onchange | Sự kiện xảy ra khi người dùng thay đổi giá trị của phần tử |
Một vài ví dụ đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
</head>
<body>
<button onclick="alert('Hello')">Click me</button>
<script>
</script>
</body>
</html>
</html>Mình đã thêm sự kiên onclick vào button ở trên, khi bạn click vào một thông báo từ trình duyệt sẽ xuất hiện
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Event</title>
<style>
h1{
transition: 2s;
}
.move{
transform:translateX(200px)
</style>
</head>
<body>
<h1 id="txt1">Chạy xa anh</h1>
<button id="nut1">Click me</button>
<script>
document.addEventListener("DOMContentLoaded",function(){
var nut = document.getElementById('nut1');
var txt = document.getElementById('txt1');
nut.onclick = function(){
txt.classList.toggle('move');
}
},false)
</script>
</body>
</html>
</html>Đây là một ví dụ đơn giản. Cơ mà để làm những hiệu ứng cool ngầu thì trước tiên ta hãy cứ bắt đầu với những hiệu ứng đơn giản trước đã.. Mình sẽ giới thiệu nó trong những bài viết sau.Vậy là bây giờ các bạn đã hiểu rõ được sự kiện (Event) trong javascript rồi phải không 😀 Mình xin được kết thúc bài viết tại đây.
Xem bài viết tiếp theo tại đây.
Để lại một bình luận